To Do This Week:
Notes
CMDC Superpower Survey: https://dtc-wsuv.org/supersurvey/
Blackbird Project Due
- one external link
- one internal or anchor link
- one image insert
- one background image
- an external stylesheet
- formatted CSS and HTML (identing)
- applied visual hierarchy in CSS – layout, color and typography
Validate the html and css of your Blackbird site:
Validator.w3.org
Visual Hierarchy Primer:
Difference: where the eye is drawn
Repetition: where the eye sees pattern and context
Grid System:
- proportion, alignment, balance
- to grid or not to grid?
- use grid paper for your sketches!
Golden Ratio Calculator (width is 1.62%) : total length a + b is to the length of the longer segment a as the length of a is to the length of the shorter segment b
Layout examples:
Texture and Imagery:
Applied Web Color
web color values: RGB, 0- 255
rgba. “opacity” vs rgba
ImageColorPicker – get color scheme from an image
Info-Card: Visual Hierarchy
Read about this weeks Info-card assignment
info-card-hierarchy-example.zip
Mandatory Midterm Meeting (5%) – by Wednesday, October 11
Please set up a mid-term meeting with me by messaging me on Slack. This meeting is to check in about how you are doing so far with HTML and CSS.
Below are my times to meet. You can either set up a 30 minute slot or just 5-10 minutes if you are feeling comfortable with the material so far. For longer sessions, we can meet on Zoom. For shorter, we can meet after class.
My Availability:
MW – 10:00pm-12:00pm, 1:30pm-3:00pm
TTH – 12:00pm-3:00pm
Typography
Rules of Thumb:
- chunk text (analyze the text)
- organize text for visual hierarchy, create difference and repetition
- organize for rhythm and tension (explore what baseline rhythm is)
- choose 1-2 fonts (make differences with weight, size, style, color)
- create difference in text areas (contrast, proportion, space)
- keep line length to 45-90 characters per line or 10-15 words
- use padding on text boxes with borders
- for text body, use CSS rules: “line-height: 1.5;” and “text-align: left”
- create strong lines of continuance (verticals, rule lines, borders, gutters and alignment)
- avoid underline and bold for emphasis ( italic is best)
- repeat styles for similar semantic elements to create repetition
Typography Basics:
- use “em” values for font-sizes
- CSS properties: color, font-size, text-align, letter-spacing, line-height, font-weight, text-shadow, text-transform : typography css reference
- add padding to text boxes – move away from borders
- Lorem ipsum
- Entity Code – A Clear and Quick Reference to HTML Entities Codes
Working with Fonts
Typography assignment, by former student Natalie Hendren
Blackbird: Visual Hierarchy
blackbird-fall23
blackbird-fall23.zip
Workshop: address layout, color and typography
CSS GRID
Recipe Project
Visual Hierarchy – breakdown sections
Build HTML – basic start page
Project #2: Recipe Project 10%
Build a one-page, responsive site for a recipe of your choice. In class, we will discuss visual hierarchy, responsive design, typography and layout of different semantic areas. Your grade in this assignment will be based on your careful handling of design, code and content.
Chunk Recipe into Visual Hierarchy
- Header/”Hero-unit” (title, image, description)
- Ingredients
- Data (cook time, tools, nutrition, diet)
- Steps/Instructions
- Other info (country, notes etc.)
- Footer info
Student Work:
Previous Recipes projects -Spring 18
Previous Recipes projects -Fall 18
Previous Recipes projects -Spring 19
Previous Recipes projects -Fall 19
Previous Recipes projects -Spring 20