2 min read
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 shadowsAdd 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 screensMake 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 screensCheckpoint
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