Thu, Oct 14
CSS Layout Concepts
Today's objectives
More layout: box model, positioning, display, float and sizing
- Display property
- Positioning
- Float
- Sizing
- CSS Breakpoints
- Box model
- Sizing
- Padding
- Border
- Padding
- Testing for mobile
Tasks
[in-class tasks]
Presentations
CSS Box Model
Styling links
More CSS layout
Agenda
Preparation
Have any questions about your assignment ready.
Samples
Here you will find any sample files you need for class.
Box model
See the Pen Box model test by Robert Currie (@rcurrie) on CodePen.
Styling links
See the Pen Simple link styling by Robert Currie (@rcurrie) on CodePen.
Centering
See the Pen Untitled by Robert Currie (@rcurrie) on CodePen.
Simple menus with display property
See the Pen Simple nav menu by Robert Currie (@rcurrie) on CodePen.
CSS IS AWESOME
See the Pen CSS IS AWESOME by Robert Currie (@rcurrie) on CodePen.
Articles
A old (but clear) explanation on whya pixel is not a pixel is not a pixel.
Resources
CSS Selectors
| selector | selector name | matches |
|---|---|---|
| h1 | type | all h1 tags |
| .warning | class | every element with class="warning" |
| #temporary | id | every element with id="warning" |
| li a | descendant | every "a" tag within an "li" element |
| * | universal | everything | div.warning | class | every div with class="warning" |
| div#temporary | id | every div with id="warning" |
| a#active | pseudo-class | every a tag in the "active" state - that is, the mouse is hovering over it. |
CSS concepts
- Box model
- https://www.w3schools.com/css/css_boxmodel.asp
- Display
- https://www.w3schools.com/css/css_display_visibility.asp
- Positioning
- https://www.w3schools.com/css/css_positioning.asp
- Max-width
- https://www.w3schools.com/css/css_max-width.asp
- Float
- https://www.w3schools.com/css/css_float.asp
Tools
Here are some quick resources to expand on topics covered today.
- CSS layouts
- https://csslayout.io
- CSS Gradients
- https://cssgradient.io
Assignment 04
Improvements
Using your Assignment 3 as a starting point, make improvements to it based on class feedback, any notes from me, and any additional techniques. Focus on clarity, legibility and clear navigation. You can change any structure or presentations but must keep all the images and text
Note major changes with <!-- comments --> in your code.
Name the assignment folder "assignment-04" and add a link to it from your main index page.
Due Wed, Oct 20, 6:00 PM.