Web Design 101
Time 6.7 hrs

Difficulty Intermediate
Prerequisites Tools For Learning
Departments Human Technologies
Authors Ross Parker
Groupings Individual
Minimum Year Group None


This unit teaches you how to build a website from scratch. Having already built websites with WordPress, this unit seeks to go back to fundamentals, using HTML, CSS and JS to build a site from the ground up.


This work is shared under the following license: Creative Commons BY-SA-NC


The Pitch
Why should I bother learning this?
  • Think about all of the amazing web-based software you use. Google. Facebook. Twitter. All hand built using fundamental web technologies, including HTML, CSS & JS, by individuals who changed the world. So, do you want to master the web and build anything you want?
What is needed to run this unit?
  • Laptop
  • Internet access
  • Text editor (any good text editor will do, but the examples here will use TextWrangler, which is free and open source).
  • Graphics editor (examples here will use Acorn, which is free for schools. Another good bet would be GIMP)
Interdisciplinary Links
Do not try and force this. What areas of other subjects might this reflect and/discuss language. For IB, links with ToK.
Teacher Reflection
What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
  • ...
Any CC attribution, thanks, credit, etc.
  • Web design thumbnail by GraphiqaStock on freepik under Freepik License.
  • Google logo used under assumed fair use for education.
  • Facebook logo used under assumed fair use for education.
  • Twitter logo used under assumed fair use for education.

This page requires you to be logged in to access it. Please login and try again.
5 mins
Want To Master The Web And Build Anything?
The Pitch
  • Think about all of the amazing web-based software you use. Google. Gibbon. Trello. All hand built using fundamental web technologies, including HTML, CSS & JS, by individuals who changed the world.
  • So, do you want to master the web and build anything you want?


5 mins
The Very Basics
  • In this unit you will create and share your own website.
  • Instead of a traditional website, where each page is a separate file, we are going to use some cutting edge technologies to make a one-page website.
  • The three main technologies you will use in this unit are:
    • HTML
      • HyperText Markup Language.
      • We use this to say what content should appear on a web page.
      • This is the foundation of all web pages.
    • CSS
      • Cascading Style Sheets.
      • This allows us to control the presentation of our content (e.g. how it looks)
    • JS
      • JavaScript
      • This allows us to add interactivity to our websites.
  • HTML & CSS make a clever pair: by separating content and presentation, we can change the way a website looks by changing a single file (the stylesheet): even if the website has 1000s of pages. This saves a lot of time compared to just using HTML on its own.
20 mins
Starting Your Website
Hands On
  • Before we get started with your site, we need to learn a little about HTML.
    • In HTML, tags are used to create elements on the page.
    • Tags can take two forms:
      • Pairs: <div></div>
        • The first part (<div>) means open a division on the page, the second part (</div>) means close it
      • Singles: <img/>
  • With this in mind, let's start working on your one-page websites.
    • First, open a text editor, such as Atom (Mac) or Caret (Chromebook)
    • Create a new file and save it as index.html in a folder named as you want.
    • Enter the following HTML tags to create the foundation of your website
      • Note the way they are indented...this is very important for making your code easy to read).
      • You can use the Tab key to make the indents: it is much easier than using Space.

  • Remember to use your own site name in the title tag. You can build a site about anything you want.
  • Now, save your file.
  • Finally, to view your work in a browser, find the file using Finder (or some other file explorer) and double click on it. You should see a blank page with the title you entered in the browser's menu bar.
  • Any time you change your file, save it, and refresh the page in your browser to see the changes.
  • Note: If you're using a Chromebook, you can create a folder and save your website directly in Google Drive. This will help ensure that all your changes are saved as you're building your website.


  • So, what does this HTML mean?
  • <html> and </html> mean start and end an HTML document.
  • <head> and </head> mean start and close the header, which gives information about the document.
  • <title> and </title> enclose the name of the site, as it appears in the top of the browser window or tab
  • <body> and </body> mean start and end the part of the website that users see
20 mins
CSS & Background
Hands On
  • Right, our websites are pretty boring, so let's start making them more interesting.
  • To do this we will use CSS, which is a way of controlling the appearance of your site. You can use CSS in 3 ways:
    1. By using the HTML style="" option in any tag.
    2. By putting a block of CSS into the header of your page.
    3. By create an external CSS file, and linking it to HTML.
  • We will use method 3, as it is the most powerful because it allows one file to control an entire site.
  • To do this, you will need to:
    • Create a new file in your text editor, and save it as style.css, placing it in the same folder as your HTML file.
    • Add the following code to your HTML header:

  • Now we are going to create a background image in Acorn (Mac) or Pixlr (Chromebook) (or any other graphics application you like):
  • If your Acorn trial has expired, go to this link to unlock the full version
    • Open your graphics editor, and create a file of 15px by 15px.
    • Pick two shades of the same colour, and paint a repeating pattern, such as:

    • You might have to zoom in to work on your image, as it will be a tiny tile, which we will repeat using CSS. Zoomed in, it looks like this:

    • Save the file as bg.png, and place it in your website folder.
  • Finally, enter the following code into your style.css file, to take this image and repeat it across the page.

  • Save your style.css page, return to your browser and refresh your webpage. You should see something like:

20 mins
Hands On
  • Now, let's get ready to add some content.
  • <div> tags (aka divs or divisions) are great ways to hold and place content in HTML.
  • First, let's create one div each for the following parts of our website. Each one will have an id, which let's us refer to it from the style sheet.
    • Top
    • Content
    • Footer
  • To do this, enter the following code into your index.html file

  • Now, let's enter the following code into style.css to style and position our 3 divs, remembering to save the file when done:

  • If everything has worked properly, you should be able to go back to your website in your browser, refresh the page and see something like this:

  • Congratulations! You have the start of a stylish website.
20 mins
Playtime 1
Go Nuts
  • You now have some time to work on your website on your own. You might want to think about or work on:
    • A theme or topic for your site...what is it going to be about?
    • Catching up on anything you have missed or that is not working.
    • Asking questions about the various codes and what they mean...there are quite a few, and you might not understand them all, but you can make a start.
    • Experimenting to see what changing different codes achieves.
30 mins
Links & Top Menu
Hands On
  • We are now going to put some content into our topMenu area. This will include our site name, and a menu.
  • In HTML, links take a the form of <a href=''>Some Text</a>: I will quickly explain this syntax to you.
  • Now, let's put in place our top menu in index.html:


  • If you save this and refresh your page, you will see something that looks pretty ugly, so let's add the following to the end of your style.css:

  • Save your style.css file and refresh the page in your browser to see something like:

  • Notice what happens when you hover over the links.
30 mins
Page Divs
Hands On
  • Let's now create the divs for each of the pages in our website, using inline CSS to hide all but the home page:

  • And then let's add the following to style.css to adjust the appearance:

  • Now your site should look something like this:

30 mins
Hands On
  • OK, this is where it gets really tricky. Ask questions if you need, and use the video to help you.

  • The final piece in the puzzle is setting up our menu to show and hide the different page divs, making the site navigable.
  • To do this, we will use jQuery which is a set of JavaScript tools aimed to make JavaScript easier to use and more powerful.
  • Let's do the following to install jQuery:
    • Download jQuery from the web (http://code.jquery.com/jquery-2.0.3.min.js) and save the file as jquery.js in your website folder.
    • Now, put the following line of code in between your <head> and </head> tags in index.html:
      • <script type="text/javascript" src="./jquery.js"></script>
    • And finally, add an onclick="" to your menu links, changing the ids as required for your pages:





  • Now save your files, refresh the page in your browser, and see if your links work.

40 mins
Creating Content
Hands On
  • You now have some time to write content for each of the pages in your site.
  • You can look online to find the HTML code for including images in your site, and you can also embed content from other sites (such as YouTube, Google Docs, etc).
40 mins
Playtime 2
Go Nuts
  • You now have this time to continue developing your site independently, catching up on anything you have missed and seeking clarification on any items you do not understand.
  • Try to build as much content into your site, to turn it into a real, useful site of some kind.
70 mins
Playtime 3
Go Nuts
  • You now have this time to continue developing your site independently, catching up on anything you have missed and seeking clarification on any items you do not understand.
  • Remember that you will need to put some content in your footer, such as your Creative Commons license.
  • Colour palettes are sets of colours that have been designed to look good together: choosing and applying a colour palette is a great way to improve the design of your site. Check out some ideas at ColorLovers.com.
70 mins
Share & Submit
Finishing Up
  • In order to publish your site online, you need a server on the web. You could rent space from a company like GreenGeeks, or set up your own server.
  • However, this costs money, which we don't want you to have to spend.
    • In the past, we were able to use Dropbox to get free website hosting, but this now requires a Pro account, and so is not available to most students.
    • In order to get around this, ICHK has hosted website space, on which we can host your work if you feel it is suitable to be publicly shared on the Internet. To do this compress your whole website directory, and email me the resulting ZIP file. I will take your folder, put it on the web, and then give you a link that you can submit as your final work, and share with others too.
  • My example can be found at:

  • Alternatively, if you don't want to have your site hosted, you can simply submit your ZIP file to Gibbon directly.
Records 1-3 of 3
Unit Students

Shared on 15/03/2021

Andrea & Beth
Shared on 02/11/2020

Shared on 30/11/2017
Powered by Gibbon v25.0.00dev | © Ross Parker 2010-2023
Created under the GNU GPL at ICHK | Credits | Translators