WEEK 14: Build Portfolios (April 15)

To Do This Week:

Portfolio: Responsive Structure + Visual Hierarchy

————————————————

Notes:

Narrative class list

Portfolio Project

Portfolio class list

Common Issues:

Too many nested borders
Not enough padding around text
Center-aligned paragraphs longer than three lines
Word count per line: 10-15
Improper alignment of boxes
Positioning elements inaccurately
Include an <h1> heading with your name (or title) on each page
Keep menu items short or use expanded tabs—avoid breaking lines
Avoid <br>; use margin or padding instead
Efficiently use screen real estate—reduce headers and spacing
Consistent wrapper and/or menu styles across pages
Ensure visual hierarchy by varying styles (e.g., typography details) and repeating them for similar elements (e.g., headings, menus, sections)
Use 5+ colors from a cohesive color scheme
Properly format HTML and CSS

Portfolio – 15%

DUE April 22nd (last day of class)

Project Overview:

Using HTML5 and CSS, hand-code a responsive portfolio website with at least three pages (e.g., About, Portfolio, Contact) to showcase your work. This may also be a portfolio or business site for a friend or family member but must adhere to the same guidelines.

*If you wish to create a single-page scroll site with anchor links, please consult with me.

Statements for Web Projects

Include short statements for projects (e.g., Info-card, Blackbird, Recipe, and Narrative) on your portfolio site. Describe the assignment, tools, design ideas, and specific processes. These statements are essential for documenting your portfolio work.

Grading Criteria:

Design – 30%

Website must have a cohesive color scheme (use Adobe Kuler).
Typography should be legible, and text boxes properly aligned.
Navigation must be clear, functional, and accessible.
Design should be consistent across pages for unity.
Apply clear visual hierarchy through layout, color, and imagery.

HTML5 and CSS Markup – 30%

Home page must be index.html.
Include an <h1> heading with your name on each page; subheadings (e.g., <h2>) for “About” or “Gallery”.
HTML5 and CSS must be validated.
Use semantic elements and proper nesting.
One external stylesheet (internal stylesheets only for overrides).
Site must be responsive with percentages and media queries.
Hand-coded HTML/CSS; plugins for galleries are acceptable.
Code should be well-formatted with proper indentation.
Navigation bar should use a CSS-styled <ul> within a <nav>.

Content – 30%

All content must be original and complete. Attribute non-original media appropriately.
Text must be grammatically correct and spell-checked. Images should be optimized for the web.
Include brief statements summarizing assignments and tools/skills used.
Portfolio must contain at least four pages (e.g., About, Statement, Resume, Gallery, Contact).