DTC 477: Fall 2020: Tiny Projects

At times, the instructor will assign small, focused projects to practice specific skills. Read them carefully, as they may have different types of submissions and relative due dates, depending on the project.

  1. Tiny Project #1: Codepen Recipe (from Unit 1, Lesson 7)
  2. Tiny Project #2: Responsive Recipe (from Unit 1, Lesson 10)

Tiny Project #1: Codepen Recipe

  1. Watch the recorded lecture “Unit 1, Lesson 7” on Blackboard.
  2. Go to Tor’s recipe example at bit.ly/477-recipe-example.
  3. Fork the codepen to your own account and save it to a new name.
  4. Find your own recipe (an actual recipe someone could cook) and replace the example’s ingredients, equipment, and directions with yours.  (Look on AllRecipes.com or other recipe sites if you need inspiration.)
  5. Watch your formatting: open and close the tags correctly!
  6. Using HTML classes and IDs, and CSS selectors, target and style the subtitles and the list items:
    • Change at least two visible aspects of the list items. For example: color, font-style, font-family, font-weight, etc. Feel free to explore the CSS references for things to try.
    • Add a Google Font and use it on at least one element. 
    • Add IDs and classes to the HTML as necessary to select specific items.
    • Determine 2 particularly important items in the lists and use CSS to highlight them. 
  7. To submit: Save your codepen and share the URL on the Tiny Project #1 discussion board on Blackboard.

Tiny Project #2: Responsive Recipe

In Codepen, fork your recipe from Tiny Project #1 to a new Codepen, then edit/add HTML and CSS as necessary to:

  1. Add a relevant image that appears above the 3 list sections. Use Unsplash or other free image resources.
  2. Make the 3 lists (ingredients, equipment, directions) appear in a row of 3 boxes when in landscape (desktop-style) mode.
  3. Make the 3 lists appear in a column of 3 boxes when in portrait (mobile-style) mode. 
  4. Make at least one aspect of the layout different at a very small width (575px or less).
  5. Add at least one more HTML block of content of your choice and use CSS to style it nicely for both landscape and portrait style.
  6. Use only primarily relative units in your CSS.
  7. To submit: Save your codepen and share the URL on the Tiny Project #2 discussion board on Blackboard.
  8. Due date: this is due by midnight on Wednesday, September 23, 2020.

If you’re not sure what the visual output should be, the illustration below may help.