Welcome to Tuts+ Town, where everybody loves web design! In this series we will learn all about designing and building a website. To help us, we’re going to make a website together.
These lessons (or tutorials) will give you a step by step guide for bringing a website to life. All the exercise files will be included at the end of each lesson, so you can compare your own work as you go along.
So, please come in, make yourself comfortable and let’s create something for the people of Tuts+ Town!
How Does the Web Work?
Let’s take a step back and think about how the web works.
When two computers are connected to the Internet (which is shown as a yellow line in the picture below) they can talk to each other.
A server (the blue box) is a special computer that contains web page files. Your computer at home or school is not a server, because it is not connected directly to the Internet. We connect to the Internet through an Internet Service Provider (ISP).
A site’s content (all that stuff a website talks about) is organized within a special set of rules that computers understand; sort of like speaking in a secret, coded language, except we will soon be in on this little secret as well!
In this picture the browser is asking to view www.tutsplus.com from the server where the site’s files live. The server is sending the files back and the browser is translating them to display a page on the screen. And this happens very quickly!
It’s all about communication and sharing information.
Because of all this, a site you write locally (on your computer) can’t be seen by other people on a different computer, until you move the files to a server. We’ll look at this properly later on.
A Web Designer’s Job
A web designer’s job is very important. All of the stuff taking place in the picture above is happening for one reason: to view a website. A web designer’s job is to decide how this website looks and works, and even other things, like making sure the website is usable to disabled visitors (in the same way you are a visitor to Tuts+ right now).
Our Project
In this series we will be creating a website for Tuts+ Town. The town needs a place where tourists can get handy information about the town before they visit.
Here’s a preview of the website:
This website will include all the web design points we will be learning about. It will be a really neat first web design project for you!
Sketching and Building
Now let’s talk a bit about what we need to get there.
First, we will draw up our site and then include what we want to have on the page in a special file. We will also add links here for the visitors to be taken to other places, such as the shop websites.
Styling
After we draw up and write the special file for our website we will need to make it look good. This is the section where all our color and layout ideas (deciding where all this stuff will live on the screen) will come to life.
How can we make our site easy to use? What feel do we want our colors to give? Where should everything be placed on a smartphone screen? What about a full computer screen? What font will look best? These are all things we will have to think about, but don’t worry, it’s a really fun process and these questions will come to you naturally the more websites you design.
Series Map
Below is a complete roadmap for the journey we will be taking to create our website. Each block has an introduction to the topic and is then broken down into smaller pieces.
Introduction
You can see by the pink star that we’re reading the Intro at the moment. We now have a basic idea of how the web works, a web designer’s job, and have taken a peak at the project we will be designing and building together.
Building a Website
The next part is where we think up ideas and start sketching. Sketching is a really fun way to gather your thoughts on a design before you start coding. It can be a real time saver and help keep us on track.
We will then talk about files and the tools we need to get started with the coding part of our website.
HTML
HyperText Markup Language (HTML) is that secret (but not for long!) language used to organize our text file that we spoke briefly about earlier. This language helps our browsers to understand and display the website files.
Everything on our website, and all websites for that matter, will live within HTML elements. Elements are bits of this language that have a meaning and help describe everything we place on the page.
Don’t worry about what this code actually means at the moment, just as long as you know that every website is made from a written document.
CSS
Cascading Stylesheets, CSS, allow us to set the styling (colors, fonts, overall feel) for our website, making it as attractive and as easy to use for its visitors as possible.
CSS Layout
CSS can also help us lay all our pieces out on the page.
Images
In this part of the journey we will quickly talk about the type of image that will be included on our site and how to do some styling to it. There will be four lovely images added, what do you think of them?
Design Basics
In this part we will look at the “building blocks” of web design. We want to make sure we make something that people will use, and can use easily, as well as making sure it looks nice.
Typography
Typography is the art of arranging type and a great follow-up to our new design lesson, as it can greatly add to or take away from the success of our website.
The first example of typography on our site can be found at the very top:
Color
Color is very important and great fun. Color can make a site pretty, as well as have meaning, which we will talk all about here.
End of the Series
We will finish this series of lessons by learning how to get your website files onto one of those special computers, a server, so all your friends and family can see it on the Internet. We will also talk about where you can take your studies with your new title as “Web Designer for Tuts+ Town”.
But let’s not get too worried about that just yet, we’ve only just got here!
See You Soon!
In the next lesson we will jump straight into learning how we prepare for building a website with HTML. I can’t wait, see you around town!
