This post is part three of the four-post series, How Kids Can Build A Website For Free. To read part one, click here. To read part two, click here. Part four is going to be posted on my blog tomorrow.
Yesterday, you learned about FTP, directories, and you’ve learned some simple coding. Today, you’re going to start building your actual website, with almost anything you can imagine on it.
These instructions apply to 000webhost. They may not make sense with another website builder.
The first thing you’re going to do is create your website’s layout. A layout is the header, navigation menu, footer, columns, and content of a website. A header is the top of your website. It’s where your logo will go. The navigation menu is a “menu” of all the pages on your website. It usually goes below your header. The content of your website is usually the center of your website, where your photos, text, and more will go. The columns are the sidebars of your website. Sidebars can usually be seen on blogs, such as this one here. You can have a left sidebar, a right sidebar, or none. Finally, the footer is where you’ll include additional pages, and also a copyright.
To do this, choose one of the layouts shown here. Copy and paste the code of the layout you want. Then, go to your public_html directory. Create a directory in that directory called about. And then in that about directory, create a file called index.php. Paste that layout you copied in that box. Now save it. Now go to yourwebsite.netii.net/about. You have just created your first web page!
To create your other web pages, do the same thing that you did to create your about page, except for calling that one directory about. Instead, call it something like contact, gallery, or whatever types of web pages you want. Eventually, you should also create an additional webpage for a sitemap. A sitemap is kind of like a map because it shows you every page on a website. Here’s an example sitemap:
Another sitemap can be shown here.
The next step is to customize your CSS. Copying and pasting some of the codes here will let you customize your style sheet. For example, if you wanted to change your link color, you would copy this code, and then customize it:
A live example of this code used on a 000webhost website can be shown here. With the help of Lissa Explains It All, you can do the CSS, and more stuff for your website all by yourself. I did it when I was nine years old.
Tomorrow, you’ll be finalizing your website, checking your code, and making your website search engine optimized.