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

CSS Box Model

Styling links

Styling links

More CSS layout

More CSS Layout

Agenda

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.


Robert Currie
This page was last updated at 2021-12-16 08:06.