G1Joshi HTML & CSS
Modern HTML5 and CSS3 for semantic web structure and responsive styling.
When to Use
- Working with
.htmland.cssfiles - Building responsive web layouts
- Creating accessible web interfaces
- Styling web components
Quick Start
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page Title</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main class="container">
<h1>Hello World</h1>
</main>
</body>
</html>
Core Concepts
Semantic HTML
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>Article Title</h1>
<time datetime="2024-01-15">January 15, 2024</time>
</header>
<p>Content...</p>
</article>
</main>
<footer>
<p>© 2024 Company</p>
</footer>
CSS Custom Properties
:root {
--color-primary: #3b82f6;
--color-secondary: #64748b;
--spacing-md: 1rem;
--radius-md: 0.5rem;
--font-sans: system-ui, sans-serif;
}
.button {
background: var(--color-primary);
padding: var(--spacing-md);
border-radius: var(--radius-md);
font-family: var(--font-sans);
}
Common Patterns
Flexbox Layout
/* Center content */
.center {
display: flex;
justify-content: center;
align-items: center;
}
/* Navigation bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
/* Card grid with wrap */
.card-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 300px;
}
CSS Grid
/* Responsive grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
/* Page layout */
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
Responsive Design
/* Mobile-first approach */
.container {
padding: 1rem;
}
@media (min-width: 768px) {
.container {
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
}
/* Container queries */
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: flex;
gap: 1rem;
}
}
Best Practices
Do:
- Use semantic HTML elements
- Mobile-first responsive design
- Use CSS custom properties for theming
- Include proper accessibility attributes
Don't:
- Use
<div>for everything (use semantic tags) - Use inline styles for complex styling
- Forget viewport meta tag
- Ignore color contrast requirements
Troubleshooting
| Issue | Cause | Solution |
|---|---|---|
| Layout overflow | Fixed widths | Use percentage or min/max |
| Flex items not wrapping | Missing flex-wrap |
Add flex-wrap: wrap |
| Grid gaps not showing | Old browser | Check browser support |