This takes the place of the old wk 6 - R&D // Weekly Visual Notes assignment. You are still making visual notes, but now they connect directly to the responsive design tutorial and your next web project work.

Objective

Build a first working understanding of responsive design by doing the class tutorial, then researching beyond it.

Your evidence should show that you understand the difference between fixed layouts, fluid layouts, adaptive decisions, media queries, responsive typography, and responsive images/media.

Part 1: Complete The Tutorial

1. Open the Responsive Design Day 1 tutorial.
2. Enter your name in the Student Progress / Submission panel.
3. Work through the modules, live editors, reflections, and checkpoint quizzes.
4. Complete the final mini-project in the tutorial.
5. At the bottom of the tutorial, click Download Completed HTML.

Part 2: Research Responsive Design

Choose at least one substantial source beyond the tutorial. You may read an article, follow another tutorial, watch a video, or compare multiple shorter references.

• Choose Your Own (Google or AI assisted search/convo)
• MDN: Responsive Design
• MDN: Media Queries
• web.dev: Learn Responsive Design
• CSS-Tricks: Complete Guide to CSS Media Queries
• A responsive design tutorial or video you choose, as long as you record the title/source in your notes.

Visual Notes Requirements

• Length: 2-4 notebook pages 5.5x8.5", or equivalent digital/sketch pages
• Medium: Moleskine Cahier, sketchbook, iPad, Figma/FigJam, Milanote, or another visual note format
• Format: handwritten or visually organized, with diagrams, arrows, layout sketches, code snippets, or comparisons
• Submission file: one PDF in right-reading order

What Your Notes Should Show

Your notes do not need to be perfect. They do need to show genuine thinking. Include notes, sketches, comparisons, and questions about these concepts:

• Responsive design: one page adapting to different viewport sizes
• Fixed layout: what happens when the viewport is narrower or wider than the assumed size
• Fluid layout: percentages, max-width, min-width, and padding
• Adaptive design: when a layout changes at specific breakpoints
• Media queries: @media, min-width, and max-width
• Responsive typography: how text size, line length, and spacing can change across viewports
• Responsive images/media: how images, video, and embedded media avoid overflow
• At least one question, confusion, or aha moment from your research

What To Submit

1. Responsive Design visual notes PDF
   Suggested filename: week-6-responsive-notes-lastname.pdf
2. Completed tutorial HTML file
   The filename should look like desn368-responsive-day1-progress-first-last.html

Canvas does not receive your tutorial work automatically. You must download the completed HTML file from the tutorial and upload it with your visual notes PDF.

Checklist Before Submitting

• ✓My visual notes identify the research source I used
• ✓My notes cover fixed, fluid, adaptive, typography, images/media, and media queries
• ✓My notes include sketches, diagrams, code snippets, comparisons, or visible thinking
• ✓My tutorial checkpoints, reflections, and final mini-project are saved in the completed HTML file
• ✓I am uploading both files: one .pdf and one .html

Submission Type

File upload

Allowed file types: .pdf and .html

Grading

• Complete: visual notes show genuine engagement with the required concepts, identify at least one research source, and the completed tutorial HTML is submitted
• Incomplete: missing tutorial file, missing visual notes, notes under 2 pages/equivalent, or minimal effort with little evidence of responsive design understanding

Upload both files.

Submit your responsive design visual notes PDF and the completed tutorial HTML file. The HTML file is made by clicking the big red Download Completed HTML button at the bottom of the tutorial.