WEEK 6: Recipe Project/Visual Hierarchy
(February 22-26)

To Do This Week:

FreeCodeCamp: Finish Applied Visual Design, CSS Flexbox & CSS Grid

Assignment: Find a recipe (your own or online) 

Reading (optional): 


Video Lecture:

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:

DTC 355 01 Mini-Projects

Zoom Class

DTC Superpower Survey
display” property: inline, block, inline-block, grid, flex, none
Recipe Project
Blackbird Project – styles, color, layout, images
Mini-project-3 – CSS Grid/Layout


Blackbird Projects Due: Friday FEB 26 (by midnight)

Blackbird Projects List – Spring 2021

Validate the html and css of your Blackbird site:
Validator.w3.org  / or use Web Developer extension for Chrome


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

CSS Review:

w3 schools: css_positioning tutorial


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


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


Rule of Thirds


Layout examples:


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.

Grid-demo 1
Grid-demo 2

CSS Grid Demo by Natalie Lusk

Responsive Grid template

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

  1. Header/”Hero-unit” (title, image, description)
  2. Ingredients
  3. Data (cook time, tools, nutrition, diet)
  4. Steps/Instructions
  5. Other info (country, notes etc.)
  6. 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