Week 5: 2/23

This week we will be doing more work on the Portfolios, writing the HTML and CSS to turn your wireframes into actual web pages. We will also talk about design and look at on color, typography and layout for the sites.

BEFORE CLASS

View my comments on your Portfolio Brief. If you have not submitted the Portfolio Brief yet, please do so as soon as possible.

Thursday 2/23

Be prepared to work on your portfolio. You should have the repository created by using the Responsive Personal Site assignment in GitHub Classroom. Read this Discussion board post if you have not yet done this (must be logged in to the OpenLab to view that link).

That GitHub classroom-based repository has a bunch of starter files for you and is what you MUST use to complete the first project.

Related Resources

1. Responsive Personal Site Requirements
2. Starting to convert wireframes to HTML and CSS [11m 49s]
   1. This is optional. We’ll be working on this on Monday, but you can get started ahead of time.
3. Media Queries
   • Class Post on Media Queries
   • Media Queries Examples (Prof Stein)
   • CSS Tricks: Media Queries for Standard Devices
4. Typography
   • Typography Basics (class post)
   • Typographic Hierarchy (class post)
   • Gestalt Principle of Proximity applied to Typography (codepen)
5. Design Cards Example (in Codepen)
   • Start (not styled well)
   • Example of finished cards (post style update)
6. Navigation
   • Super Simple Navigation
   • Smart Navbar with Hamburger Menu (codepen example)
   • Re-engineered W3 School Responsive Navigation