ECUAD Outlines

ECUAD Intro To Web Design (4-Day)

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

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.

  1. GuitarMania Revised Layout
  2. 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.
  3. Fender Vs Gibson Layout Exercise Revised Layout: duplicate your Fender Vs Gibson exercise folder and restyle the page to look like this.
  4. 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.

 

Standard