Forem: Munin Borah

Day 19/200 (Full stack)

Munin Borah — Fri, 30 May 2025 02:18:21 +0000

Title: Day 19/200 – Mastering CSS Transitions and Transforms (With Easy Examples)

Hey everyone! Today was Day 19 of my 200-day journey to becoming a full stack developer. I focused on learning two powerful CSS properties: transition and transform. They might sound a bit fancy, but they’re actually super useful and easy to understand once you get the hang of them. Let’s break them down step by step!

🟢 What are CSS Transitions?

CSS transitions allow you to smoothly change property values over a specific duration. Instead of an abrupt change, transitions create an animation-like effect. Think of them as a gentle way to move from one state to another.

Basic Syntax:

transition: property duration timing-function delay;

property – the CSS property you want to animate.
duration – how long the animation lasts (e.g., 0.3s or 300ms).
timing-function – how the animation progresses (e.g., ease, linear, ease-in, etc.).
delay – how long to wait before starting the animation.

Simple Example: Hover Button

<button class="btn">Hover Me</button>

.btn {
  background-color: skyblue;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: coral;
}

✅ What’s happening?
When you hover over the button, the background color smoothly changes from skyblue to coral over 0.3 seconds.

🟢 CSS Transforms – Moving and Shaping Elements

Transforms let you visually change an element’s appearance: you can move it, rotate it, scale it up or down, or even skew it.

Basic Transform Properties:

translateX(px) / translateY(px) – Move the element along the X or Y axis.
rotate(deg) – Rotate the element.
scale(scalar) – Resize the element (scale up or down).
skew(deg) – Tilt the element.

Simple Example: Scaling an Image

<img class="image" src="https://via.placeholder.com/150" alt="sample image">

.image {
  transition: transform 0.3s ease;
}

.image:hover {
  transform: scale(1.2);
}

✅ What’s happening?
When you hover over the image, it grows 1.2 times bigger, creating a zoom-in effect.

🟢 Putting Transitions and Transforms Together

The magic really happens when you combine transitions and transforms. Let’s say you want to make a button that rotates slightly and changes color when hovered over.

Example: Animated Button

<button class="fancy-btn">Hover Over Me!</button>

.fancy-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.fancy-btn:hover {
  background-color: #45a049;
  transform: rotate(5deg);
}

✅ What’s happening?
When you hover over the button, it:

Changes color from green to a darker green.
Rotates by 5 degrees, adding a playful effect!

🟢 More Practical Examples!

Let’s look at a few more examples so you can see how flexible these properties are.

1️⃣ Smooth Sidebar Menu

<div class="sidebar">Sidebar Content</div>

.sidebar {
  width: 200px;
  background: #333;
  color: #fff;
  transition: transform 0.3s ease;
  transform: translateX(-100%);
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
}

.sidebar.active {
  transform: translateX(0);
}

// JavaScript to toggle sidebar
document.querySelector('.sidebar').classList.toggle('active');

✅ When the .active class is added to .sidebar, it smoothly slides in from the left!

2️⃣ Rotating Card on Hover

<div class="card">Card</div>

.card {
  width: 100px;
  height: 100px;
  background: pink;
  transition: transform 0.5s ease;
}

.card:hover {
  transform: rotate(15deg);
}

✅ The card tilts slightly to create a dynamic effect.

🟢 Key Takeaways

Transitions = Smooth changes in CSS property values over time.
Transforms = Visually alter an element (move, rotate, scale, skew).
Combine both for cool, interactive effects.

These simple concepts can make your web pages feel alive and interactive without needing complex JavaScript. 🎉

🎯 Next Steps: Moving to JavaScript!

After mastering these two CSS properties, I’m excited to dive into JavaScript soon. JavaScript will let me add even more dynamic behavior to my websites—like toggling classes, creating animations, or responding to user interactions.

Stay tuned for tomorrow’s update!

Final Words
CSS transitions and transforms might sound intimidating at first, but with simple examples and practice, they become second nature. Give these examples a try, tweak them, and watch your web pages come to life!

Day 17&18/200 (Full stack)

Munin Borah — Thu, 29 May 2025 02:03:10 +0000

Day 17 & 18/200 (Full Stack)

🌟 Day 17 & 18 of 200 Days of Code: Mastering CSS Animations

Not every day has to be a marathon of learning new concepts. Some days are about diving deep into a single topic and getting hands-on experience. On Day 17 & 18, I focused on CSS animations, a key part of front-end web development.

By the end of these two days, I gained a solid understanding of how to add smooth, engaging animations to websites using just CSS — no JavaScript required!

☁️ Understanding CSS Animations

CSS animations allow you to add movement and effects to web elements. They’re an excellent way to create engaging user experiences, whether it’s for buttons, images, or entire page transitions.

📌 Syntax:

@keyframes animation-name {
  from {
    property: value;
  }
  to {
    property: value;
  }
}

.element {
  animation: animation-name duration timing-function;
}

🎨 Key Concepts in CSS Animations

1. Keyframes: The Core of Animations

The @keyframes rule is what powers CSS animations. It defines how an element will change over time. The from and to values represent the start and end points of the animation.

✅ Example:

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slideIn 2s ease-in-out;
}

This makes an element slide from the left to its original position over 2 seconds.

2. Animation Timing and Duration

The animation-duration property defines how long the animation will take, and the animation-timing-function controls the speed curve.

✅ Example:

.element {
  animation: slideIn 2s ease-in-out;
}

ease-in-out: starts slow, speeds up in the middle, and slows down at the end.
Other timing functions: linear, ease-in, ease-out.

3. Repeating and Delaying Animations

You can make animations repeat infinitely or delay them before they start.

✅ Example:

.element {
  animation: slideIn 2s ease-in-out infinite;
}

This will repeat the animation indefinitely.

🔍 Advanced Techniques in CSS Animations

1. Combining Animations

You can stack multiple animations on the same element to create more complex effects. This involves using multiple keyframes for each effect.

✅ Example:

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.element {
  animation: fadeInSlide 2s ease-in-out;
}

This combines a fade-in effect with a slide-in effect.

2. Hover Effects

CSS animations can be triggered on hover, which is great for interactive elements like buttons.

✅ Example:

button {
  background-color: #3498db;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

button:hover {
  transform: scale(1.1);
  background-color: #2980b9;
}

This effect increases the button’s size and changes its color when the user hovers over it.

3. Using Transforms for Smooth Animations

The transform property helps with animations like moving, rotating, or scaling elements.

✅ Example:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: rotate 2s linear infinite;
}

This creates a loading spinner that rotates indefinitely.

🎯 Why CSS Animations Matter

CSS animations aren’t just visually appealing; they also improve user experience. Here’s why:

Engagement: Animations make a website feel more interactive and polished.
Guidance: They can highlight important elements and help guide the user’s attention.
Feedback: Animations are great for providing instant feedback on user actions, like hovering over buttons or submitting forms.

🧘‍♂️ A Small Win is Still a Win

Some days are for major breakthroughs, and other days are about refining what you already know. I didn’t build anything huge on these two days, but I got hands-on experience with CSS animations and applied what I learned to real-world examples.

I’ve definitely gained a deeper understanding of how to use animations in web development, and it’s a skill I’m eager to keep building on.

💡 Quick Recap

✅ Key Concepts I Learned:

How to create animations using @keyframes.
Controlling timing with animation-duration and animation-timing-function.
Applying animations to hover states and interactive elements.
Combining animations for more complex effects.
Using transformations to move, rotate, and scale elements.

📚 Resources to Dive Deeper

MDN Web Docs: CSS Animations
CSS Tricks: A Complete Guide to CSS Animation

👀 What's Next?

I’m excited to keep exploring more advanced animation techniques and applying them to my projects. Next, I might experiment with CSS transitions or dive deeper into responsive design.

What’s your favorite CSS animation effect? Let me know in the comments! I’d love to hear about your experiences.

Until tomorrow, happy coding! 💻

#CSS #WebDevelopment #FrontendDev #100DaysOfCode #CodingJourney #LearnToCode

Day 16/200 (Full stack)

Munin Borah — Tue, 27 May 2025 01:01:14 +0000

🌟 Day 16 of 200 Days of Code: Keeping It Light, Staying Consistent

Not every day has to be packed with hours of coding and dozens of new concepts. Today was light, but consistent — and that’s what truly matters in a long-term journey like this one.

On Day 16 of my full-stack journey, I focused on just two powerful features in CSS:

Box shadows using the box-shadow property
CSS variables (also called custom properties)

Even in just a short session, I learned how these small tools can make a big visual difference and improve my workflow.

☁️ Adding Depth with CSS `box-shadow`

The box-shadow property lets you add drop shadows to elements, giving them a sense of depth and elevation — a simple way to make your UI look more polished.

📌 Syntax:

box-shadow: offset-x offset-y blur-radius color;

You can also add spread and inset values:

box-shadow: offset-x offset-y blur-radius spread-radius color inset;

✅ Basic Example:

.card {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}

This adds a soft gray shadow offset 4px to the right and 4px down.

🎨 Multiple Shadows:

You can even stack multiple shadows!

button {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1),
              -2px -2px 5px rgba(255,255,255,0.7);
}

This creates a subtle 3D, neumorphic-style effect.

🔍 Inset Shadow:

input {
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}

inset makes the shadow appear inside the element, often used in inputs or cards for inner glow effects.

🎯 Introducing CSS Variables (Custom Properties)

CSS variables allow you to define values once and reuse them across your styles — a game-changer for consistency and maintainability in large projects.

📌 Syntax:

:root {
  --primary-color: #3498db;
  --card-padding: 20px;
}

.card {
  background-color: var(--primary-color);
  padding: var(--card-padding);
}

✅ Why CSS Variables Are Awesome:

Easy to update theme colors or layout settings
Great for dark/light modes
Reduces repetition in your code

💡 Local vs Global Variables:

/* Global */
:root {
  --text-color: #333;
}

/* Local */
.container {
  --text-color: #000;
  color: var(--text-color); /* uses local value */
}

The value of a CSS variable can be overridden within a specific selector, making them very flexible.

🧘‍♂️ A Small Win Is Still a Win

Some days are for big breakthroughs, others are just about showing up. Today, I learned something new, practiced what I learned, and kept the momentum going. That’s what progress looks like.

“You don’t have to be extreme, just consistent.”

Tomorrow, I might dig deeper into CSS transitions or responsive design — but for now, I’m glad I kept the streak alive.

💡 Quick Recap

✅ Learned how to use box-shadow to create depth and style
✅ Explored CSS variables for more maintainable and scalable code

📚 Resources to Dive Deeper

👀 What's Next?

Have you used box-shadow creatively in your projects? Tried out CSS variables in theming? Let me know in the comments or share your tips!

Until tomorrow, happy coding! 💻

#CSS #WebDevelopment #FrontendDev #100DaysOfCode #CodingJourney #LearnToCode

Day 15/200 (Full stack)

Munin Borah — Mon, 26 May 2025 01:07:59 +0000

📱 Day 15 of 200 Days of Code: Understanding CSS Media Queries

Today was a lighter day in my full-stack learning journey — Day 15 out of 200. I didn’t go all out because, honestly, I’m running low on sleep 💤. But progress is progress, and I still learned something valuable:

✅ CSS Media Queries — the backbone of responsive web design.

Even if it was a small step, learning about media queries opened the door to building websites that look great on any screen size — from tiny smartphones to massive desktop monitors. Let’s break it down in a way that’s easy to understand (especially if you’re just starting out too).

🌐 What Are CSS Media Queries?

Media queries are like rules that tell your CSS:
"Hey, only apply these styles if the screen size (or device type) meets these conditions!"

They are essential for responsive design, meaning your website adapts to different screen sizes and devices — smartphones, tablets, laptops, etc.

🔧 Basic Syntax of a Media Query

Here’s the simplest structure of a media query:

@media (condition) {
  /* CSS rules go here */
}

A real-world example:

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

📱 This means:

“If the screen width is 768 pixels or less (tablet or mobile), change the background color to light blue.”

🧪 Why Use Media Queries?

Without media queries, your layout might look perfect on a desktop — but completely broken on a mobile phone.

Media queries help you:

Adjust font sizes for smaller screens
Rearrange layouts for vertical vs horizontal devices
Hide or show elements based on screen width
Provide better user experience across all devices

📊 Common Use Cases for Media Queries

Here are a few things you can do using media queries:

1. Responsive Text Size

body {
  font-size: 18px;
}

@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
}

💡 Reduces font size slightly on small screens for better readability.

2. Hide Navigation Menu on Mobile

.navbar {
  display: block;
}

@media (max-width: 480px) {
  .navbar {
    display: none;
  }
}

🧭 You might hide a full-size navbar on small screens and replace it with a hamburger menu using JavaScript or CSS tricks.

3. Stack Columns on Small Screens

.row {
  display: flex;
}

.column {
  width: 50%;
}

@media (max-width: 768px) {
  .column {
    width: 100%;
  }
}

📱 Two columns on desktop become a stacked layout on mobile — simple and effective.

🔁 Multiple Media Queries

You can also use multiple breakpoints to adjust your layout across various devices:

/* Desktop */
@media (min-width: 1024px) {
  /* styles */
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  /* styles */
}

/* Mobile */
@media (max-width: 767px) {
  /* styles */
}

This is often how responsive designs are handled in real-world websites or when using CSS frameworks like Bootstrap or Tailwind CSS.

🧠 Key Terms to Remember

max-width: Applies styles if the screen is less than or equal to a certain width.
min-width: Applies styles if the screen is greater than or equal to a certain width.
orientation: Can be landscape or portrait.
hover, pointer, resolution, and more are advanced features of media queries.

😅 A Real Talk Moment

Today wasn’t a power-packed day. I was tired and didn’t push too hard — but I still showed up and learned something. That’s the real win.

Learning to code isn’t just about going 100% every single day. It’s about consistency. Even a small concept like media queries can unlock powerful results in your projects.

🔗 Want to Learn More?

#CodingJourney #100DaysOfCode #CSS #ResponsiveDesign #WebDevelopment #MediaQueries

Day 14/200 (Full stack)

Munin Borah — Sun, 25 May 2025 11:38:25 +0000

🧠 Day 14 of 200 Days of Code: Leveling Up My CSS Skills

As part of my 200-day full-stack development journey, Day 14 was all about diving deeper into CSS — the language that gives life and layout to web pages. Today, I focused on three key concepts that are essential for building responsive and structured layouts:

CSS Sizing Units: px, em, rem, %, vh, vw
float and clear properties
Flexbox: The modern way to build flexible layouts

Whether you're just starting out or need a refresher, here's what I learned — with clear explanations and examples to help you get up to speed.

📏 CSS Sizing Units Explained

CSS units define how elements are sized — everything from fonts to containers. Here are the most common ones:

1. `px` – Pixels (Absolute Unit)

Pixels are the most straightforward unit. They’re fixed and don’t scale with the user’s browser settings or screen size.

p {
  font-size: 16px;
}

2. `em` – Relative to Parent Element

1em equals the font size of the parent. So if the parent has font-size: 16px, then 1em = 16px.

div {
  font-size: 16px;
}

p {
  font-size: 1.5em; /* 24px */
}

3. `rem` – Relative to Root Element (`html`)

rem is more predictable than em because it always refers to the root element (usually html).

html {
  font-size: 16px;
}

p {
  font-size: 2rem; /* 32px */
}

4. `%` – Percentage

Used to size elements relative to their parent’s dimensions.

div {
  width: 50%; /* Half the width of the parent */
}

5. `vw` and `vh` – Viewport Width and Height

1vw = 1% of the viewport width
1vh = 1% of the viewport height

div {
  width: 100vw; /* Full width of the browser window */
  height: 100vh; /* Full height of the browser window */
}

🧱 CSS `float` and `clear`

Before Flexbox and Grid, float was one of the few ways to create layouts.

✅ What is `float`?

It allows elements to float left or right, letting text and other inline content wrap around them.

<img src="image.jpg" style="float: left; margin-right: 10px;" />
<p>This text will wrap around the image.</p>

🧼 What is `clear`?

The clear property prevents elements from flowing around floated elements.

.clearfix {
  clear: both;
}

You might see this pattern:

<div style="float: left; width: 50%;">Left</div>
<div style="float: right; width: 50%;">Right</div>
<div style="clear: both;"></div>

📝 Pro Tip: Float is mostly outdated for layout purposes. It’s better used for wrapping text around images. For layout, use Flexbox or CSS Grid.

🎯 Intro to Flexbox – Modern CSS Layout Made Easy

Flexbox is one of the most powerful features in modern CSS. It simplifies layout design and handles spacing, alignment, and reordering — all without hacks.

✅ Flexbox Basics

To use Flexbox, set a container’s display property to flex.

.container {
  display: flex;
}

All child elements (flex items) will be laid out in a row by default.

🧰 Common Flexbox Properties

justify-content: Aligns items along the main axis
align-items: Aligns items along the cross axis
flex-direction: Changes the direction (row or column)
flex-wrap: Allows items to wrap to a new line

💡 Example: Simple Flex Layout

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100px;
}

.box {
  background-color: #4caf50;
  padding: 20px;
  color: white;
  font-weight: bold;
}

This will display three boxes spaced evenly across the container, vertically centered.

If you're on your own learning path, don’t rush. Play around with these concepts. Try small projects. The more you experiment, the more everything will start to click.

📚 Resources to Learn More

💬 What About You?

Have you used Flexbox or em/rem in your projects? Still struggling with floats? Let’s talk about it in the comments.

Day 12 & 13 / 200 (Full Stack)

Munin Borah — Sat, 24 May 2025 01:04:58 +0000

For Days 12 and 13 of my full stack journey, I focused on understanding the CSS position property. It controls how elements are placed on a page, and it’s more complex than it looks at first. Here's what I learned, along with simple examples:

✅ `position: static`

This is the default value for all elements.
The element stays in the normal flow of the document.
You can’t move it using top, left, right, or bottom.

📌 Example:

<div style="position: static; top: 20px;">I won’t move</div>

Even though top: 20px is written, the element won’t move at all.

✅ `position: relative`

The element stays in the flow, but now you can move it.
It moves relative to its original spot.

📌 Example:

<div style="position: relative; top: 20px; left: 30px;">I moved</div>

This will move the element 20px down and 30px to the right, from where it was originally placed.

✅ `position: absolute`

Removes the element from the normal flow.
Positions it based on the nearest parent that is not static.
If there’s no positioned parent, it will position based on the <body>.

📌 Example:

<div style="position: relative;">
  <div style="position: absolute; top: 0; left: 0;">I'm inside</div>
</div>

Here, the inner box is absolutely positioned inside the outer div. It will stick to the top-left corner of the parent.

✅ `position: fixed`

Removes the element from the flow.
It stays fixed to the viewport (the screen).
Doesn’t move when you scroll.

📌 Example:

<div style="position: fixed; top: 0; left: 0; background: black; color: white;">Fixed Header</div>

This element stays stuck to the top-left corner of the screen, even if you scroll the page.

✅ `position: sticky`

A mix of relative and fixed.
Starts off like a normal element.
Once you scroll past it, it sticks to a position (like the top).

📌 Example:

<h2 style="position: sticky; top: 0; background: white;">Sticky Heading</h2>

As you scroll, this heading will stick to the top of the page until its section scrolls out of view.

💭 Final Thought

I’m moving slow, but I’m not quitting.

Day 10,11 / 200 (Full stack)

Munin Borah — Thu, 22 May 2025 01:34:22 +0000

Today's progress:
✅ Learned and complete CSS box model. margin, padding, border etc.
✅ Learned about CSS Display property. Block, inline, inline-block element.

ya, only this much today.

Day 9/200 (Full stack)

Munin Borah — Tue, 20 May 2025 12:39:21 +0000

Today's progress:

learned colors in CSS.
learned CSS box model (basic), margin, padding, border.
Build a simple project using this concept for practice.

its pretty fun to learn CSS.

Day 8/200 (Full stack)

Munin Borah — Mon, 19 May 2025 01:44:23 +0000

Today I finally got into CSS, and not gonna lie... this is where stuff starts looking actually cool. My HTML pages don’t look like plain black-and-white essays anymore 😂

👨‍🎨 What Even Is CSS?

CSS is basically how websites get their style—colors, fonts, spacing, layout—all that good stuff.

HTML builds the skeleton. CSS makes it pretty.

🎯 Stuff I Learned Today

➤ 1. How to Use CSS

There are 3 ways to add CSS:

Inline – Right inside the HTML tag. Kinda messy.
Internal – Inside a <style> tag in the HTML file.
External – Linking a .css file. This one’s the cleanest and what I’ll probably use most.

➤ 2. CSS Selectors

Selectors = telling CSS what to style.

Some basics I played with:

p → all <p> tags
.className → any element with that class
#idName → a specific element with that ID

Pretty simple to start, but I know this can get wild later on.

➤ 3. Fonts & Text Styling

Fonts change everything. I messed with:

font-family
font-size
font-weight
line-height

Just changing the font and spacing made my practice page feel way less boring.

🛠️ Mini Practice Project

I threw together a tiny HTML + CSS page just to try all this out. Nothing fancy — just some text, a heading, and styles to make it look less like a school assignment 😅

🧠 Thoughts

CSS is honestly pretty fun so far. Way more visual than HTML. I'm excited to keep going — maybe Flexbox or Grid next? Idk, we’ll see what’s up tomorrow.

If you're also learning full stack or just starting out, feel free to say hi!

“Make it work, then make it look good.” – me, after struggling with fonts for 10 minutes

100DaysOfCode #Day8 #WebDev #TeenDev

Day 7/200 (full stack)

Munin Borah — Sun, 18 May 2025 02:40:09 +0000

Today's progress:

HTML completed.
NOW moving to CSS
Total build 7 projects to practice HTML.

Day 6/200 (Full stack)

Munin Borah — Sat, 17 May 2025 01:01:16 +0000

Today's progress:
✅ Completed HTML.
✅ Built two basic websites using HTML and styled via DeepSeek AI:

1.Portfolio website.
2.Blog site.

-These all are my first website. so, ya its not perfect but its better than nothings.

-Everything uploaded to GitHub.

Will start CSS soon.

Day 5/200 (Full stack)

Munin Borah — Fri, 16 May 2025 00:45:50 +0000

Today's progress:
✅Learned some HTML tags.
✅ HTML course completed.
✅Build my first project: a Travel booking form, but styling is done by gpt.

Let's build some project.
Taking small steps and moving forward.

Forem: Munin Borah

Day 19/200 (Full stack)

🟢 What are CSS Transitions?

Basic Syntax:

Simple Example: Hover Button

🟢 CSS Transforms – Moving and Shaping Elements

Basic Transform Properties:

Simple Example: Scaling an Image

🟢 Putting Transitions and Transforms Together

Example: Animated Button

🟢 More Practical Examples!

1️⃣ Smooth Sidebar Menu

2️⃣ Rotating Card on Hover

🟢 Key Takeaways

🎯 Next Steps: Moving to JavaScript!

Day 17&18/200 (Full stack)

☁️ Understanding CSS Animations

🎨 Key Concepts in CSS Animations

1. Keyframes: The Core of Animations

2. Animation Timing and Duration

3. Repeating and Delaying Animations

🔍 Advanced Techniques in CSS Animations

1. Combining Animations

2. Hover Effects

3. Using Transforms for Smooth Animations

🎯 Why CSS Animations Matter

🧘‍♂️ A Small Win is Still a Win

💡 Quick Recap

📚 Resources to Dive Deeper

👀 What's Next?

Day 16/200 (Full stack)

🌟 Day 16 of 200 Days of Code: Keeping It Light, Staying Consistent

☁️ Adding Depth with CSS box-shadow

📌 Syntax:

✅ Basic Example:

🎨 Multiple Shadows:

🔍 Inset Shadow:

🎯 Introducing CSS Variables (Custom Properties)

📌 Syntax:

✅ Why CSS Variables Are Awesome:

💡 Local vs Global Variables:

🧘‍♂️ A Small Win Is Still a Win

💡 Quick Recap

📚 Resources to Dive Deeper

👀 What's Next?

Day 15/200 (Full stack)

📱 Day 15 of 200 Days of Code: Understanding CSS Media Queries

🌐 What Are CSS Media Queries?

🔧 Basic Syntax of a Media Query

🧪 Why Use Media Queries?

📊 Common Use Cases for Media Queries

1. Responsive Text Size

2. Hide Navigation Menu on Mobile

3. Stack Columns on Small Screens

🔁 Multiple Media Queries

🧠 Key Terms to Remember

😅 A Real Talk Moment

🔗 Want to Learn More?

Day 14/200 (Full stack)

🧠 Day 14 of 200 Days of Code: Leveling Up My CSS Skills

📏 CSS Sizing Units Explained

1. px – Pixels (Absolute Unit)

2. em – Relative to Parent Element

3. rem – Relative to Root Element (html)

4. % – Percentage

5. vw and vh – Viewport Width and Height

🧱 CSS float and clear

✅ What is float?

🧼 What is clear?

🎯 Intro to Flexbox – Modern CSS Layout Made Easy

✅ Flexbox Basics

🧰 Common Flexbox Properties

💡 Example: Simple Flex Layout

📚 Resources to Learn More

💬 What About You?

Day 12 & 13 / 200 (Full Stack)

✅ position: static

✅ position: relative

✅ position: absolute

✅ position: fixed

☁️ Adding Depth with CSS `box-shadow`

1. `px` – Pixels (Absolute Unit)

2. `em` – Relative to Parent Element

3. `rem` – Relative to Root Element (`html`)

4. `%` – Percentage

5. `vw` and `vh` – Viewport Width and Height

🧱 CSS `float` and `clear`

✅ What is `float`?

🧼 What is `clear`?

✅ `position: static`

✅ `position: relative`

✅ `position: absolute`

✅ `position: fixed`

✅ `position: sticky`