DEV Community

Sathish 226
Sathish 226

Posted on

Day 3 Blog: Deep Dive into CSS Transitions, Transforms, Translate, and Grid (with Git Guide)

#webdev #html #css #linux

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);
        }
Enter fullscreen mode Exit fullscreen mode

→ 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);
}
Enter fullscreen mode Exit fullscreen mode

→ 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);
}
Enter fullscreen mode Exit fullscreen mode

→ Moves the box 20px to the right on hover.

4.Grid Layout:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

→ This makes sure your product cards look great on all screen sizes!

Image description

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

[ ]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.

Top comments (0)