CSS transitions make changes happen smoothly instead of instantly.
Basic syntax:
selector {
transition: property duration timing-function delay;
}
Example:
<style>
button {
background: coral;
color: white;
padding: 10px 20px;
transition: background 0.3s ease;
}
button:hover {
background: darkred;
}
</style>
<button>Hover Me</button>
Practice Task:
Create a button that smoothly changes size and background color on hover.
Combine everything you’ve learned to create a full responsive homepage layout:
This project will help you practice real-world layout building.
When elements overlap, z-index decides which appears on top.
Example:
<style>
.box1 {
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
background: lightblue;
padding: 20px;
}
.box2 {
position: absolute;
top: 70px;
left: 70px;
z-index: 2;
background: coral;
padding: 20px;
}
</style>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
Practice Task:
Create a modal popup that appears above all other elements.
Units you should know:
Practice Task:
Try building the same layout using px, %, and fr to see how they behave differently.
Media queries let you adjust layouts based on screen size.
Example:
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
Practice Task:
Make your 3-column gallery responsive so that on mobile screens it becomes 1 column.
Flexbox is great for small components, Grid is great for page structure. Combining them gives the best of both.
Practice Task:
Create a page where the outer layout is made with Grid, and each section (like navbar, cards) is made with Flexbox.
Use these properties to align grid items:
Practice Task:
Center a single box in the middle of the page using Grid.
Named grid areas allow you to create more readable layouts.
Example:
<style>
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
gap: 10px;
}
.header { grid-area: header; background: lightgreen; }
.sidebar { grid-area: sidebar; background: lightblue; }
.main { grid-area: main; background: lightcoral; }
.footer { grid-area: footer; background: lightgray; }
</style>
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
Practice Task:
Design a typical webpage layout with a header, sidebar, main content, and footer.
CSS Grid is a powerful system for 2D layouts.
Basic properties:
Example:
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background: lightblue;
padding: 20px;
}
</style>
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
Practice Task:
Create a three-column image gallery using Grid.
More useful properties:
Practice Task:
Build a responsive card layout using flex-wrap so cards move to the next line on smaller screens.