Lab 3: Responsive Web Design and Animations

Complete the tasks below. Edit the CSS in the <head> and HTML body where indicated.


Task 1: Responsive Design

1. Media Queries & Flexbox

SUCCESS (1.1): You are viewing this on a mobile screen width!

Subtask 1.1: Resize your browser window to be very small. The red alert box above should appear only when narrow.

Subtask 1.2: Fix the menu below. On mobile, these items should stack vertically instead of squishing horizontally.

Bootstrap Grid System

For these tasks, modify the HTML classes below directly. No CSS writing needed.

Subtask 1.3: The three boxes below are currently stacked (block elements). Use Bootstrap classes row (on parent) and col-4 (on children) to make them sit side-by-side in equal columns.

Column 1
Column 2
Column 3

Subtask 1.4: Responsive Utilities. Hide the box below on mobile phones but show it on desktops using Bootstrap classes.

I should disappear on mobile screens!

Advanced Media Queries

Subtask 1.5: Breakpoints. Write CSS media queries so the box below changes color:
Default (Gray) → Tablet (Yellow) → Desktop (Green)

Resize window to see color change!

Subtask 1.6: Orientation. Write a CSS media query so the box below only appears when the screen is in Landscape mode.

I am visible because you are in LANDSCAPE mode.
Task 2: Accessibility

2. Visual & Assistive A11y

Subtask 2.1 & 2.2: The button below has poor contrast and no focus state. Fix this in the CSS block.

Subtask 2.3: ARIA Labels. The button below only contains an icon (X). A screen reader doesn't know what it does. Add an aria-label="Close" attribute to the HTML tag below.

Subtask 2.4: Alt Text. The image below is missing an alt attribute. Add alt="A cute kitten" so screem readers can pick up the image description.

A cute kitten
Task 3: Animation

3. Transitions & Keyframes

Subtask 3.1: Simple Hover. Make this card scale up slightly (zoom in) when you hover over it using transition and transform.

Hover Me

Subtask 3.2 & 3.3: Infinite Spinner. Define the keyframes in CSS and apply the animation to the circle below.

Subtask 3.4: Pulse. Create a 'pulse' keyframe in CSS (opacity changing) and apply it to this red dot.

Task 4: Multi-page Site

4. Site Structure & Navigation

Subtask 4.1: External CSS. Currently, all styles are in the <head> of this file. To share these responsive styles with the new pages you are about to create, you must move them to an external file.

  1. Create a new file named style.css in the same folder.
  2. Cut everything inside the <style> tags above (from :root down to the end of animations) and paste it into style.css.
  3. Delete the <style> tags from this HTML file.
  4. Link the new CSS file here using: <link rel="stylesheet" href="style.css">.

Subtask 4.2: Create Pages. Create three new HTML files in the same folder: products.html, about.html, and contact.html.
Copy the HTML structure (Head, Navbar, Footer) to these files so they share the same layout and are responsive (thanks to the external CSS).

Subtask 4.3: Navigation. Update the navigation menu in ALL four files (including this one, which acts as "Home") so the links work properly.
Current code: <a href="#">
Expected code example: <a href="products.html">Products</a>