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!
Notes:
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”
portfolioprojects-355-01-fall2023
portfolioprojects-355-02-fall2023
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.
- Teams get assigned a topic: Wikiroulette.co
- Strategize the design/content/style: 15min
- Build HTML and responsive structure
- Create CSS stylesheet: layout, color scheme and fonts
- Find/create graphic elements and images
- Write content.
- Validate and upload.