WEEK 12: Portfolio Projects (April 1)

To Do This Week:

  • DUE This Week:
  • SEC 01 Multimodal Narrative Project – DUE Wednesday, Nov 13
  • SEC 02 Multimodal Narrative Project – DUE Friday, Nov 15

Notes:

Multimodal Narrative Projects

Folder name: “narrative”

Project Reminders:

  • Ensure a clear navigation system (buttons or menu).
  • The <h1> tag on each page must be the title of the work (NOT the page 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).
  • Validate HTML and CSS for accuracy!

Portfolio – 15% Total

Due Dates:

  • Peer Critique:
    • SEC 01: DUE Wednesday, Dec 4
    • SEC 02: DUE Friday, Dec 6
  • Final Grading:
    DUE Tuesday, Dec 10 (6pm)

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 Requirements:

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 (20%):

Complete design and content for peer critique sessions during the last week of class. On critique day, your portfolio will account for 20% of the final grade.

Grading Criteria:

Design – 40%
  • Color scheme must be harmonious (use Adobe Kuler).
  • 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, 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:

Portfolio Examples:

Portfolio Design Process:

  1. Research and gather design ideas (mockups, sketches, mood boards).
  2. Storyboard and sketch a multi-page site (minimum four pages).
  3. Collect media and copy (text, images, project screenshots).
  4. Build HTML structure.
  5. Apply responsive CSS design and navigation.
  6. Add content.
  7. Finalize CSS for visual hierarchy and polish.

 

 

 

 

 

To Do This Week:

DUE This week:

SEC 01 Multimodal Narrative Project is DUE  NEXT WEEK: Wednesday NOV 13 

SEC 02 Multimodal Narrative Project is DUE  NEXT WEEK: Friday NOV 15 

Notes:

Multimodal Narrative Projects
folder name: “narrative”
Multimodal Narrative List 01
Multimodal Narrative List 02

Multimodal Narrative Project reminders:

  • have a clear navigation system – buttons or menu
  • make sure the <h1> on each page is the title of the work (NOT the page title)
  • resize images under 1000px wide
  • <br> – this tag is for line breaks. do not use to add space to the bottom of a div. use margin-bottom or padding-bottom instead
  • add more padding to boxes of text!
  • make sure the word count per paragraph line is 10-15 words
  • ul and ol rules – no other elements except li. 
  • h1-6 – use correctly, follow hierarchy. 
  • add alt attribute for images!
  • visual hierarchy – difference and repetition, closure
  • validate HTML and CSS!

Portfolio  – 15% total 

Sites Completed for Peer Critique  – 20%
Sec 01  DUE: Dec 4 (Wed in the last week of classes) 
Sec 02  DUE: Dec 6 (Friday in the last week of classes) 

Sites Due for Grading  – 80%
DUE  Tuesday Dec 10 (6pm)

Using HTML5 and CSS, hand-code a multiple-page* responsive portfolio website that allows you to present and promote yourself and your work to potential employers and friends. Instead of a personal portfolio site, you may make a portfolio or business site for a friend or family member. But following the same guidelines.

*If you would like to design a single-page scroll website with anchor links, please see/message me.  You must have a minimum 3 pages or sections for the portfolio project: about, gallery, contact, etc.

Project Statements for Gallery Projects:
Include a short statement about works featured on your portfolio site: the Info-card, Blackbird, Recipe and Narrative projects. Always include a short single-paragraph statement on projects in your portfolio. What was the nature of the assignment? Describe the tools, design ideas, code and/or specific processes. This is for you to properly document your work for your portfolio.

Project Critique:
You must finish your site’s design and content for the scheduled critique/usability testing on the last day of class. On this day, I will grade your portfolio as 20% of final grade.

Portfolio Grading Criteria:

Design 40%

  • Website must have a color scheme that is in harmony (use Abobe Kuler!).
  • Typography is legible and text boxes are aligned properly,
  • Navigation is functioning, clear and accessible. 
  • Pages are consistent throughout the site; there is unity in the design.
  • Clear visual hierarchy is used in overall design. Layout, color and imagery evoke information (difference) and context (repetition) effectively.

HTML5 and CSS mark-up  30%

  • The start home/page is index.html
  • Minimum 3 pages (or sections for one-page scroll sites): about, gallery, contact, etc.
  • Your name is the main heading or  <h1>  for each page of the site. The subheading for “about’ or “gallery” pages would be the <h2>.
  • HTML5 and CSS mark-up is “validated”.  Semantic elements and divs are properly nested with good hierarchical page structure.
  • A single external stylesheet (inline styles and internal stylesheets can be occasionally used to override external css).
  • The site is responsive to device widths, using percentages and media queries
  • HTML and CSS are hand-coded; no WYSIWYG editors or templates. Plugins for galleries are OK. Please see me if you have questions about this.
  • HTML and CSS are well formatted – indentation is used  to indicate nested elements.
  • Navigation must be in the form of a CSS-styled unordered list <ul> and enclosed in <nav>.

Content 30%

  • Content is your own and complete. Images that are not created by you and/or in the Public Domain must be clearly labeled with ownership and copyright information. Text is  grammatically correct, spell-checked and images are compressed for web with proper aspect ratio.
  • You have brief statements for each of the works in this class that is in your Portfolio. Describe the assignment and what HTML/CSS skills you used.
  • The website must have at least 3 pages all together. Suggestions include: About or bio, Resume or discussion of your skills and abilities, Samples or Galleries of your writing, photography, or artwork, Contact information, Information about your favorite causes, Links to resources or other things you think are worthwhile, etc.

Portfolio website – who, what, why?

Other Examples:

DTC Senior/Graduates Portfolios:

Portfolio Project Notes:

Process for Designing Portfolio:

  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. Gather media and copy (images, screen grabs of projects, text)
  4. Build HTML
  5. Add CSS for responsive design and navigation (colored borders on elements)
  6. Add Content
  7. Final CSS design for visual hierarchy

RESPONSIVE DESIGN PRINCIPLES:

  • mobile first! – default css is for mobile
  • flexible design (using % instead of px)
  • width: auto; is default and adjusts padding and margins
  • cascade principle -location and inheritance
     (only change styles that need to change)
  • max-width and min-width (set limit with max or min width)
  • height values are tricky! use by pixels or set height on parent
  • responsive images (100% of container parent or img {width: 100%;})
  • breakpoints based on design not device
  • turning off iOS resize:

Navbars:

Business Sites:

Effects Demos:

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.