🎯 Learning Objectives
After completing this course, you will be able to:
- Master semantic HTML5 elements
- Create complex layouts with CSS Flexbox and Grid
- Style forms and tables professionally
- Use CSS selectors effectively
- Implement CSS animations and transitions
- Understand the CSS box model
- Create accessible web pages
⚡ Prerequisites
- Completed Web Development Course 1
- Basic HTML knowledge
- Basic CSS knowledge
- Text editor installed
1. Semantic HTML5
Why Semantic HTML?
- Better accessibility
- Improved SEO
- Easier to maintain
- More meaningful code
Semantic Elements
<header> - Page/section header<nav> - Navigation links<main> - Main content<article> - Independent content<section> - Thematic grouping<aside> - Sidebar content<footer> - Page/section footer
Semantic HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic Page</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here...</p>
</article>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>
2. CSS Selectors
Basic Selectors
/* Element Selector */
p { color: blue; }
/* Class Selector */
.highlight { background: yellow; }
/* ID Selector */
#header { font-size: 24px; }
/* Universal Selector */
* { margin: 0; padding: 0; }
Combinators
/* Descendant */
div p { color: red; }
/* Child */
div > p { color: blue; }
/* Adjacent Sibling */
h1 + p { margin-top: 0; }
/* General Sibling */
h1 ~ p { color: gray; }
Advanced Selectors
/* Attribute Selectors */
input[type="text"] { border: 1px solid #ccc; }
a[href^="https"] { color: green; }
img[alt$=".jpg"] { border: 2px solid blue; }
/* Pseudo-classes */
a:hover { color: red; }
li:first-child { font-weight: bold; }
tr:nth-child(even) { background: #f0f0f0; }
input:focus { outline: 2px solid blue; }
/* Pseudo-elements */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }
.quote::before { content: '"'; }
.quote::after { content: '"'; }
3. The CSS Box Model
Understanding the Box Model
Every HTML element is a box with four areas:
- Content: The actual content (text, images)
- Padding: Space between content and border
- Border: Line around the padding
- Margin: Space outside the border
Box Model Properties
.box {
/* Content size */
width: 300px;
height: 200px;
/* Padding */
padding: 20px;
/* or */
padding: 10px 20px 10px 20px;
/* Border */
border: 2px solid #333;
border-radius: 8px;
/* Margin */
margin: 20px auto;
}
Box Sizing
/* Default box-sizing */
.box1 {
box-sizing: content-box;
width: 300px;
padding: 20px;
/* Total width: 340px */
}
/* Better approach */
.box2 {
box-sizing: border-box;
width: 300px;
padding: 20px;
/* Total width: 300px */
}
/* Apply to all elements */
* {
box-sizing: border-box;
}
4. Flexbox Layout
What is Flexbox?
Flexbox is a one-dimensional layout method for arranging items in rows or columns. It's perfect for:
- Navigation bars
- Card layouts
- Centering content
- Equal-height columns
Flexbox Container Properties
.container {
display: flex;
/* Direction */
flex-direction: row; /* row, column, row-reverse, column-reverse */
/* Wrapping */
flex-wrap: wrap; /* nowrap, wrap, wrap-reverse */
/* Main axis alignment */
justify-content: center; /* flex-start, flex-end, space-between, space-around */
/* Cross axis alignment */
align-items: center; /* flex-start, flex-end, stretch, baseline */
/* Gap between items */
gap: 20px;
}
Flexbox Item Properties
.item {
/* Grow factor */
flex-grow: 1;
/* Shrink factor */
flex-shrink: 1;
/* Base size */
flex-basis: 200px;
/* Shorthand */
flex: 1 1 200px; /* grow shrink basis */
/* Individual alignment */
align-self: flex-end;
/* Order */
order: 2;
}
5. CSS Grid
What is CSS Grid?
CSS Grid is a two-dimensional layout system. It's perfect for:
- Page layouts
- Complex grid designs
- Magazine-style layouts
- Dashboard layouts
Grid Container Properties
.grid-container {
display: grid;
/* Define columns */
grid-template-columns: 200px 1fr 200px;
/* or */
grid-template-columns: repeat(3, 1fr);
/* or */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Define rows */
grid-template-rows: 100px auto 50px;
/* Gap between items */
gap: 20px;
/* or */
column-gap: 20px;
row-gap: 10px;
/* Alignment */
justify-items: center;
align-items: center;
}
Grid Item Properties
.grid-item {
/* Span columns */
grid-column: 1 / 3; /* Start at 1, end at 3 */
/* or */
grid-column: span 2; /* Span 2 columns */
/* Span rows */
grid-row: 1 / 3;
/* or */
grid-row: span 2;
/* Named areas */
grid-area: header;
}
/* Grid template areas */
.grid-container {
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
Styling Forms
/* Form container */
form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
/* Input fields */
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 5px rgba(0,123,255,0.3);
}
/* Buttons */
button {
background: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #0056b3;
}
Styling Tables
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #007bff;
color: white;
font-weight: bold;
}
tr:hover {
background-color: #f5f5f5;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
7. CSS Animations & Transitions
CSS Transitions
.button {
background: #007bff;
color: white;
padding: 10px 20px;
transition: all 0.3s ease;
}
.button:hover {
background: #0056b3;
transform: scale(1.05);
}
/* Individual properties */
.box {
transition-property: background, transform;
transition-duration: 0.3s, 0.5s;
transition-timing-function: ease, ease-in-out;
transition-delay: 0s, 0.1s;
}
CSS Animations
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.animated {
animation: slideIn 0.5s ease-out;
}
/* Multiple keyframes */
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
Practice Exercises
Create a responsive card layout using Flexbox with at least 3 cards that:
- Display in a row on desktop
- Wrap to multiple rows on smaller screens
- Have equal heights
- Include an image, title, and description
Create a page layout using CSS Grid with:
- A header spanning full width
- A sidebar (200px wide)
- A main content area
- A footer spanning full width
Create and style a contact form with:
- Name, email, and message fields
- Proper focus states
- A styled submit button
- Hover effects
🎉 Summary
You've completed the HTML & CSS Deep Dive course! You now know:
- How to use semantic HTML5 elements
- Advanced CSS selectors and specificity
- The CSS box model and box-sizing
- Flexbox for one-dimensional layouts
- CSS Grid for two-dimensional layouts
- How to style forms and tables
- CSS animations and transitions
Total points available: 10/10