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
CSS Box Model
User interface fundamentals
web-technologies
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.
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.