WEEK 14: Build Portfolios
(November 27 – December 1)

To Do This Week:

Work on Portfolios

  • Build HTML/CSS for Portfolio Projects (this project must be responsive)
  • Work at Responsive Design (apply media queries)
  • Work at Typography and Color for good visual hierarchy
  • Validate often!


Sites Completed for Peer Critique 
DUE  Dec 6/7 (Wed/Thurs in the last week of classes)

Sites Due for Grading  –
DUE Dec 12th

The Portfolio Projects should be in a folder called “portfolio”

Back to basics – flow, positioning, grid, media queries

Common issues:

  • too many nested borders!
  • enough padding around text
  • center aligned paragraphs for more than 3 lines
  • word count per line: 10-15
  • alignment of boxes 
  • positioning elements
  • h1 heading with your name (or title) on each page
  • short menu items  or expanded tabs- avoid breaking lines
  • <br> – use margin or padding instead
  • screen real estate – reduce header and spacings
  • wrapper and/or menu changes from page to page
  • visual hierarchy – create difference with style changes (typography details), repeat styles for similar items (headings, menu, content sections)
  • use 5+ different colors from a color scheme
  • format HTML and CSS

Random Design Challenge

Designer/Coder pairings -sec1
Designer/Coder pairings -sec2

This week you will form into pod teams to build and design a random website with AI assistance. Each team of 3-4 will have an assigned topic from a random wikipedia page. You can take the topics in any direction – fictional, promotional, historical, essay. 

  1. Teams get assigned a topic: Wikiroulette.co
  2. Strategize the design/content/style: 15min
  3. Build HTML and responsive structure 
  4. Create CSS stylesheet: layout, color scheme and fonts
  5. Find/create graphic elements and images 
  6. Write content.
  7. Validate and upload.