ECUAD Intro To Web Design (4-Day) – WRMF.ca (Transferred)

A Good Online Guide To HMTL & CSS

Shay Howe: Learn to Code HTML & CSS
Shaw Howe: Learn to Code Advanced HTML & CSS

Content Blocks

HTML Text Elements: h1 – h6, p, ul, li
HTML Images: img
HTML Links: a [relative & absolute]
Shared Content: YouTube & Google Maps
HTML Sectioning Elements: header, footer, article, aside, nav
Tags vs Classes vs IDs
Floats, Clears, Clearfix
Responsive Web Design
CSS Grids
Mobile First
Getting a Domain & Hosting
FTP

Exercises

Fela Kuti Raw Text Exercise [download link ]
Fela Kuti Images [ download link ]
World HQ
HTML Paths Exercise ( GuitarMania )
CSS Floats Basics Exercise
TubeWorld Layout Exercise
Gibson Gallery Layout Exercise [ optional Clearfix exercise ]
Fluid Grids Basics Exercise
Fluid Grid Exercise: Guitar Mania
Test: GuitarMania Revisions

Resources

POST CLASS Challenge Exercises

If you want to try some layouts that will reinforce what we did in class (and even go a bit beyond), try these. They are listed here in order of difficulty.

GuitarMania Revised Layout
Fender Vs Gibson Layout Exercise: download these files, consult the included screenshots, and build the page. A fluid grid and normalize.css are included in the download. As well, the index page is more or less already marked up for you.
Fender Vs Gibson Layout Exercise Revised Layout: duplicate your Fender Vs Gibson exercise folder and restyle the page to look like this.
PedalMania Exercise: Download these files. Again, consult the included screenshots, read the Instructions file, and build the page. A fluid grid and reset stylesheet (normalize) are included. The HTML file (index.html) has all the text, and links to the image, but you will also need to add HTML (be guided in this by the HTML comments included in the file).Note: if we haven’t covered everything in the screenshot or the HTML comments, either omit that section or google how to do the technique.