Welcome to the second lesson in our Web Design for Kids series!
In this lesson we will learn all about some things we need to do and the tools we need before we start writing the code for our Tuts+ Town website; we are getting there, I promise! Also, don’t forget to ask any questions in the comments area at the bottom of this page.
First thing’s first though, let’s take a closer look at exactly what we will be creating together!
Sketching
It’s super helpful to sketch any ideas we have in our heads before we start actually building them. It’s an exercise that can save us a lot of time when we get to the coding part.
Maybe what’s in our heads just doesn’t look right once it’s on paper? Maybe some new problems and questions come up in our sketch? Maybe our design is just too busy? Many of these problems will show themselves in our sketches.
It’s OK to not like our sketches at first, that’s exactly what we want to happen! We want to get this all worked out on paper first.
Sketching the Tuts+ Town Website
We need a website for tourists to visit and learn about what shops and businesses our town offers. We’ll group these businesses together in a way that makes sense, such as “hotels” within one group and “restaurants” in another. We’ll want to have links to the business’ own websites, so our visitors can click them to get more details.
There are also some images we will use to give a welcoming feel for the town.
Here’s a look at the sketch that led to the fully designed and colored preview of the site:
This is the exact website that we will be creating from scratch! Pretty neat.
Editors
To write HTML code (all that secret language stuff we talked about in the first lesson) we need a text editor to type it in.
It’s best not to use something like Microsoft Word for this, as a proper code text editor will make our job much easier. A code editor will understand what we are typing and make all the code the right colors, while Microsoft Word is better for writing school reports, for example.
There are several good, free code editors which you can download from the web. If you are unsure of how to download something, or not certain if you should, it’s always best to ask an adult.
Bluefish is great for computers running Windows, while Atom will be a good fit for a Mac.
We will jump into what this text means in the next course, but here’s a peek at what you can expect to be typing.
Files, Files, Files
As we talked a bit about already, a website is just a bunch of files. These files must all live in the same folder in order for the browser to get them.
The Tuts+ Town website will have an HTML file (saved with a .html file extension at the end), a CSS file (saved with a .css file extension at the end), and four images that will be saved in a folder named “images”. The images folder will live in the same main folder as the HTML and CSS files.
A file extension is the group of letters that come after the dot in a file name, telling us what kind of file it is:
As mentioned, our images will be saved in a folder named “images” within our main site folder, like this:
In the picture above we have an image named town.svg (the .svg extension is just a kind of image) which we’ve put in an extra folder called “images”. Doing this helps keep things tidy:
Both these ways of doing things are correct, but we will be using extras folders, like the picture on the right.
Browsers
We will see our work right in the browser, like the one you are using now to view this Tuts+ page!
There are several browsers available for free download if you don’t already have one, such as Google Chrome and Firefox. If you are using a Mac computer you will already have Safari installed, nice!
Not on the Web, Yet
We’re going to build our website directly on our computers and not the Internet. If you remember in our first lesson, we explained that we can’t see a website on the Internet if it isn’t on a server.
The picture below shows what a finished website would look like being looked at locally (not on the Internet) in a browser. Instead of seeing a web address like www.tutsplus.com, we see the site’s local address, which looks a bit different:
Well Done!
In this lesson we looked at some important things that will help us get ready to write our website’s code. We looked at how to prepare files and some tools like a text editor and a browser.
In our next lesson we will jump right into the coding part of our website! We’ll organize (I know, so much organizing!) and add some code to our HTML file. This is where the fun starts!
See you around town!
