Author: Will Luers

Portfolio  – 20%

Using HTML5 and CSS, handcode a multiple-page* responsive portfolio website that allows you to present and promote yourself and your work to potential employers and friends.

Portfolio websites grading will be based on the following criteria:

Sites Completed for Usability Testing/ Peer Critique  10%

It is important that you finish a majority of  your site’s design and content for the scheduled critique/usability testing. On this day, I will grade this portion of your project.

Design 30%

• Website must have a color scheme that is in harmony (use 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
• 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 handcoded; 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>.

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.
• The website must have at least 4 pages all together. Suggestions include: Homepage, Biography, Artist’s Statement, 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 worthwhile, etc.

*If you would like to design a single page website with anchor links, please talk to me.

Portfolio website – who, what, why?

• jessicahische
  
• jessewillmon.com/
  
• vanityclaire.com
• fakepaper-shop
  
• whoisamy.com

Other Examples:

• the-35-best-personal-websites-weve-ever-seen
• best-minimal-portfolio-websites
• creative-portfolios-of-50-designers

DTC Portfolio Project:

• Holly Stassens
• Chris Pacanins
• Betsy Hanrahan
• CMDC Gallery

Other student

Portfolio Projects

Include short project statements
Include a short  statement about the blackbird, recipe and sequential project on your portfolio site. Always include a short 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.

1. CSS syntax – selector {property: value;}
2. CSS commenting-  /* comment  */
3. links to external stylesheet –
   <link rel=”stylesheet” href=”styles.css”>
4. internal stylesheet – <style> h1 { font-size: 22px; } </style>
5. inline css – <p style=”color: red;”>some text</p>
6. CSS selectors, specifying selectors –
   h1 { color: red; },
   #bio { color: black; },
   .stanza { color: silver; },
   .stanza h1 { font-size: 20px; }
7. identify when and why a rule is applied to an element –
   inheritance
   specificity
   location
8. Be able to identify correct unit measurements in CSS style rules- 10px, 2.5em, 50%
9. display property –
   display: block
   display:  inline
   display:  inline-block
   display: none
10. float property –
    float: left
    float: right
    float: none
    and for clearing floats:
    clear: left, right or both
11. positioning – relative, absolute, fixed, z-index
12. color schemes- monochromatic, complimentary, split-complimentary, triadic
13. serif/sans-serif fonts
14. fixed vs. flexible web design
15. color codes –
    hexadecimals (#f0f0f0)
    rgb(0,0,0)
    rgba(0,0,0,1)
16. font properties –
    font-family
    font-size
    font-weight
    font-style
    font-variant
17. text properties –
    text-align
    text-decoration
    color
18. border property – border: 1px solid #000000
19. background image – #wrapper {background: url(background.png);}
20. center a div –  #wrapper {margin: 0 auto;}
21. link styles –
    a:link, a:visited { color: red; text-decoration: none; }
    a:hover, a:focus {  color: orange; } 

The quiz will be multiple choice. You should be able to identify the following:

1. HTML: Hypertext Markup Language
2. HTTP: Hypertext Transfer Protocol
3. FTP: File Transfer Protocol
4. absolute vs. relative urls
5. index.html
6. Basic HTML structure for a page: <html><head></head><body></body></html>
7. <title></title>
8. HTML syntax: <element attribute=”value”></element>
9. HTML5 semantic elements: p, img, header, nav, article, section, aside, footer
10. parents and children (nested elements)
11. block vs. inline
12. headings: h1-6
13. <div> and <span>
14. <p>, <em>, <small>, <br>, <img>
15. attributes: id and class, style
16. <a>: anchor (internal) and external links
17. doctype declaration: <!DOCTYPE html>
18. HTML commenting: <!-- comment -->