How Kids Can Build A Website For Free | Part 3 of 4


      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 Layout

      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:

Example Website

    Home (example.netii.net)
    About (example.netii.net/about)
    Contact (example.netii.net/contact)
    Gallery (example.netii.net/gallery)
    Testimonials (example.netii.net/testimonials)

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:link {
color:#000000;
}

      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.

      When I say you can add almost anything you want to your website, I mean you can add javascript. Javascript is a certain type of computer code. With it, you can make snow fall on your webpage, you can make an image change to another one with a mouseover, you can create a pop-up window, and more. If you click here, you can copy and paste any of those codes to your website, which makes it more interactive and fun.

      Tomorrow, you’ll be finalizing your website, checking your code, and making your website search engine optimized.

Advertisements