Stay Ahead with the Power of Upskilling - Invest in Yourself! 
Building a Responsive Website
Let’s combine the concepts and techniques we’ve learned to create a responsive website.
HTML Structure
HTML
<!DOCTYPE html>
<html>
<head>
<title>Responsive Website</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
<section class=”hero”>
<h2>Welcome</h2>
<p>This is a responsive website.</p>
<img src=”image.jpg” alt=”Image”>
</section>
<section class=”content”>
</section>
</main>
<footer>
© 2023 My Website
</footer>
</body>
</html>
CSS Styling
CSS
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f0f0f0;
padding: 20px;
}
main {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
.hero {
text-align: center;
padding: 40px;
}
.hero img {
max-width: 100%;
height: auto;
}
@media only screen and (max-width: 768px) {
.hero {
padding: 20px;
}
}
Key Concepts
- HTML structure: Use semantic HTML elements to structure your content.
- CSS styling: Apply CSS styles to control the appearance and layout.
- Responsive design: Use media queries to adjust styles based on screen size.
- Typography: Choose readable fonts and use appropriate font sizes and line heights.
- Color: Select colors that are visually appealing and accessible.
- Layout: Create a well-structured layout using CSS grid or flexbox.
- Images: Optimize images for performance and use responsive techniques.
- Accessibility: Ensure your website is accessible to users with disabilities.
Additional Tips
- Use a CSS preprocessor: Consider using a preprocessor like Sass or Less for better organization and features.
- Test on various devices: Ensure your website looks and functions correctly on different screen sizes and browsers.
- Continuously improve: Keep learning and experimenting to enhance your responsive web design skills.
By combining these concepts and techniques, you can create visually appealing, responsive, and user-friendly websites.
