To Do This Week:
FreeCodeCamp: Finish Applied Visual Design, CSS Flexbox & CSS Grid
Assignment: Find a recipe (your own or online)
- Understanding Visual Hierarchy in Web Design
- Mathematics and Web Design: A Close Relationship
- The Gestalt Principle: Design Theory for Web Designers
Pod Mini-Project #3
Copy all the source code of this Grid template.
Paste the source code into a new sublime text document and save as “index.html” in a folder called “miniproject-3“.
With your pod, you are to use CSS Grid to make a layout that looks like this:
Blackbird Projects Due: Friday FEB 26 (by midnight)
Mandatory Midterm Meeting (5%) – by March 26th
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 and to check your scores in FreeCodeCamp tutorials. Complete the tutorials before our meeting.
You may also be receiving an email to set up a meeting if I am your DTC mentor. If I am your mentor, we can set up one meeting and cover both the class requirement and discuss mentoring issues like registration and “superpowers”, etc..
Below are my times to meet. You can either set up a 30 minute slot or just 5 minutes if you are feeling comfortable with the material so far. Please schedule a meeting before March 26th.
MTWTH – 12:00pm- 4:00pm
and Tuesday 7-8pm after class – this would be a good time if you require a short meeting
display: block, inline, none, inline-block, flex, grid
Visual Hierarchy Primer:
Difference: where the eye is drawn
Repetition: where the eye sees pattern and context
color, typography, imagery, layout
- 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
Texture and Imagery:
Optional Reading of Visual Hierarchy:
The demos below are the ones used in the CSS Grid video talk. Copy the source code to play/learn.
CSS Grid Demo by Natalie Lusk
Project #2: Recipe Project 15%
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)
- Data (cook time, tools, nutrition, diet)
- Other info (country, notes etc.)
- Footer info