Thu, Oct 05

CSS Layout Concepts

Today's objectives

Today we'll be looking at more CSS.

  • Selectors: classes and IDs
  • Organizing HTML with the div tag
  • Chrome web inspector
  • 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 VSCode

File management in VSCode

CSS Box Model

CSS Box Model

User interface fundamentals

User interface fundamentals

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.
VS Code
Organizing your work with projects
Assignment 04
Wireframe from provided content

Create a low-fidelity wireframe of a website that displays the content in the zip file linked below. Your objective is to show how the content will appear on screen, and how users will navigate around it. For this assignment, assume you are designing for a desktop/laptop screen, so select an appropriate screen size in Figma.

Name your file YOURLASTNAME_Assignment-04 and share it via Figma with my NSCAD email address.

It is up to you to establish a visual hierarchy (title, headings, etc.) as well as navigation, how many web pages you will use, etc.

Make sure your wireframe communicates the site's visual hierarchy. This article is a good starting point: Visual hierarchy in web design. You do not have to represent final colours, fonts, etc., but use size, white space, order and other visual tools to convey the intended hierarchy.

Think about how scrolling will work. Scrolling in Figma is easy if you are organizing your frames and objects correctly. Any content within a frame should scroll automatically - elements in a frame will show up indented below the name of the frame. This article is helpful for more advanced scrolling: Scrolling in Figma.

Share Figma hints, help, tips and problems in the Slack "#tech" channel.

Download the assets for this assignment here.

Due Wed, Oct 11, 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 2023-12-12 12:46.