Thu, Oct 07

CSS Layout Concepts

[Video?]

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

Tasks

Review of work to date

Presentations

File management in Atom

File management in Atom

CSS Box Model

CSS Box Model

web-technologies

web technologies intro

Agenda

Agenda

Preparation

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

Samples

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.



Handouts

Please download the basic HTML handout and basic CSS handout

Tutorials

Resources

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

Tools

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

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 2021-12-16 08:06.