Thu, Oct 07

CSS Layout Concepts


Today's objectives

Today we'll be looking at more CSS.

  • Selectors: classes and IDs
  • Organizing HTML with the div tag
  • CSS Positioning
  • Testing on multiple screen sizes
  • Backgrounds
  • CSS Box model
    • Sizing
    • Borders
    • Padding
    • Margin
  • Next steps


Review of work to date


File management in Atom

File management in Atom

CSS Box Model

CSS Box Model


web technologies intro




After today, aways check the "preparation" section to make sure you've done everything you need to prepare for class.


Here you will find any sample files you need for class.

Basic CSS positioning

Click "Edit on CodePen" for a larger version

Classes and IDs

See the Pen Class selector example by Robert Currie (@rcurrie) on CodePen.

Click "Edit on CodePen" for a larger version

See the Pen by Robert Currie (@rcurrie) on CodePen.


Please download the basic HTML handout and basic CSS handout



Semantic skeleton

See the Pen Sematic skeleton by Robert Currie (@rcurrie) on CodePen.

Independent work
Topics to review/prepare

  • Lists (from HTML handout)
  • Classes, IDs and more advanced selectors
  • Positioning
  • Layout


Chrome inspector
Powerful tools for testing and debugging HTML, CSS and JavaScript. Most other browsers have similar abilities.
Organizing your work with projects
Assignment 03

Using the text and images provided, make a readable and attractive series of web pages. You need to have at least two pages, and you can have as many as you want. Use CSS for type, size and color. You will need to resize the images (they are all big) and use the text (provided in a Word file). Name the assignment folder "assignment-03" and add a link to it from your main index page (where you already gave links to assignments 1 and 2). You may also use CSS positioning, or other HTML or CSS techniques as long as you understand them.

Download the assets for this assignment here.

Due Wed, Oct 13, 6:00 PM.

Professional practice

Here you'll find content about the business and profession of interactive design. Look for topics here in future classes.

Need help?

Contact me - Slack is best.

Robert Currie
This page was last updated at 2022-05-17 12:45.