Week 05 – Web-Dev. Lifecycle, CSS Selectors

Learning Outcomes

After this week you should be able to

• Describe different phases in a website development cycle
• Implement webpage layouts from wireframes using CSS & HTML

05.01 Web-Dev. Lifecycle

Pre-Class Reading

• Web Development Life Cycle

Class Slides

• Week 5.1 Slides

Group Activty / Lab

• No lab this class

Post-Class Reading

• Good Website Design Principles
• awwwards.com
• dribbble.com

05.02 CSS Selectors

Class Slides

• Week 5.2 Slides

Group Activty / Lab

• Look for the file week-05/02/labs/resume.html in the copy of the class repo you cloned to your PC.
• Create a style.css file in the same labs folder and add a <link> element to resume.html to reference your CSS file.
• Follow guidance in comments within resume.html to style the CSS so the page matches the file resume-template.png in the same folder.

The goal here is to create CSS that matches a design given to you by another source rather than choosing your own styling.

Post-Class Reading

• CSS Reference
• Box Model. Look through the sample files and experiment with CSS short-hand

Homework due this week

Look for reference files in the class folder under week-05/02/ — instructions here.