Week 3: HTML Semantics, CSS and Design
HTML Layout Tags
- Semantic tags - h1, h2, p, a, img
- Layout elements - header, nav, main, aside, section, footer, div
- div vs span
This video shows the basics of layout with HTML
Next, to give you an idea of the control and power you have over your layout using CSS, this video shows how you can create two different layouts with the same HTML by making small changes to the CSS.
HTML In-Class Exercise (Moon)
- Complete Exercise 2 and submit both URLs on to garrarj@algonquincollege.com.
- link to exercise 2 description
CSS Fundamentals
Fonts
- There are quite a few Font-related properties in CSS that give you a lot of control over the appearance of all the text on a page.
- Learn more
Display Property
- The CSS display property is a very powerful property that controls how elements interact with each other, how they behave when they are beside each other in the HTML and even their visibility.
- Learn more
CSS Box Model
- The Box model is how CSS controls the size and spacing of all elements on a page.
- Learn more
Showing Hidden Files in Mac Finder
- Open Terminal
defaults write com.apple.finder AppleShowAllFiles YES- Press Option + Right-Click on the Finder App in the Dock and choose
Relaunch
Colour Schemes
Design vs Style
Typography
Validation Exercise
Paths and Links Exercise
What to do Before Week 4
TODO
- Watch the videos from all the week 3 pages on these CSS topics: font-family, font stacks, display, CSS backgrounds, box model, padding, margin, and border shorthand