week 9 | online | 3.16–3.22

📌 Weekly Structure (applies every week)

Week 9 Links & Notes

Live Sessions This Week:

👉 Join Live: Mon 3.16 @ noon(week 9 review)→ 🎥 [Join Here]
Will be recorded for those unable to attend live.

🎥 Watch: Mon 3.16 Weekly Review Recording → [Watch Here] 

Looking Ahead (Week 10)
Next live (recorded) session: Mon Mar 23rd @ noon 

This week’s deadlines
Monday, Mar 23rd @ noon

  • Revise top mockup (3 sizes) – Upload to your P1 Medium Story + Project1 – S26 Critique.pptx (post to new slide FOLLOWING your original mockups so we can compare changes)
  • Progress on P1 Development.
  • Warmup 5 – Complete in Webflow and submit published link (1:36–2:14m) via D2L Warmup 5 folder

Due Wednesday 3.18 @midnight:

Due Monday 4.6 @noon:

  • Final Project 1 Submission

Before Spring Break, we began Blog 3 and P1 mockups over break.
Next week, we will continue with P1 development.

Weekly Content

Week 9 (though not required, it is recommended you move through in sequence. All items need to be complete by deadlines below):

SECTION I – Responsive Web, CSS Links + Nav

  1. Lecture: Responsive Web Design (videos – 37m9s) 
  2. Review Responsive Resources
  3. Lecture: CSS Links + Navigation (videos – approx 15m) 
  4. Review  Links + Nav Resources 
  5. Discuss/Demo Webflow (in Weekly Review above) 

    SECTION II – Project 1
  6. Continue Project 1: Typographic Storytelling + Begin Development in Webflow
    Before developing, fully review Our Cloning Policy
  7. Due Wed. 18th5 Peer Reviews on Project1 – S26 Critique.pptx
  8. Review development resources, as needed
  9. Due Mon. 23rdP1 Revised Mockup posted to “Project 1” story on Medium AND Project1 – S26 Critique.pptx
  10. Due Wed 18th Blog 3: 2 Peer Comments  

    SECTION III – Webflow
  11. Due Mon. 23rd Warmup 5: CSS Grid + Nav

SECTION I – Web Concepts

1. Responsive Design

Responsive_WebDesign

(only go to slide 21 in above PDF)

https://www.figma.com/resource-library/responsive-website-design/

2. Responsive Resources:

3. CSS Links + Navigation 

Most website navigation is built from a list of links using <nav>, <ul>, and <li>. Tools like Webflow generate this structure automatically, but understanding it helps you debug layouts and build accessible websites.

Class13_Navigation

4. Links + Nav Resources:

Note: Review these concepts as needed—mostly for building different navs or modifying unordered lists.

SECTION II – assignments

6. Project 1: Typographic Storytelling (due: 4.6@noon)

This week we will begin developing in Webflow. Web designers rarely build every part of a website from scratch. In professional practice, designers often reuse or clone components such as navigation bars, grids, galleries, or layout structures to speed up development. This semester, you are allowed to do the same in Webflow, with clear guidelines. Before developing, fully review Our Cloning Policy

Project 1 Timeline:

m3.16 week 8 mobile/tablet/desktop mockups (3 mockups total + must include logo) using selected style tile for homepage + development plan + wireframes
w3.18 peer critique feedback due @ noon on d2l “project 1 – mockups” discussion board + begin development
m3.23week 9 revised homepage mockup designs + continue development
m4.6week 10Final Project Due Date

7. 5 Comprehensive Peer Comments on Project1 – S26 Critique.pptx

8. Development Resources (reference as needed):

9. Revise your mockups and post to Medium and Shared PPT utilizing feedback.

10. Blog #3: Preparing for Development in Webflow. 2 Peer Comments (description posted last week)

SECTION III – technical

11. Warmup 5 – Webflow Recipe

In this warmup, you’ll build your recipe webpage—-using the same content from our past recipes--in Webflow while learning about QuickStack for layout, HTML5 sections, navigation/link styling, image handling, and typography.

_________________________________________________________________

Step One: Project Setup
- Create a new project in Webflow and name it "First Last Warmup 5".
- Enter the Webflow Designer and begin with your blank page.

Step Two: Add the Page Structure
1. Click the Add Panel (+ icon) in Webflow.
2. Drag a Section onto the canvas.
3. Apply a class name to the section:
   - Click the section and rename it "Header" in the Navigator panel.
   - With the section selected, go to the Style Panel (right sidebar). In the Selector field, type "Header" and press Enter to create the class.
4. Change the HTML tag:
   - With the section still selected, go to the Settings Panel (⚙️ tab).
   - Under Tag, select "Header" from the dropdown.
5. Repeat these steps for the next two sections:
   - Main Section (class: "Main", tag: <main>)
   - Footer Section (class: "Footer", tag: <footer>)

_________________________________________________________________

Step Three: Add Containers
1. Inside each section, add a Container:
   - Drag a Container into the Header section.
   - Drag a Container into the Main section.
   - Drag a Container into the Footer section.
2. Set max-width for all three containers:
   - Select a container, go to the Style panel, and set:
   - Max-width: 800px
   - Margin: Auto (centers it)
   - Apply this to all three containers.
✅ Checkpoint: Each section should now contain a centered container.

_________________________________________________________________

Step Four: Add the Recipe Content + Layout with QuickStack
1. Use Webflow's QuickStack to structure the page layout:
   - Click the Add Panel (+).
   - Drag a QuickStack into the container of the Main Section.
   - Inside the QuickStack, add (copy/paste over your recipe content):
     - An <h1> with the recipe name (e.g., "Best Pancakes Ever").
     - An <h2> for "Ingredients", and below it:
     - An unordered list (<ul>) with <li> items for ingredients.
     - An <h2> for "Instructions", and below it:
     - An ordered list (<ol>) with <li> items for steps.
2. Adjust the QuickStack settings for responsiveness:
   - Select the QuickStack, go to the Style Panel, and check:
   - Gap: Add spacing between elements for better readability.
   - Flex settings: Ensure elements align properly across breakpoints.
   - Margin & Padding: Adjust spacing inside and outside the QuickStack.
3. In the footer container, add a link to the original recipe source. 
✅ Checkpoint: Your page now has organized recipe content.

_________________________________________________________________

Step Five: Create Navigation and Jump Links
1. Add Navigation Links:
   - Select the Nav Bar element.
   - Click Add (+) and insert into the container in header.
   - Modify nav items to two Text Links.
   - Rename them: "Ingredients" and "Instructions"

2. Set Up Jump Links:
   - Click on each Text Link, go to the Settings Panel (⚙️).
   - Under Link Settings, choose Page Section and enter:
     - "Ingredients" → #ingredients
     - "Instructions" → #instructions

3. Add IDs to Headers:
    - Scroll down to your Main Section where your recipe content is.
    - Click on the "Ingredients" heading (<h2>), go to Settings (⚙️), and set its ID to "ingredients".
    - Click on the "Instructions" heading (<h2>), go to Settings (⚙️), and set its ID to "instructions".
✅ Checkpoint: Now, clicking the navigation links should smoothly scroll to the corresponding sections.

_________________________________________________________________

Step 6: Insert and Style an Image
1. Drag an Image block into the Main Section above the Ingredients list.
2. Upload an image related to your recipe.
3. Make the image responsive:
   - Select the image, go to Style Panel, and set:
   - Max-width: 100% (so it scales properly / automatically applies).
   - Height: Auto (to maintain proportions).
   - In the Assets panel, add a descriptive alt text for accessibility.
4. Optional:
Try setting Object-fit: cover; to crop and fit the image.
✅ Checkpoint: Your page displays a properly sized image with alt text.

_________________________________________________________________

Step 7: Typography Adjustments
1. Add a Webfont:
   - Go to the Project Settings → Fonts tab.
   - Select a Google Font or Adobe Font and add it.
   - Apply this font to:
     - Body (default font for the site).
     - Headings (h1, h2).
     - Paragraphs (p).
     - Links (a).
2. Adjust text sizes:
    - Set body font size to 16px (100%).
    - Set headings (h1, h2) to larger sizes (1.5em, 2em).
    - Set paragraph, lists, blockquotes, links). 
    - Ensure good line spacing so text is readable.
✅ Checkpoint: Your text should be visually appealing and readable.

_________________________________________________________________

Step 8: Apply a Color Scheme & Accessibility Check
1. Set a Background Color:
   - Select the Body tag and choose a light background color.
2. Update Text Colors:
   - Make sure text contrasts well with the background.
3. Check Accessibility:
   - In Webflow, run the color contrast checker (watch: 1m video on color accessibility in Webflow).
   - Ensure all text is legible and accessible.
4. Adjust widths, margins, to consider the measure (line length). Make sure the text doesn't touch the edge of the browser, and that all of the content is always centered. 
5. Stylize the links with hovers.

✅ Checkpoint: Your color scheme should enhance readability.

_________________________________________________________________

Step 9: Make It Responsive
1. Switch to Tablet View in Webflow.
   - Adjust spacing & text sizes for readability.
   - Check if the layout works properly.
2. Switch to Mobile View:
   - Adjust spacing & text sizes. 
   - Convert the recipe layout from multi-column → single-column.
   - Ensure the navbar stacks vertically if necessary.
✅ Checkpoint: Your design should look great on all devices.

_________________________________________________________________

Step 10: Publish & Submit
1. Publish your Webflow project.
2. Upload the link to the "warmup5" folder via D2L.
✅ Checkpoint: Your final project is submitted and ready for grading.

_________________________________________________________________
Criteria Points
Webflow project named correctly 0.25
QuickStack used for layout and responsive design 0.75
Three sections: Header, Main, Footer 0.25
Each section has a container with max-width 0.25
Recipe content includes proper HTML elements 0.25
Responsive image with max-width 100% and alt text 0.25
Typography adjusted (web font, sizes, spacing, hovers) 0.50
Navigation links styled and jump links work 0.50
Footer recipe source link added and styled 0.25
Color scheme applied, accessibility checked 0.25
Project exported and uploaded via FTP 0.25

Hovers: To style hovers in Webflow, select the arrow to the right of your selector and select “Hover.” The green hover tag will appear in the Style Selector box. Any CSS you apply when the hover is selected will apply to hovers. 

Webflow Resources: