Hey everyone!!
Today’s session is all about clearing doubts from yesterday’s project (the product card) and going deep into the most important CSS topics you need for interactive designs: transition, transform, translate, and an extra powerful layout tip using CSS Grid. Plus, I’ll walk you through how to push your project to GitHub so you can start building your portfolio!!
||Recap||:Yesterday's Project Product-Card
1.A card container
2.Product image
3.Title and price
4.Buy button
Today, let’s focus on how to add smooth animations, improve layouts, and bring your code into Git.
Important CSS Topics Explained:
1.Transition:
Purpose: Smoothly animate changes in CSS properties.
Syntax:
transition: property duration timing-function delay;
||Example:
.card:hover{
transform: translate(-0.5s);
}
.card:hover img{
transform: scale(0.5s);
}
→ When you hover, the card and image moves gradually over 0.5s seconds.
2.Transform:
Purpose: Apply visual transformations (scale, rotate, translate).
||Example:
.card:hover {
transform: scale(1.05);
}
→ Makes the card grow 5% bigger when hovered.
3.Translate:
Purpose: Move an element along the X or Y axis.
||Example:
.box:hover {
transform: translateX(20px);
}
→ Moves the box 20px to the right on hover.
4.Grid Layout:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
Purpose: Create a responsive grid that automatically adjusts the number of columns based on available space.
Explanation:
auto-fit: Automatically fills the row with as many columns as possible.
minmax(200px, 1fr): Each column is at least 200px wide but can grow to fill remaining space equally.
||Example:
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
→ This makes sure your product cards look great on all screen sizes!
Bonus: Pushing Your Project to GitHub
Here’s a quick guide to push yesterday’s product card project to GitHub:
1.Initialize Git:
git init
git add .
git commit -m "Initial commit"
2.Create a new repo on GitHub (go to github.com → New Repository)
3.Connect your local repo:
git remote add origin https://github.com/yourusername/product-card.git
git branch -M main
git push -u origin main
[ ]Recap of Today:
- We cleared doubts from the product card.
- We learned transitions, transforms, translate, and responsive grids.
- We practiced using Git to push projects online.
SOCIAL SHARE CARD GENERATOR