CS 1520 — Recitation Worksheet

Name: Student Id:

Week 2: Responsive design
Slides: slides/01_responsive.pdf
Time: 50 minutes (Tune In 5 / Activity 35 / Reflection 10)

You do not need a grammar check. Don’t overcorrect. Write like you’re saying it out loud.

Get this instruction: https://github.com/ruhendrawan/cs1520_recitation

Work in pairs or alone, work with your peer on the first and last part; or self reflect and write down on the worksheet

Reflection and Submission

Submit in the google form https://forms.gle/tYEtKjJunM1wb2we6

You need to submit the zip file if you're working alone, otherwise just fill in the form.

Upload zip files named as <PITT ID>-<week>.zip, e.g. rah225-02.zip, containing

This worksheet
page.html (or any files related to your work)

Part 1 — Tune In (5 minutes)

Pairs: talk in turns. Max 1 minute per person before switching so everyone gets a chance to talk.

Confidence in Mastering this Topic (0-5: 0 is lowest, 5 is highest) My Confidence: ___

Excitement with this Topic (0-5: 0 is lowest, 5 is highest) My Current Excitement: ___

Pick 1–3 concepts from this week’s lecture and explain them in your own words (fast + messy is fine).

Concepts I chose (1–3):

My explanation (write like you’re talking):

Starter questions (answer a few):

What is it (in one sentence)?
Why do we need it on phones vs laptops?
What problem does it solve?
What would break if we didn’t use it?
Where would you use it in a real app/site you care about?

Part 2 — Activity (35 minutes)

Choose one track:

Track A — Follow-along (guided)
Track B — Challenge
Track C — Choose your own

Track A — Follow-along (guided)

Follow along and build a page

Option 1: Beginner in HTML CSS

Finding color, images, and fonts:

What will your website look like?

Option 2: Understand the basics of HTML and CSS

Option I chose:

Option 1
Option 2

What I built (quick description):

Steps I followed (short notes): 1. 2. 3. 4. 5. 6.

Checkpoints (mark what you reached):

No horizontal scrolling on a narrow window
Layout changes at my breakpoints
I can explain what the viewport meta tag does
[ ]
[ ]
[ ]

Track B — Challenge

Pick one challenge idea.

Which one I picked:

Goal (1 sentence):

Stretch goal (1 bullet):

Track C — Choose your own (apply it to your life)

My mini-project idea (1–2 sentences):

How it uses this week’s topics (name them):

Relative sizing:
Breakpoints:
Viewport/meta viewport:
Media queries:

Definition of done (checklist, modify or make your own):

I used the viewport meta tag
I used at least 2 media queries (breakpoints)
I used at least one relative sizing approach (%, rem, max-width, etc.)
My page is readable on a narrow window without horizontal scrolling
I can explain what changes at each breakpoint and why
[ ]
[ ]

Part 3 — Reflection (10 minutes)

Pairs: talk in turns. Max 1 minute per person before switching so everyone gets a chance to talk.

A) What you did

Checklist:

I chose a track (A/B/C) and finished something concrete
I used at least one media query
I used the viewport meta tag (or I understand why it matters)
I used relative sizing somewhere
I tested at more than one window size (or on a phone)

Notes:

B) Connect it back (prior lecture)

Pick one concept from the prior lecture and connect it to what you did today.

Prior lecture concept I’m connecting:

What it is (in your own words):

How it showed up today:

Excitement with this Topic after the Activity (0-5: 0 is lowest, 5 is highest) My Excitement with this Topic after doing the activity is ___

If you’re stuck

Which screen size are you targeting first (smallest)? What’s the “default” layout?
Are you using any fixed widths that force overflow?
Did you include the viewport meta tag?
Can you say what each breakpoint is trying to improve (readability, spacing, layout)?

FilesExpand file tree

02-responsive-design-worksheet.md

Latest commit

History