WEEK 7: Recipe Project/Responsive Design
(March 1-5)

To Do This Week:

FreeCodeCamp: Applied Accessibility & Responsive Design Principles


Video Lecture:


Pod Mini-Project #4

Using your miniproject-3 with CSS grid, create a new project in a folder called miniproject-4.

With your pod, you are to use media queries that changes the CSS Grid so that you have three layouts for:

mobile (under 750px)
tablet (between 751 and 1000px)
desktop (above 1001px)

REMEMBER: 

  • Mobile first – the CSS for the mobile should be outside any media queries. It should be the regular CSS applying the styles for the mobile look and all other styles – colors of the sections etc.
  • In the media queries for desktop and tablet, use the media queries for the widths above. Only use the CSS properties that you need to change. No need to copy all css and paste.

DTC 355 01 Mini-Projects


Zoom Class

Midterm Meetings – tutorial scores
CSS Quiz – study guide  |  CSS QUIZ complete by next Tuesday  | overview of HTML Quiz
Blackbird Project Overview | Blackbird Project List – Section 01
Recipe Projects | Recipe Starter PageBrowser Width
Responsive Design | Responsive Example  | Download Zip
Responsive CSS Grid | CSS Grid Demo


Notes:

Recipe – 15%
Design and build a single, responsive recipe page with images, a layout with distinct areas for content, a color scheme (from a color tool), and typography that considers the visual hierarchy of a recipe’s content blocks.

Your grade in this assignment will be based on your understanding of visual hierarchy (layout, color, typography) and the fundamentals of responsive design (html/css code, media queries).

————–

Recipe Hierarchy
header/ingredients/steps…

————–

Build Responsive Recipe HTML/CSS

RESPONSIVE DESIGN PRINCIPLES:

mobile first!
flexible design (using % instead of px)
percentages! (do the math)
html flow
cascade principle
inheritance (only change styles that need to change)
max-width and min-width (set limit with max or min width)
height values are tricky
responsive images (100% of container parent or img {width: 100%;})
modular design
“breakpoints” based on design not device
display: none and display: block
turning off iOS resize

Media Queries Overview
workflow – sketches, create boxes of content

Approximate Breakpoints:
1200px
960px
768px
600px
480px
320px

Site Examples:

Responsive Design Resources:
guidelines-for-responsive-web-design

Student Examples:

Highlights:

—————

CSS Quiz – study guide


Mandatory Midterm Meeting (5%) – by TBA:

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 Codeacademy tutorials. Complete the HTML, CSS & Responsive tutorials before scheduling the meeting

You may also be receiving an email to set up a meeting if I am your 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 & M after class (7:00pm)
Except my class workshops: TTH 1:30-2:30pm