Resources

I will add to this as the course progresses, but for now, here's a few pages of resources to supplement the lessons and exercises. I've included some sample HTML & CSS pages you can use below, and the other pages include online tools (helpful for development and testing), supplementary texts (to give you more context and information) and video tutorials (so that you can extend your learning on your own).

I'll use the OWL site to post lecture notes, help sheets, and other resources I don't want available on the open web . We'll also use it for the coding test.

Sample HTML & CSS

Here are a few starter pages that we will use throughout the course to help us learn. You can also use them for developing your final projects!

How to download them:

Really easy way:

  1. Right-click or CTRL-click on the links
  2. Choose: "Save link as"
  3. Save as HTML or CSS in the correct folder

Slightly longer way:

  1. Open the sample you want and then right-click.
  2. Either "Save as" (chrome) or "Save Page As" (Firefox).
  3. In the pulldown underneath the file name, change to "Web page, html only" or "Page source."
  4. Save the file with a name that is going to be helpful to remember for your work (eg: exercise2.html or usingcss.html). And into the correct folder.
  5. Remember for the sample with an externalized (.css) file, you will need to save that as well. It's super-important to give it a new name too!

These all have the CSS embedded in the <head> of the document:

Boilerplate HTML Page

Semantic Outline Page

Simple 2-Column Layout

Simple 2-Column Layout with Horizontal Menu

These have externalized CSS files, so you will need to download both the HTML file and the CSS files:

Two columns: HTML | CSS

Three columns: HTML | CSS

Boilerplate CSS file

Responsive Design Template

Dropdown Menu Template

Frameworks

We won't be using these in class, but if you want to experiment with a framework -- which is a set of HTML, CSS and JS files to speed up the development process -- feel free to play with them, but keep in mind I will be measuring download speeds on your final projects!

This one from the W3schools is the lightest in terms of download times, and relatively easy to work with:

These are heavier in terms of download, and not as easy to work with, but still with many merits:

You may also want to check out this A List Apart article about using frameworks: Responsive Design Frameworks: Just Because You Can, Should You?