<!DOCTYPE html>

<html>

<head>

<title>How to build a website</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<div id=”navigation”>

<div id=”navigation-inside”>

<ul>

<li><a href=”index.html”>Home</a></li>

<li><a href=”html.html”>HTML</a></li>

<li><a href=”css.html” class=”active”>CSS</a></li>

<li><a href=”javascript.html”>JavaScript</a></li>

</ul>

</div>

</div>

<div id=”quick-menu”>

<h3>Quick Links</h3>

<ul>

<li><a href=”#styling-text”>Styling Text</a></li>

</ul>

</div>

<div id=”header”>

<img src=”img/header-image.jpg” alt=”Header Image”>

<div id=”profile”>

<div id=”profile-image”>

<img src=”img/profile-icon.png” alt=”Profile icon”>

</div>

<h2>by<br>Kenny Wood</h2>

</div>

</div>

<div id=”introduction”>

<h1>CSS</h1>

<p>Welcome to the dedicated CSS section. This page contains all of the CSS properties that I have understood and used so far on my journey into web design.</p>

</div>

<div id=”styling-text” class=”section”>

<h1>Styling Text</h1>

<p>Styling text is an important part of web design as it allows us to ensure that text is legible and also fits in with the style of the webpage.</p>

<div class=”example”>

<p style=”color: #1998E2; font-size: 16px; line-height: 18px; text-align: center;”>This is my example of some styled text

</div>

<input class=”code-show-button” type=”button” onClick=”showCode(‘styling-text’)” value=”Show code” />

</div>

<script src=”main.js”></script>

</body>

</html>

Next steps

Now that we have created this example of how we can demonstrate our understanding of CSS, you are free again to go off and add in the rest of the properties that you have an understanding of. Go back through the CSS chapter of this book and add sections for all of the different CSS properties that you encounter. Then, just like we did with the HTML page, we will have a full catalogue of all of our code snippets that we can refer back to later. Once you have finished updating this page, move on to the next section where we will be building the final page of our website, the JavaScript page.

Conclusion

Congratulations. You’re one step closer to completing your first reference website. It’s really coming together nicely now. Each webpage is slightly different, yet still maintains the overall style of the website. This is the goal when creating websites. We want uniformity among all of our pages, even when the design is slightly different across the various pages. Now on to the final page of our website.

JavaScript page

So here we are. The final page. You are about to complete your first website. This website uses three different languages to achieve its desired output. I bet you didn’t think you’d have an understanding of three separate languages and be able to put them all together seamlessly to create a website so soon into your web design career.

Right, let’s get going with the JavaScript page. Just like with the CSS page, we are going to maintain the same template, but make some slight adjustments to how we demonstrate the code example inside our ‘.example’ div.

The steps:

  • Let’s take our html.html page and duplicate it to javascript.html.
  • Now make all of the necessary changes to turn it into the JavaScript page:
    1. –  Change the title
    2. –  Change the active class on the navbar
    3. –  Strip out the section divs – leave one for us to use as a template
    4. –  Rewrite the introductory text
    5. –  Remove all of the quick links we added

Now we should have a nice base file to work from again.

Let’s go straight in with an example of a JavaScript function. We’re going to start with a nice and simple for loop. With these functions, the description of each function is going to be hugely important as the output won’t always mean a lot to the user without some context as to how we got to the output.

  • Edit the ‘.section’ div that you left when you were migrating html.html to javascript.html.
  • Add a new title and paragraph for ‘for loops’.
  • Add a relevant id to the section and replicate the id down in the click handler function value.
  • Add a link to the quick links navigation menu with the id as the ref value.
  • Inside the ‘.example’ div create a pair of script tags.
  • Inside the script tags write a for statement which:
    1. –  loops 10 times and logs to the console the number of the variable each time it runs
    2. –  wrap this loop in a function
  • Create an input button and pass the function we just created to the onClick event handler.
  • Add a class of ‘run-javascript’ to the button.

Now save the file and check out the file in the browser. You should see the button inside, which, when clicked outputs 1,2,3,4,5,6,7,8,9,10 to the console. Clicking ‘Show code’ should show the whole script tag and its contents.

The button looks a bit uninspired, so let’s update the style of the button to make it look a bit more exciting. Head over to your CSS file and add the following rules for the ‘.run-javascript’ class:

  • Margin top and bottom of 0px, left and right margin of automatic.
  • A width of 200px.
  • Change the display type to a block.

Now our button should be a bit bigger and centred. Much better. Now we have a working snippet of JavaScript attached to a button, the code of which can easily be viewed by clicking the ‘show code’ button. Perfect! Before we wrap this page up, let’s quickly check that we have the same code written.

Expected code: