#introduction {

width: 600px;

padding: 20px;

background: white;

border: 1px solid #ccc;

margin: 20px auto;

border-radius: 10px;

}

h1 {

color: #1998E2;

font-size: 22px;

text-align: center;

}

p {

color: #777;

font-size: 18px;

line-height: 26px;

}

Note: congratulations! We just built our homepage together. What a fantastic achievement already. It looks great and it didn’t take much code at all. It’s a nice, simple and clean website that serves our purpose very well. It’s important when designing a website to consider both your audience and also your content. You should adopt the mindset of ‘How can we get the most out of our content here?’ Let’s take this website as an example. This website is going to be information-heavy, text-heavy and its main function is to provide an easy way for us to read back what we have learned. Therefore, we needed to ensure that we created a template that would fit those functions. As a result, we have created a nicely contrasted main content div that ensures ideal line-lengths along with plenty of padding and line height to further improve legibility. We have given the element a middle-ground font size that ensures it can be read, while also allowing us to house a lot of information in a relatively small space. Hopefully you are starting to understand why this layout suits our content so well and maybe you can even spot a few other ways that this layout has considered its audience and content?

Well done again for completing your first webpage. Let’s now move onto the HTML page where we can start to build on top of this template.

11.1 image

HTML page

The template

Let’s kick things off with updating the page template that we will be using for our actual content pages. We’re going to update the template very slightly to assist with the change in information type that we are going to be displaying. We are going to make two changes to the template. First we are going to add in a new method of navigation for our website, which will take the form of a vertical menu, which will be fixed in position so that the users can quickly jump to any section of the page at ease. Second, we are going to replicate the style of our #introduction div into a class, which we will apply to every one of our sections to keep each section separate and also consistent. We will then give each block a unique id which will be used in our jump menu as a bookmark.

HTML

The steps:

  • First we will create our new webpage. Create a new file in your root directory and name it ‘html.html’.
  • Now copy and paste over all of the content from index.html.
  • Move the active class in the navigation over to the html link.
  • Head down to the introduction div and update the text to the following:
    1. –  Header: HTML
    2. –  Paragraph: ‘Welcome to the dedicated HTML section. This page contains all of the HTML elements that I have understood and used so far on my journey into web design’ (feel free to alter the text into your own speaking style)
  • Now copy the whole #introduction block and paste it directly below the existing one.
  • Change the id of the newly pasted block to ‘tables’ and add on a class to the block of ‘section’.
  • Update the content as follows:
    1. –  Header: Tables
    2. –  Paragraph: enter here a brief description as per your understanding of tables. Try to write something that you feel will help you to continue to remember and understand them in the future when you come back to this website
  • Add a new div underneath the paragraph tag with the class of ‘example’.
  • Inside the.example div create some example tables for your own reference (feel free to add content to the table or just leave it blank).
  • Now just after the.example div, add a button input element with a label of ‘Show code’ and a class of ‘code-show-button’.

Expected result: after carrying out the above steps we should be left with a nice new div which contains a header, paragraph, a table and a button that says ‘Show code’. Obviously at this stage it looks pretty ugly, so let’s get straight to styling it in the next section.

Expected code: