Step 2: Layout

Build the interface with CSS.

Where We Are

You have three files and a basic structure. Now let's make it look like an actual app.

Style the Search

Style the search area:
- A text input for the city name, large and easy to type in
- A search button next to it
- Center everything on the page
- Use clean, modern styling — rounded corners, subtle shadows

Add a Current Weather Section

Add a section below the search for showing current weather:
- A large temperature display
- The city name
- A description of conditions (e.g., "Partly Cloudy")
- Show it as a card with a clean background

For now, use placeholder text. We'll fill in real data next.

Add the Forecast Section

Below the current weather, add a row of 5 cards for the forecast:
- Each card shows a day name, an icon placeholder, and a high/low temperature
- Use placeholder data for now
- Make the cards sit side by side, wrapping on smaller screens

Make It Responsive

Make the layout work on both desktop and mobile:
- On desktop, forecast cards sit in a row
- On mobile, they stack or scroll horizontally
- The search input should be full-width on small screens

Checkpoint

By now you should have:

• Styled search input and button
• Current weather card with placeholder data
• Forecast cards with placeholder data
• Layout works on different screen sizes

What You Learned

• CSS layout with flexbox and grid
• Responsive design with media queries
• Card-based UI patterns

Exercises

1. Paste the "Style the Search" and "Add a Current Weather Section" prompts, then compare the page before and after to see how much placeholder data clarifies the layout.
2. Add the forecast row with the "Add the Forecast Section" prompt and confirm all five cards display side by side.
3. Resize your browser from desktop to mobile width; if the forecast cards or search input don't adapt, send the "Make It Responsive" prompt and re-test.