Lifelong Vagabonds Home Banner

How to Code a Website for Beginners
Lesson One: Creating HTML & CSS Files

09 November 2016 | Mri Grout

Learning to code a website from scratch can be a daunting experience, especially if you don't know anything about HTML5 or CSS other than that they're both used to create a website. However, it's not a difficult skill to learn (honest!) and the benefits of learning how to code yourself are vast. For one, your website will load faster and easier as it won't be crowded down with ridiculously long and messy template coding; and two, you can design it exactly how you picture it looking in your mind's eye.

So before we get into the coding part of creating a website, we must, of course, first have an idea of what we want that final picture to look like. This will obviously change due to personal preference, but for the sake of this lesson we're going to stick with the most common website design, which you can see below.

Understanding the Common Website Design

Common website design
To create this layout, there are eight key departments in play:
  1. Html tag - this is the actual creation of a web page and is needed for every and any website you make.
  2. Head tag- this tag allows you to control what people see when your webpage pops up in a search engine or on a social media network, as well as what appears in the tab bar of your website.
  3. Title tag - this tag lies inside of the header tag and is only made up of plain text. As you might guess, the title tag concerns the titling of your page, but ONLY the titling of what appears in the tab bar and what pops up on a search engine (ie: Facebook titles will be created elsewhere). The ideal length for a title tag for Google is between 50-60 characters.
  4. Body tag - now this section is where you will start coding pieces that will be seen on one's actual screen.
  5. Header div - this tag goes inside of the body tag
  6. Section div - this tag also goes inside the body tag
  7. Aside div - as does this one
  8. Footer div - this will be the final tag that's inside the body tag

If you don't understand all of this, that's okay as all I've covered so far is the technicalities and like you don't need to know how a TV is electrically engineered to be able to flick through the channels, you also don't need to know all of the technical jargon before you can code a website even as a beginner.

Creating a Basic HTML File

The first step in coding a website is to open a text editor like Notepad++. Personally though, I prefer Gedit as I find it much easier to keep track of everything due to its fantastic color coding. However, whatever Text Editor is installed on your computer will work.

After copying and pasting the blue HTML coding below, save the file as index.html or home.html . These two names will automatically be picked up by servers as being your site's home page. If you name it anything else, you will have to manually go into a server and reroute it.

<!DOCTYPE html> <html lang="en-US"> <head> <title>Tab Bar Title</title> </head> <body> <div id="header"></div> <div id="section"></div> <div id="aside"></div> <div id="footer"></div> </body> </html>

As you can see, every tag that is opened: <open tag example> also needs to be closed: </closed tag example> . The slash between the less than and greater than signs is what closes it; if something isn't working correctly, that is the first thing you should check. To minimize the chance of your coding going wrong due to this, I would recommend to indent as I did in the example above.

Okay, now that that's been copied, go between the opening and closing tags of the title, section, aside, and footer divs and write something. Save it; then go into the folder it was saved in and open it in a browser. You should see something like this:

Basic Html code seen in a browser

If you're struggling, here's an example: <div id="section">main articles of site</div>

Creating & Linking In a Basic CSS File

Now this is where it gets fun as we're going to be creating a CSS file to personalize the HTML file. We're not going to learn everything about CSS in this lesson as that would take forever, but I will cover the basics. As with the HTML file, you're going to open a new document in your Text Editor and then save it as site.css . Unlike the HTML home page file, however, your css file does not need to be called site. You can call it whatever you like and it'll be fine.

After you save the blank document, you are then going to copy the below red css code into it and save again.

#header { width:100%; /*the width of the header across the page*/ padding: 0%; /*the space between the contents and the inside of the width*/ margin:0%; /*the space between the outside of the width and the page size*/ background-color:blue; /*color of the header's background*/ color:yellow; /*color of the font in the header*/ font-size: 40px; /*size of the font in the header*/ text-align:center; /*position of the text in accord to the header; can also use left and right*/ } /*Everything between the stars and slashes is a css comment and will not display on the browser*/

Now go back to your HTML file and include the below blue code after the title closing tag, but before the head closing tag.

<link href="site.css" rel="stylesheet" type="text/css"/>

If you didn't save your CSS file as site.css, then you will need to write your chosen name over site.css in the above code. Then save it and refresh the page in your browser to see something like this.

coding a website for beginners header test

If you're wondering why we've decided to create a new file to save the CSS instead of just implementing it into the HTML file, then create a new document in the Text Editor and save it as an .html file. Then copy and paste the code in your index or home html file into the new one. As you can see, the CSS file will stay the same across all of your html files. This way you do not have to waste time editing the same thing over and over again. Trust me, that's a real bore.

Next lesson I will be covering how to use CSS to design a website layout. However, until then have a go at playing with the different CSS attributes and see how it changes the browser display. If you finish with making the header how you want it, then feel free to move on style the section, aside, and footer div tags.

If you need a more visual aid to help you along then check out our video step-by-step guide:

And as always, if you have any questions, please feel free to ask below,

How to Code a Website for Beginners Lesson One: Creating HTML & CSS Files