*Building a Responsive Weather App: A Comprehensive HTML and CSS Project*
As developers, we're always looking for ways to improve our skills and build projects that challenge us. In this tutorial, we'll embark on a comprehensive project that combines HTML and CSS to build a responsive weather app.
*Project Overview*
Our weather app will allow users to:
1. View current weather conditions, including temperature, humidity, and wind speed
2. Access 5-day weather forecasts with detailed information
This project will help you develop a deeper understanding of front-end development and enhance your skills in creating interactive web applications.
*HTML Structure*
We'll begin by creating the HTML structure for our weather app. We'll use the following elements:
- `header`: Contains the app title and navigation
- `main`: Holds the current weather conditions and 5-day forecast
- `section`: Used for the current weather conditions and forecast sections
- `div`: Employed for layout and styling purposes.
Here's the basic HTML structure:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Weather App</h1>
<nav>
<ul>
<li><a href="#current-weather">Current Weather</a></li>
<li><a href="#forecast">Forecast</a></li>
</ul>
</nav>
</header>
<main>
<section id="current-weather">
<h2>Current Weather</h2>
<div class="weather-data">
<!-- weather data will be displayed here -->
</div>
</section>
<section id="forecast">
<h2>Forecast</h2>
<div class="forecast-data">
<!-- forecast data will be displayed here -->
</div>
</section>
</main>
</body>
</html>
```
*CSS Styling*
Next, we'll add CSS styles to enhance the visual appeal and responsiveness of our weather app. We'll focus on:
- Layout and grid systems
- Typography and font sizes
- Color schemes and backgrounds
- Media queries for responsive design
Here's an example of how we can style our weather app using CSS:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
}
header h1 {
font-size: 2em;
margin: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav a {
color: #fff;
text-decoration: none;
transition: color 0.2s ease;
}
nav a:hover {
color: #ccc;
}
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 2em;
}
section {
background-color: #f7f7f7;
padding: 1em;
margin-bottom: 1em;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
font-size: 1.5em;
margin-top: 0;
}
.weather-data {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.forecast-data {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* media queries for responsive design */
@media only screen and (max-width: 768px) {
main {
flex-direction: column;
}
section {
margin-bottom: 0.5em;
}
}
@media only screen and (max-width: 480px) {
header h1 {
font-size: 1.5em;
}
nav ul {
flex-direction: column;
}
nav a {
font-size: 1em;
}
}
```
