WEEK 12: Portfolio Projects (April 1)

To Do This Week:

  • Multimodal Narrative Project – DUE Tuesday April 8th

Notes:

Narrative project discussions…

Narrative Project Reminders:

  • Ensure a clear navigation system (buttons or menu).
  • Include a project statement on an about page.
  • The <h1> tag on each page must be the title of the work (NOT the page title).
  • Include your name with the title.
  • Resize all images to under 1000px wide.
  • Do not use <br> for spacing; use margin-bottom or padding-bottom instead.
  • Add sufficient padding to text boxes for readability.
  • Keep line lengths to 10-15 words per paragraph.
  • Use only <li> elements inside <ul> and <ol> tags.
  • Follow proper heading hierarchy using <h1>-<h6>.
  • Include alt attributes for all images.
  • Apply visual hierarchy principles (difference, repetition, closure).
  • Do not “position” elements to fix layout problems!
  • Validate HTML and CSS for accuracy

web development & Design Process (with AI:

“It is our job to create computing technology such that nobody has to program. And that the programming language is human.” – Jensen Huang (Nvidia CEO)

FAST TOOLS + SLOW DESIGN

  1. HUMAN: Research content and explore design ideas (mockups, sketches, mood boards). Look at other websites (make screen grabs) for ideas.
  2. HUMAN + AI: Information architecture: how best to organize your site content? What kind of navigation? What are some user “narratives”?
  3. HUMAN: Storyboard and/or sketch pages, with navigation plan
  4. HUMAN + AI: Build HTML5 structure(s) – AI can help speed things up here!
  5. HUMAN + AI: Apply responsive CSS design with media queries. Mobile first! Add border to all elements to make them visible: * { border: 1px solid red;}
  6. HUMAN + AI: Collect media and copy (text, images, media).
  7. HUMAN: Add content – make sure images are sized and displayed properly.
  8. HUMAN: Work on CSS for visual hierarchy and polish.
  9. HUMAN + AI: Add effects or javascript elements last.
  10. HUMAN + AI: Validate HTML and CSS site!
  11. HUMAN: Get feedback, test usability. 
  12. HUMAN: Finish design based on feedback.

Portfolio – 15% Total

DUE April 22nd (last day of class)

Portfolio Project Overview:

Using HTML5 and CSS, hand-code a responsive, multi-page portfolio site* to present and promote yourself and your work. This can also be a business or portfolio site for a friend or family member, but the same guidelines apply.

*Single-page scroll sites must include at least three sections (e.g., About, Gallery, Contact). Please consult with me if considering this option.

Project Statements for Gallery Projects:

Include a short, single-paragraph statement for each project featured (Info-card, Blackbird, Recipe, and Narrative). Describe the assignment, tools used, design ideas, and processes to document your work for the portfolio. 

Peer Critique:

Complete design and content for peer critique sessions on the last day of class. On critique day, if your site is not ready (85% complete with applied design and content), then you will lose 10 points from the final grade.

generative ai:

  • AI tools may be used for coding HTML pages, and some of the responsive design layouts in CSS.
  • In your prompts be specific about what you want -use HTML and CSS terms.
  • You do not have to use AI. However, if you do, you must add comments in the HTML and/or CSS for what the generated code does. 
  • The design should be your own.

Grading Criteria:

Design – 40%
  • Color scheme (3-5 colors) must be harmonious (use Adobe Kuler). Monochromatic design should have 3-5 shades or tints.
  • Typography must be legible and properly aligned.
  • Navigation should be clear and accessible.
  • Consistency and unity in design across pages.
  • Effective use of visual hierarchy in layout, color, and imagery.
HTML5 and CSS Markup – 30%
  • Home page should be index.html.
  • Minimum three pages (or sections for single-page scroll sites).
  • <h1> for the main heading (Your Name), with logical subheadings (e.g., <h2> for “About” or “Gallery” pages).
  • Validated HTML5 and CSS.
  • Properly nested semantic elements and divs.
  • Single external stylesheet; minimal inline or internal styles.
  • Responsive design with percentages and media queries.
  • Hand-coded HTML and CSS (plugins OK for galleries).
  • Indented and well-formatted code.
  • CSS-styled navigation list (<ul>) within a <nav> tag.
Content – 30%
  • All content must be complete and original. Non-original images must be credited appropriately.
  • Text must be grammatically correct and spell-checked.
  • Images must be web-optimized (compressed and properly proportioned).
  • Include brief project statements describing assignment goals and skills used.
  • Portfolio must have at least three pages or sections (e.g., About, Gallery, Contact).

Resources:

Navbars:

Portfolio Examples:

DTC Senior Portfolios

WORKSHOP

  1. Research portfolio sites for design ideas (screen grabs, inspect element to find out fonts and colors, sketches, adobe design mock-ups, figma), mood boards.
  2. Storyboard/Sketch a multipage website (minimum 4 pages or sections for the portfolio project: about, gallery, contact, etc
  3. Build out HTML pages with nav bar, etc.