← Back to Week 3

Problem Set 03

Problem Set 03

Due: Wednesday, January 21, 2026 at 11:59pm

Status: Submitted on January 19, 2026

This problem set focused on CSS selectors, CSS styling properties, and Flexbox layouts.

Problem A: Code Changes

Wrote CSS rules with various selectors (type, class, descendant, child, pseudo-class)
Applied styles to reveal a hidden picture using CSS only
No HTML modifications allowed - selector-based targeting only

Problem B: Code Changes

Set box-sizing: border-box for consistent measurements
Added Google Fonts (Nunito Sans, Raleway, Material Icons)
Styled navbar with fixed positioning, hover effects, and transitions
Added header background image with background-size: cover
Created menu section with descriptive lists and rounded image corners
Styled footer with :last-child pseudo-class selector

Problem C: Code Changes

Created three-column layout with Flexbox container
Used flex-basis, flex-grow, flex-shrink for column sizing
Built card layout with nested Flexbox and flex-wrap
Added card styling with rounded corners and box-shadow
Made body a column Flexbox for full-height background

Key Concepts

Box Model: box-sizing: border-box for predictable sizing
Typography: Google Fonts, rem units, font-weight
Positioning: position: fixed for navbar, position: relative for icons
Backgrounds: background-image, background-size: cover, background-position: center
Flexbox: display: flex, flex-basis, flex-grow, flex-shrink, flex-wrap
Cards: border-radius, box-shadow with multiple shadows