CSS Advanced: Animations, Responsive Design & Best Practices

May 27, 2025

CSS, Animations, Responsive Design

Syifa Fauziyah Arizal

Master advanced CSS techniques including animations, transitions, responsive units, and professional styling best practices.

"If HTML is the foundation, CSS Card 4 is like Instagram filters for your website. Making it alive, moving, and adaptive."

🎯 Pseudo-Class & Pseudo-Element

🔹 Pseudo-Class (`:`)

Used to style elements based on their state (when clicked, hovered, etc).

Example	Function
`:hover`	When element is touched/hovered
`:focus`	When element is active (like clicked input)
`:first-child`	First child of parent
`:nth-child(2)`	2nd child

CSS


button:hover {
  background-color: hotpink;
  color: white;
}

🔹 Pseudo-Element (`::`)

Styles part of an element, not the whole element.

Example	Function
`::before`	Add content before element
`::after`	Add content after element
`::placeholder`	Style input placeholder

CSS


h1::after {
  content: " 🚀";
  color: orange;
}

✨ Transitions & Light Animations

🔧 `transition`

Creates smooth effects when properties change.

CSS


.box {
  transition: all 0.3s ease;
}
.box:hover {
  transform: scale(1.1);
  background-color: #00f;
}

Zoom effect on hover. Smooth and soft, not like Harry Potter magic 🧙‍♂️

🔥 `animation`

Creates repeating/regular movement using keyframes.

CSS


@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.title {
  animation: fadeIn 1s ease-in;
}

📏 Responsive Units

🌐 Popular Units:

Unit	Function
`px`	Fixed size
`%`	Relative to parent element
`em`	Relative to parent's font size
`rem`	Relative to root (html)
`vw` / `vh`	% of viewport width/height

CSS


.container {
  width: 80vw;
  font-size: 1.2rem;
}

🧠 Best practice: use rem for text, vw/% for layout. Responsive = YESSS 🔥

🎨 Responsive Design + Media Query

media query = way to create different displays for different screen sizes.

CSS


@media (max-width: 600px) {
  h1 {
    font-size: 24px;
    text-align: center;
  }
}

Mobile user? Display automatically neat. Laptop user? Still looks cool.

🧼 Styling Best Practices (Must Know to Go Pro)

Tip	Explanation
Use classes, avoid styling tags directly like `<h1>`	More flexible
Clear class names (`.btn-primary`)	Less confusing
Reuse classes, avoid copy-paste styles	DRY: Don't Repeat Yourself
Use CSS reset/normalize	Consistent display across browsers
External CSS > inline/internal	Cleaner and more scalable

📌 Closing Thoughts from Me - SICODER 💻🌱

Hi! I'm Syifa, and all the material I share here is what I've learned from SCRATCH.

I started not knowing what <div> was, why we need <head>, or why CSS could change text colors 😅 But little by little I learned - through videos, articles, and of course... lots of trial and error until the errors disappeared 😭

Everything I share here (from HTML Card Part 1–2 to CSS Card Part 1–4) is my own recap and understanding. I try to explain it in a way I understand and like, so you readers can feel: "Oh, it can be explained this simply."

🎯 I believe:
Learning to code isn't about who's fastest, but who's consistent and doesn't give up.

If you're also learning HTML & CSS - from scratch, from knowing nothing - I hope this content can be your learning companion too.

Don't be afraid to start from the bottom, everyone who's good was once stuck on just <br> 😆

🎯 Pseudo-Class & Pseudo-Element

🔹 Pseudo-Class (:)

🔹 Pseudo-Element (::)