Unit Details
Web Design 101
Time
400

Difficulty
Intermediate
Prerequisites
Learning Exhibition Site
Departments
Human Technologies
Authors
Ross Parker
Groupings
Individual
Pairs

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

You do not have access to this action.

Want To Master The Web And Build Anything?
The Pitch | 5 min

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

 

The Very Basics
Theory | 5 min

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

Starting Your Website
Hands On | 20 min

  • 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 or TextWrangler.
    • Create a new file and save it as index.html (or index.htm if you are a purest) 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.

 

  • 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

CSS & Background
Hands On | 20 min

  • 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 background image in Acorn (or any other graphics application you like):
    • Open your graphics editor, and create a file of 5px by 5px.
    • 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:

Divs
Hands On | 20 min

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

Playtime 1
Go Nuts | 20 min

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

Links & Top Menu
Hands On | 30 min

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

Page Divs
Hands On | 30 min

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

jQuery
Hands On | 30 min

  • 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:
      • onclick="$('#home').css('display','block');$('#boringStuff').css('display','none');$('#contact').css('display','none');"
  • Now save your files, refresh the page in your browser, and see if your links work.

Creating Content
Hands On | 40 min

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

Playtime 2
Go Nuts | 40 min

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

Playtime 3
Go Nuts | 70 min

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

Share & Submit
Finishing Up | 70 min

  •  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.
  • 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, I will put your work in my account, and give you the link. 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:

  • Seeing as this address is a little cumbersome, we can use TinyURL or goo.gl to create a short link:
    • http://tinyurl.com/wd101
ScopeCategoryNameYear GroupsActions
Learning Area
ICT
ICT-ICTEnab
ICT Enabled
AllShow Comment

Students posses the ICT and media skills required for them to operate in and beyond school. They can use these skills to solve problems as they arise.

Learning Area
ICT
ICT-HackMake
Hacking & Making
AllShow Comment

Students use the skills of teardown and rebuild to learn how things work, before applying these skills to hack and make solutions.

Learning Area
ICT
ICT-ProbSolv
Problem Solving
AllShow Comment

Students can and will attempt to create solutions to the issues they are faced with.

School
Approach to Learning
ATL-RM
Resilience & Motivation
All
School
Approach to Learning
ATL-ATC
Attitude To Challenge
All
There are no records to display.