A Good Online Guide To HMTL & CSS
- 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
- 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
- HTML 5 Sectioning Flowchart
- HTML5 Pocketbook
- Ultimate CSS3 Reference: Codrops
- CSS Properties Index
- CSS3 Click Chart
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.