Web Development Basics: HTML, CSS & Responsive Design
This module is your starting point for building engaging and functional websites. You'll master the foundational languages of the web – HTML for structure and CSS for styling – and learn how to make your sites look great on any device with responsive design techniques.
1. HTML5: Structuring Your Content
Dive into HTML5, the standard for creating web pages. Learn about semantic tags that give meaning to your content, how to link documents, embed images, and build forms for user interaction. A solid HTML foundation is crucial for any web project.
Code Example: 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>My First Page</title>
</head>
<body>
<header><h1>Welcome to My Site!</h1></header>
<main>
<section>
<p>This is a paragraph in the main content.</p>
<a href="about.html">Learn more about us</a>
</section>
</main>
<footer><p>© 2025 My Company</p></footer>
</body>
</html>
2. CSS3: Styling Your Web Pages
Bring your web pages to life with CSS3. This section covers selectors, the box model, colors, typography, and essential layout techniques like Flexbox. You'll learn how to transform plain HTML into visually appealing designs.
Code Example: Simple CSS Styling with Flexbox
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f4f7f6;
}
.container {
display: flex;
justify-content: space-around; /* Distribute items evenly */
align-items: center;
padding: 20px;
background-color: #e0f2f7;
}
.item {
background-color: #3498db;
color: white;
padding: 15px 30px;
margin: 10px;
border-radius: 5px;
}
3. Responsive Design with Media Queries
Ensure your website looks perfect on any screen size, from smartphones to large desktops. Learn to use the viewport meta tag and CSS Media Queries to create adaptive layouts, providing an optimal user experience across all devices.
Code Example: Basic Media Query for Mobile
/* styles.css */
.main-content {
padding: 20px;
}
@media (max-width: 768px) { /* Applies when screen width is 768px or less */
.main-content {
padding: 10px; /* Reduce padding on smaller screens */
}
.container {
flex-direction: column; /* Stack items vertically */
}
}
Module Summary
In this foundational module, you've gained a strong understanding of HTML for structuring web content, CSS for styling it beautifully, and responsive design principles to ensure your websites are accessible on any device. These skills are the bedrock of modern web development.
What You've Learned:
- Understood semantic HTML5 structure and common tags.
- Implemented CSS styling with selectors, box model, and Flexbox.
- Explored responsive design using `<meta name="viewport">` and Media Queries.
Next Steps & Related Modules
Ready to add interactivity to your sites? Continue your journey with JavaScript. If you're interested in data, explore our Python modules.