Intro to Web Design
Time 6.7 hrs

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

Blurb

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.

License

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

Outline

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?
Resources
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?
  • ...
Credits
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
Theory
  • 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.
      • You can think of HTML as the skeleton of your website. It defines the structure of where everything is.
    • CSS
      • Cascading Style Sheets.
      • This allows us to control the presentation of our content (e.g. how it looks)
      • CSS is like the skin. It adds colours, shapes, sizes, and positions to your HTML.
    • JS
      • JavaScript
      • This allows us to add interactivity to our websites.
      • JavaScript is like the brains. It adds scripted elements to make a website interactive.

  • To begin with, you'll start by learning HTML. After all, brains and skin without a skeleton are just a blob!
  • However, HTML alone doesn't look like much: just a naked skeleton.
  • HTML & CSS together make a clever pair: by separating content and presentation (skeleton and skin), 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.
10 mins
Code Editors
Getting Setup
  • Writing HTML is just like writing text. You'll need an editor to get started.
  • A code editor is like a text editor, but with superpowers.
  • There are lots of editors out there to choose from, our recommendations are:
  • Each editor has different features, but they all essentially let you write code.
  • Download and install one of these code editors before you continue.

  • Let's start working on your one-page website:
    • First, open your code editor (VS Code or Caret)
    • Create a new file (File > New)
    • Save this file as index.html in a folder called "My Website"
  • Next, type the following HTML 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.
  • Now, save your file and continue learning about HTML.
10 mins
Building Your Website
Hands On

  • The internet is FULL of webpages.
    • Just below the surface of each webpage we visit is HTML.
    • There are millions and millions of webpages on the internet.
    • This means there's billions and billions of lines of HTML!
  • So, what does all this HTML code mean?
  • Before we continue building your site, we need to learn a little more about HTML.
    • HTML is made up of tags.
    • This is a tag: <p>
    • And another tag: <div>
    • Each tag starts with < ends with > and has a name like p or div.

  • Almost every piece of HTML uses an opening tag and a closing tag.
  • Content goes in between the tags, and the whole thing together is called an element.
  • <p>This is an example paragraph element</p>
  • Opening tags and closing tags work as a pair.
  • Here's another example of tags in HTML:
<h1>My Cat</h1>

<p>My cat is <strong>very</strong> grumpy.</p>
  • When the HTML is rendered, the tags themselves are invisible, but the effect they have is not. In this case, the <strong> tag is making the word bold:
My cat is very grumpy.

  • Each tag has a different meaning.
  • In the example above, there are <p> paragraphs, <strong> bold tags, and <h1> heading tags.
  • Tags are used to add HyperText Markup Language to plain text, which your web browser uses to transform into a website.

  • <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

  • To continue:
    • Lets update your website by changing your title tag. You can build a site about anything you want.
    • Look in your HTML code for your title tag and change the words inside it.
  • Finally, to view your work in a browser, find the file using Finder (Mac) or Files (Chromebook) 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.
20 mins
CSS & Background
Hands On
  • Right, our website is pretty boring, so let's start making it 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 code editor, and save it as style.css
    • Place this new file in same folder as your HTML file.
    • Next, open your index.html file and 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 file, return to your browser and refresh your webpage. You should see something like:

Nested Tags
Theory
  • Now that we have the basics of a website, we're almost ready to add some content!
  • So far, we've learned about tags and added some to our code.
  • It's important to understand that HTML is made up of tags nested inside each other.
  • To get an idea of how nested tags work, check out this video from Don't Fear the Internet.

  • In this video, we can see how HTML tags can be nested. Like a hamburger.

20 mins
Divs
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

  • Notice how these <div> tags are nested inside the <body> tag.
  • Anytime we nest a tag inside another tag, we indent it one level (1 tab or 4 spaces).

  • 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.
  • Add three new divs inside the <div id="content"> in your index.html file:

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

  • Now your site should look something like this:

30 mins
JavaScript
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 JavaScript: this is the "brains" of your website, which can make it interactive.
  • Let's do the following:
    • Create a new text file and save it as script.js
    • Then add the following code to this file:
    • Now, in your index.html file, put the following line of code in between your <head> and </head> tags:
      • <script type="text/javascript" src="./script.js"></script>
    • And finally, add an onclick="" to your menu links:
      • onclick="showContent('home')"
    • Your menu links should look something like this, 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).
  • Here are some helpful references to get started:
    • W3Schools is the definitive resource for HTML info. Check the sidebar, there's a huge selection of info and examples.
    • Interneting is Hard has lots more illustrated tutorials about HTML and CSS.
    • Mozilla Docs also have a great guide for getting started with HTML.
    • Don't Fear the Internet also has more videos to explain the hard parts of web development.
  • Try to add each of the following types of content to your site:
    • Images
    • Videos
    • Lists
    • Tables
    • Links

  • Not sure what to add to your site? The internet has a solution!
  • Lorem Ipsum is generic placeholder text that designers use. It's mostly nonsense text, which lets you focus on the design of your site and not get stuck on the content.
    • But, regular lorem ipsum is full of latin and kinda boring.
    • Visit Meet the Ipsums and generate some more interesting text :)
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.
  • Here are some more common formatting tags to try:
<p> </p> Paragraph
<strong> </strong> Bold
<em> </em> Emphasis
<i> </i> Italic
<u> </u> Underline
<s> </s> Strikethrough
<h1> </h1>

Heading 1

<h2> </h2>

Heading 2

<h3> </h3>

Heading 3

<h4> </h4>

Heading 4

<br> Line Break. Unlike other tags, this one doesn't need a closing tag.
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.
  • 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.
  • Remember that you will need to put some content in your footer, such as your Creative Commons license.
  • If you get stuck, be sure to google your questions, or ask your teacher or friend.
70 mins
Share & Submit
Finishing Up
  • Generally, in order to publish your site online, you would 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.
  • To submit your website, you can upload your whole "My Website" folder to Google Drive, then share the folder and submit the link.
  • Alternatively, you can simply submit your ZIP file to Gibbon directly.

    Records 1-3 of 3
    Unit Students

    Lester
    Shared on 15/03/2021

    Andrea & Beth
    Shared on 02/11/2020

    Ryan
    Shared on 30/11/2017
    Powered by Gibbon v27.0.00dev

    Founded by Ross Parker at ICHK Secondary | Built by Ross Parker, Sandra Kuipers and the Gibbon community
    Copyright © Gibbon Foundation 2010-2024 | Gibbon™ of Gibbon Education Ltd. (Hong Kong)
    Created under the GNU GPL | Credits | Translators | Support