CSS Advanced: Animations, Responsive Design & 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 |
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 |
h1::after {
content: " 🚀";
color: orange;
}
✨ Transitions & Light Animations
🔧 transition
Creates smooth effects when properties change.
.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.
@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 |
.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.
@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> 😆
🚀 What's Next?
Meet JavaScript
"HTML is the skeleton, CSS is the outfit... JavaScript? That's the soul!"
What is JavaScript? · Why JavaScript is important in web dev · How to use JS in HTML · etc
🚀 What's Next?
Logic, Conditions & Loops
"This is where your website starts to 'think'."
Branching: if, else, else if · Switch case (for alternative branching logic) · etc
🚀 What's Next?
Interactions & Basic DOM
"Time to make your website alive! Can click, change text, and control display directly from script."
What is DOM (Document Object Model) · Event Listeners (click, input, etc) · etc
📍Stay tuned!
📩 Just DM if you're also learning to code - we can grow together!
