Forem: bblackwind

Stop Hardcoding Pixels: A Developer's Guide to CSS Units (px, rem, vh, vw)

bblackwind — Mon, 09 Mar 2026 13:47:29 +0000

We have all been there. You spend hours writing the CSS for a beautiful, perfectly aligned UI on your external monitor. You feel like a frontend master. Then, you open the dev tools, toggle the device toolbar to a mobile viewport, and watch your entire layout implode.

Containers overlap. Text overflows. The horizontal scrollbar of death appears.

The culprit is almost always the same: **hardcoding widths and heights in pixels.

Welcome to Day 19 of my #100DaysOfCode journey into Full-Stack Development. Today, I tackled the core of Responsive Web Design by diving deep into the alphabet soup of CSS units. If you want to build scalable interfaces, you have to transition from rigid pixels to fluid math.

Here is the breakdown of how these units actually work, and when you should be using them.

The Rigid Foundation: `px` (Pixels)

The pixel is an absolute unit. It is fixed, device-dependent, and completely stubborn.

When you define something in pixels, you are giving the browser an unyielding command. If you set a container to 800px, it will stay 800px even if the user's screen is only 400px wide.

When to use it: Reserve px for elements that should absolutely never scale. Think 1px borders, subtle box-shadows, or maybe a fixed-size avatar image. Do not use it for layout wrappers or typography.

.card {
  /* Good use of px */
  border: 1px solid #333;
  border-radius: 8px;

  /* Bad use of px - will break on small screens */
  width: 600px; 
}

The Relatives: Designing for Fluidity

To build modern web apps, elements need to adapt to their environment.

1. Percentages (%)

Percentages size an element relative to its parent container. If the parent shrinks, the child mathematically shrinks with it.

.parent-container {
  width: 100%; /* Takes full width of the screen */
}

.child-element {
  width: 50%; /* Will always be half the size of the parent */
}

2. Viewport Width (vw) & Viewport Height (vh)

The "viewport" is simply the visible area of the web page on the screen.

1vw = 1% of the viewport's total width.

1vh = 1% of the viewport's total height.

If you are building a landing page and want the hero section to take up the exact full screen before the user starts scrolling, viewport units are the answer.

.hero-section {
  width: 100vw;
  height: 100vh;
  background-color: #0f0f0f;
}

3. Viewport Maximum (vmax) & Viewport Minimum (vmin)

These are incredibly powerful but rarely talked about. The browser looks at the viewport's width and height, and then:

vmin: Takes 1% of whichever dimension is smaller.

vmax: Takes 1% of whichever dimension is larger.

These are fantastic for keeping elements (like a central square UI component) perfectly proportioned, regardless of whether a user is holding their device in portrait or landscape mode.

The Typography Kings: em and rem

When it comes to font sizes, margins, and padding, em and rem are the absolute industry standards for building accessible and scalable interfaces.

The em Unit (The Multiplier)

An em unit sizes an element relative to the font size of its direct parent element.

If a parent container has a font size of 20px, and you set the child's font size to 2em, the browser calculates 2 * 20 = 40px.

.article-body {
  font-size: 20px; 
}

.article-quote {
  font-size: 2em; /* Evaluates to 40px */
  margin-top: 1em; /* Evaluates to 40px, because it is relative to its OWN font size! */
}

Note: Because em values multiply based on their parents, deeply nested components can lead to chaotic, unpredictable sizing.

The rem Unit (Root em)

This is the holy grail. rem stands for "root em." Instead of looking at the parent, it looks all the way up the DOM tree to the root font size (which is 16px by default in almost all browsers).

If you set an h1 to 3rem, it evaluates to 48px (3 * 16), no matter where it is placed in your DOM tree. It provides the predictability of pixels with the accessibility of relative units, seamlessly scaling if a user increases their default browser font size for readability.

:root {
  font-size: 100%; /* Defaults to 16px */
}

.responsive-title {
  font-size: 2.5rem; /* 40px */
}

.responsive-paragraph {
  font-size: 1rem; /* 16px */
  padding: 1.5rem; /* 24px */
}

Wrapping Up Day 19

Transitioning away from pixels takes a little bit of mental refactoring at first, but it is the defining factor between a fragile layout and a robust user interface. Embrace rem for your text and spacing, and lean on % and viewport units for your macro layouts.

Question for the Dev community:

Do you strictly use rem for your projects, or do you still find valid use cases for em in scoped components? Let's debate in the comments!

Let's Connect!

Follow along with my #100DaysOfCode journey across my platforms:

Dev.to: bblackwind

GitHub: bblackwind

LinkedIn: Vishal on LinkedIn

X (Twitter): @VishalS25630987

Hashnode: @vishal2303

Medium: @vishal230396

YouTube: Blackwind Coding School

Instagram: Blackwind Coding School

I fought with CSS layouts for years. Then I found CSS Grid. 🤯 (Day 18)

bblackwind — Tue, 24 Feb 2026 20:34:09 +0000

If you’ve ever found yourself fighting with floats, battling absolute positioning, or writing endless media queries just to get a decent web layout... I feel your pain.

Welcome to Day 18 of my #100DaysOfCode journey! Today, I finally dove deep into CSS Grid, and honestly? It feels like cheating. I built two complete webpage designs using just Grid.

If you are still struggling with web layouts, here is the exact breakdown of the magic spells (properties) I learned today.

1. The Foundation: `display: grid;`

Before Grid, aligning items was a chore. Now, we just explicitly define the "skeleton" of our webpage.

.container {
  display: grid;
  /* Two columns, 50% width each */
  grid-template-columns: 50% 50%; 
  /* Four rows with specific heights */
  grid-template-rows: 100px 200px 500px 80px; 
}

2. Say Goodbye to Math with fr

Percentages are okay, but the fractional unit (fr) is your best friend. It represents a fraction of the leftover space.

CSS
.grid-container {
  display: grid;
  /* Divides available width into 3 equal parts (33.33% each) */
  grid-template-columns: 1fr 1fr 1fr; 
}

3. Ultimate Responsiveness: minmax()

This is easily my favorite discovery. Built-in responsiveness without writing a single @media query!

CSS
.responsive-grid {
  display: grid;
  /* Column 1 is 100px. Column 2 is AT LEAST 200px, but grows to fill remaining space */
  grid-template-columns: 100px minmax(200px, auto);
}

4. Breathing Room: Gaps

No more weird margin hacks and collapsing margin headaches.

CSS
.spaced-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;

  row-gap: 20px; 
  column-gap: 30px; 

  /* Or just use the shorthand! */
  gap: 20px 30px; 
}

Learning Grid today was a massive level-up. Building layouts feels incredibly intuitive now.

Drop a comment below: What is your favorite CSS Grid trick? 👇

Let's connect and build! 💻
🐙 GitHub: bblackwind

💼 LinkedIn: Vishal Singh

🐦 X (Twitter): @VishalS25630987

🎥 YouTube: Blackwind Coding School

📸 Instagram: @blackwindcodingschool

✍️ Hashnode: @vishal2303

👩‍💻 Dev.to: @bblackwind

📖 Medium: @vishal230396

Day 17/100: Mastering CSS Grid, Nth-Child Magic, and Text Illusions 🎨🚀

bblackwind — Mon, 23 Feb 2026 19:04:38 +0000

Hey DEV community! 👋 Welcome back to Day 17 of my #100DaysOfCode journey.

If you spend enough time writing CSS, you stop feeling like a developer and start feeling a bit like an architect (or maybe a wizard 🧙‍♂️). Today was all about structural layouts, advanced element selection, and some seriously cool text styling tricks.

Whether you are just starting out or looking to brush up on your frontend skills, here is the technical breakdown of today’s CSS deep dive!

1. The Foundation: Block vs. Inline Elements 🧱

Before getting fancy with grids, we have to understand how elements naturally behave in the browser. Every HTML element defaults to either a Block or Inline display.

[Image of CSS block vs inline elements displaying structural differences]

Block Elements (e.g., <div>, <p>, <h1>): These are the greedy elements. They take up the full width available and always force a new line.
- Benefit: Great for major structural sections (headers, footers, main content areas).
- Disadvantage: You can't naturally place them side-by-side without altering their display properties.
Inline Elements (e.g., <span>, <a>, <strong>): These are the polite elements. They only take up as much width as their content needs and sit peacefully side-by-side.
- Benefit: Perfect for wrapping specific text inside a paragraph without breaking the document flow.
- Disadvantage: You cannot set a specific width or height on them!

/* The Syntax */
.my-block {
  display: block; /* Takes up full width */
}

.my-inline {
  display: inline; /* Wraps tightly around content */
}

2. Advanced Selection: The Magic of :nth-child() 🪄

Why add ten different utility classes to your HTML when CSS can just do the math for you? The :nth-child() pseudo-class allows you to select elements based on their order inside a parent container.

I also explored :nth-last-child(), which does the exact same thing but counts from the bottom up!

The Syntax & Even/Odd Magic:
Want to style alternating rows in a table or a list? You can use mathematical formulas like 2n (for even) and 2n-1 (for odd).

CSS

/* Selects the 3rd item */
li:nth-child(3) { color: blue; }

/* Selects the 2nd item from the bottom */
li:nth-last-child(2) { color: red; } 

/* Selects all EVEN items (2, 4, 6...) */
.box:nth-child(2n) { background-color: lightgray; }

 /* Selects all ODD items (1, 3, 5...) */
.box:nth-child(2n-1) { background-color: darkgray; }

3. Demystifying CSS Grid 🎛️

One huge lightbulb moment today was understanding exactly when to use CSS Grid. While Flexbox is amazing, it is unidirectional (1-Dimensional—it handles either a main axis row OR a column).

CSS Grid is a completely different beast because it is Two-Dimensional. It allows you to build complex layouts defining both rows and columns simultaneously!

CSS

.container {
  display: grid;

  /* Creates 4 columns of specific percentages */
  grid-template-columns: 20% 50% 20% 10%; 

  /* Creates 4 rows of specific percentages */
  grid-template-rows: 30% 50% 10% 10%;
}

Boom. With just three lines of CSS, you have a completely mapped-out grid system ready for your layout.

4. Hands-on Styling: Text Illusions & Flex Shrink ✨

To wrap up the day, I got hands-on with some purely aesthetic tricks:

Text Borders (-webkit-text-stroke): You can outline your text to make it pop against any background.

Background Image on Text: By using background-clip: text; and making the text color transparent, an image will actually show through your text!

flex-shrink: 0;: Have an item inside a flex container that is getting squished when the screen resizes? This is your lifesaver. It tells the browser, "Do not shrink this element, no matter what!"

CSS

.cool-text {
  /* Gives the text a 2px solid border */
  -webkit-text-stroke: 2px #ff4500; 
  color: transparent; /* Makes the inside of the text invisible */
}

.no-squish {
  flex-shrink: 0; /* Prevents flexbox from shrinking this item */
}

Follow the Journey

Want to see the code I'm writing day-to-day? You can check out my repositories on GitHub here:
👉 bblackwind on GitHub --- https://github.com/bblackwind

What's Next?

CSS is proving to be incredibly powerful once you understand the architecture behind the layout systems. I'm excited to combine Grid and these nth-child selectors into a massive project soon!

Are you Team Flexbox or Team Grid? Let me know in the comments below! 👇

Let's Connect!

I'm documenting my entire full-stack journey in public. Follow along, say hi, or check out my other content across these platforms:

💼 LinkedIn: linkedin.com/in/vishal2303

🐦 X (Twitter): @VishalS25630987

👨‍💻 Dev.to: dev.to/bblackwind

📝 Hashnode: hashnode.com/@vishal2303

✍️ Medium: medium.com/@vishal230396

🎥 YouTube: Blackwind Coding School

📸 Instagram: @blackwindcodingschool

Day 16/100: CSS Box Model & Building a Hover-Effect Pokémon Grid

bblackwind — Sun, 22 Feb 2026 10:11:25 +0000

---
Hey DEV community! 👋 Welcome to Day 16 of my #100DaysOfCode journey.

If you're diving into full-stack development like I am, you quickly realize that HTML is just the skeleton. CSS is the magic that gives your webpage its soul and swagger. Today was all about understanding how elements take up space and how to make them interactive without relying on JavaScript.

Here’s a breakdown of what I tackled today, capped off with a fun Pokémon-themed mini-project!

1. Demystifying Padding vs. Border

One of the first real hurdles in CSS is wrapping your head around the Box Model—specifically, how different properties affect the actual size of your div containers.

Here is the golden rule I learned today:

Padding creates breathing room inside the element (pushing the content away from the edges).
Border is the actual physical wall enclosing that space.

Writing a border is incredibly straightforward. Check out this syntax:

.my-cool-box {
  /* thickness | style | color */
  border: 5px solid white; 
  padding: 20px; 
}

The Gotcha: Both padding and borders add to the total width and height of your div. If you aren't careful, slapping a 5px border on an element can unexpectedly break your perfectly aligned layout!

2. The Magic of transform: scale()

Next, I explored how to manipulate elements using the transform property. If you want to add a dynamic, modern feel to a webpage, scale() is your best friend.

The math is beautifully simple:

transform: scale(1);

= The original, default size.

transform: scale(2);

= Exactly twice the original size.

transform: scale(3);

= Three times the size.

3. Putting it Together: The Interactive Pokémon Grid

Learning theory is great, but building projects is where the real growth happens. To lock in these CSS concepts, I built a sleek, interactive Pokémon card grid!

Using the Box Model and transformations, I created a smooth hover effect. When you hover your mouse over a card:

The card gently pops out at you using transform: scale().

A stylish effect reveals the Pokémon's name.

Because I used clean CSS classes, this effect applies seamlessly across all the cards on the page. Here is a sneak peek at the CSS engine making that hover effect work:

CSS

.pokemon-card {
  transition: transform 0.3s ease-in-out; /* Makes the animation smooth */
  border: 2px solid #ccc;
}

This is where the magic happens on hover!

.pokemon-card:hover {
  transform: scale(1.1); /* Scales the card up by 10% */
  border: 2px solid #ffcb05; /* Changes border color to Pokémon Yellow */
  cursor: pointer;
}

👾 Check Out the Code!
Want to see how I built the whole thing? You can check out the full source code for the Pokémon project on my GitHub here:
👉 https://bblackwind.github.io/CSS-Effect-1/

What's Next?

Mastering these CSS fundamentals is making the transition into building complex layouts feel so much more intuitive. I'm pumped to see how these styling techniques will combine with JavaScript and React as I push forward.

What was the CSS property that finally made the "Box Model" click for you? Drop a comment below and let's discuss! 👇

Let's Connect! 🌐

I'm documenting my entire full-stack journey in public. Follow along, say hi, or check out my other content across these platforms:

💼 LinkedIn: linkedin.com/in/vishal2303

🐦 X (Twitter): @VishalS25630987

👨‍💻 Dev.to: dev.to/bblackwind

📝 Hashnode: hashnode.com/@vishal2303

✍️ Medium: medium.com/@vishal230396

🎥 YouTube: Blackwind Coding School

📸 Instagram: @blackwindcodingschool

Tags: #100DaysOfCode #CSS #WebDevelopment #Frontend #LearningInPublic #BlackwindCodingSchool

CSS Is Super Effective! ⚡️ Building a 3D Pokémon Card Interaction (Day 15)

bblackwind — Sun, 15 Feb 2026 12:39:31 +0000

Hey devs!

Welcome to Day 15 of my #100DaysOfCode journey.

Today, I didn't just want to build a layout; I wanted to build an experience. I challenged myself to create a unique Pokémon-themed interaction that breaks out of the standard "boxy" web design.

The goal? A sleek, overlapping card effect using pure CSS. No libraries, no frameworks.

🚀 See It Live

Before we dive into the code, check out the result here:

Live Demo

GitHub Repository

🛠 The Tech Stack

HTML5 for structure.
CSS3 for the magic (specifically flexbox, transforms, and clip-path).

Key CSS Tricks I Used

Here is the breakdown of how I achieved the effect:

1. Custom Shapes with `clip-path`

Standard border-radius is boring. To give the cards a sharp, "gaming" aesthetic, I used clip-path to slice the corners into polygons.


css
.card {
  /* This creates the angled cut on the corners */
  clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
  background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
}

2. The Overlap (z-index & transform)
I wanted the cards to feel like a "hand" of playing cards.

flex-wrap: nowrap: Forces the cards to stay in a single line.

transform: Used translateX and translateY to shift the cards slightly on hover without ruining the layout flow.
.card:hover {
  z-index: 100; /* Brings the active card to the front */
  transform: scale(1.05) translateY(-10px);
  box-shadow: 0px 15px 30px rgba(0,0,0,0.5);
}

3. Responsive Flow
Using flex-shrink, I ensured that the cards squish gracefully on smaller screens but maintain their aspect ratio.

👨‍💻 Get The Code
If you want to try this out or use the clip-path shapes for your own portfolio, grab the code here:

🔗 https://github.com/bblackwind/CSS-Effect-1

💭 What's Next?
I’m thinking of adding a JavaScript filter to sort them by "Fire" or "Water" type next.

Question: What was your first favorite Pokémon? Let me know in the comments! 👇

Day 11 of My Web Dev Journey — Creating a Michael Jackson Webpage with CSS Position & Styling

bblackwind — Fri, 19 Dec 2025 12:48:39 +0000

Hello everyone! 👋
Welcome back to Day 11 of my web development journey!
Today’s project was special — I designed a tribute webpage dedicated to Michael Jackson, using the CSS position property, along with font styling, box properties, classes, and IDs.
And believe me… this one made me moonwalk through some tricky CSS concepts! 😄

🌟 What I Built Today
I created a Michael Jackson Tribute Webpage that highlights:

His iconic image

A short biography

Some of his legendary songs

And a stylish footer saying “Long Live The King of Pop” 🕺

But the main focus was understanding how to perfectly place each element using the CSS position property.

🧠 Concepts I Learned Today
🎯 1. CSS Position Property
This was the heart of today’s learning.
I explored how each positioning type behaves:

Static – The default; elements flow naturally on the page.

Relative – Let’s you nudge elements slightly without breaking layout flow.

Absolute – My favorite! Used it to fix MJ’s image exactly where I wanted.

Fixed – Great for sticky headers (tried it on the “MJ Forever” banner).

Sticky – A mix of relative + fixed — fun to experiment with!

It felt like controlling a concert stage — every performer (element) had its exact spotlight position. 🎤✨

✍️ 2. Fonts and Styling
Fonts make a massive difference in how your page feels.
I used:

Google Fonts for stylish typography (perfect for a tribute theme).

Font-weight, font-size, and font-style properties to bring variety.

CSS selectors like .class and #id to target and style specific elements.

Also explored text-shadow to make the “King of Pop” title pop literally!

📦 3. Box Model Magic
No design is complete without spacing done right.
Learned how to control:

Padding — space inside the element.

Margin — space outside the element.

Border — to make the layout neat and framed.

Box-sizing — to keep things consistent when adding padding/border.

It really helped balance the layout visually and keep it responsive.

💡 My Key Takeaways
position: absolute; can be tricky — always check its parent element’s positioning.

Good font pairing can transform the vibe of your page.

The box model is the unsung hero of web design!

Using IDs and classes smartly keeps your CSS clean and readable.

🔥 The Final Result
A clean, minimal tribute page that feels classy and nostalgic — just like MJ’s music.
Next up, I’ll move towards CSS Flexbox and Layout Designing, which will make my webpages more responsive and dynamic.

Today’s task wasn’t just about coding — it was about feeling the rhythm of structure and style.
If Michael Jackson can create magic with beats, we can do the same with HTML & CSS. 😎

See you tomorrow in Day 12, where I’ll probably flex my way into Flexbox layouts!

100DaysOfCode #WebDevJourney #CSSLearning #MichaelJacksonWebpage #FrontendDevelopment #CodingInPublic

Day 10 of My Web Dev Journey — Mastering CSS Positions: Absolute, Relative, Fixed & Sticky

bblackwind — Wed, 17 Dec 2025 13:53:16 +0000

Title: Description: On Day 10, I dived deep into CSS positioning — Absolute, Relative, Fixed, and Sticky — and finally understood how elements behave when placed in different coordinate systems. Here’s how my experiments turned out.

🧭 Day 10 — The Art of CSS Positioning
Today was all about mastering the magic behind element positioning in CSS.
You know that feeling when your elements just float weirdly, and you can’t figure out why? Yeah, that’s what I wanted to fix today.

Let’s break down what I learned 👇

🎯 Absolute Position — “The Floating Element Trick”
So, I started with three colorful boxes (Box 1, Box 2, and Box 3).

Then, I gave Box 1 the CSS rule:

position: absolute;

And boom! Box 1 lifted off the layout like it just got gravity removed.

The space it left behind got filled by Box 2, and Box 3 moved up too — just like a Tetris game in motion.

Then I tried the same with Box 2 and Box 3.
For Box 3, nothing really changed since all boxes were already “out of the normal flow.”

💡 Note:
When you use position: absolute;, the element is taken out of the document flow.
Also, only elements with a position value (like relative, absolute, fixed, or sticky) can use properties like top, right, bottom, left, and z-index.
If the position is static (default), those properties do nothing.

🧩 Relative Position — “Parent Matters!”
Next, I made a setup with three boxes again:

outer (the parent)

inner (the child)

text (the grandchild)

At first, I gave text the CSS:

position: absolute;
left: 50%;

It moved to the center — but not quite. It was taking 50% of the entire screen width, not its parent’s.

Then I gave its parent (inner) this:

position: relative;

And boom 💥— the magic happened!

Now,

left: 50%

referred to the parent’s width, not the screen.
That’s when it clicked — absolute positioning works relative to the nearest positioned ancestor.

💬 Reminder:
You can’t apply two position values at the same time (like

position: absolute; position: relative;

) — only one will take effect.

🧱 Fixed Position — “The Immovable Box”
Next, I created two full-screen divs stacked vertically and added a small box named “slide”.

When I gave it:

position: fixed;
top: 10px;
right: 10px;
```


Even when I scrolled down the page — guess what?


![ ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bn06g5jqschcuf0h8po3.png)

The box stayed fixed in place, just like a sticky note on your screen.
No matter how much you scroll, a fixed element doesn’t move.

It’s commonly used for navigation bars, floating buttons, or chat icons that stay visible while scrolling.

📌 Sticky Position — “The Hybrid Mode”
Finally, I tested position: sticky;.
Though I didn’t capture a screenshot for this one, it’s basically a mix of relative and fixed.

When scrolling, the element behaves like it’s relative until it reaches a certain point, then “sticks” there like a fixed element.



```
position: sticky;
top: 0;
```


Perfect for sticky headers or section titles that stay visible while scrolling through content.

📝 Final Thoughts
Today’s practice made one thing crystal clear:

CSS positioning isn’t about memorizing — it’s about understanding how elements interact with their surroundings.

Each property — absolute, relative, fixed, sticky — has its own superpower.
And once you understand them, you can place any element exactly where you want it.

Can’t wait to explore CSS Z-index and stacking context next. Stay tuned for Day 11 of my web dev journey!

🧩 Day 9 of My 100 Days of Web Dev — CSS Gradients, Backgrounds & Parent–Child Magic!

bblackwind — Thu, 04 Dec 2025 13:07:00 +0000

Today was all about adding colors, depth, and real-world visuals to my web pages using CSS.
Slowly, I’m starting to see how design brings plain HTML to life 🎨

🎨 1. Gradients — The Art of Smooth Color Blends

CSS gradients help us create smooth color transitions without using images.
Today I explored the three major types:

🔹 Linear Gradient

Blends colors in a straight line (horizontal, vertical, or diagonal).

Syntax:


background: linear-gradient(direction, color1, color2);

Example:


background: linear-gradient(to right, blue, pink);

You can control how dominant each color is:

background: linear-gradient(to right, blue 30%, pink 70%);

🔹 Radial Gradient

Creates a gradient that spreads from the center outward, like water ripples.


background: radial-gradient(circle, red, yellow, green);

🔹 Conic Gradient

Creates a circular color sweep, similar to pie charts or color wheels.

background: conic-gradient(red, yellow, green, blue);

Gradients instantly add visual interest — I even tested them with mini demo boxes I created today 😍

🧱 2. Parent & Child Relationship in CSS

This was a big “aha!” moment for me.

When you use percentage-based height/width on a child element, it always calculates relative to the parent, not the whole page.

Example:

.parent {
  height: 400px;
  width: 400px;
  background-color: lightblue;
}

.child {
  height: 50%;
  width: 50%;
  background-color: pink;
}

Here, the child div becomes 50% of the parent, not 50% of the screen.
This is super important for responsive layouts!

🖼️ 3. Background Images & Their Properties

Adding background images with CSS is simple:

background-image: url("nature.jpg");

Then I explored the main properties:

🎯 background-size

cover (fills area, cropping allowed)

contain (fits entire image, no cropping)

auto (default)

🎯 background-position

top

center

bottom

or custom coordinates

🎯 background-repeat

no-repeat

repeat-x

repeat-y

These tools give full control over how the image looks on the page.

📏 4. Margin & Border

Small concepts with huge design impact.

➤ Margin

Creates space outside the element:

margin: 20px;

➤ Border

Defines the element’s edge:

border: 2px solid black;

You can even use:

border-radius: 50%;

to create circles and smooth corners.

💡 Reflection

Day 9 helped me understand how simple CSS rules can transform dull HTML boxes into beautiful UI components.

Gradients, background images, margins, and borders — together they make a page feel designed, not just built.

Tomorrow, I’ll be diving deeper into layouts & positioning.
Let’s keep building, one day at a time! 🚀

Day 8 – CSS Basics Explained: Styling Your First Webpage

bblackwind — Thu, 30 Oct 2025 14:55:07 +0000

Hey everyone
Welcome back to my #100DaysOfCode journey!

Today’s milestone — Day 8 — was all about exploring CSS (Cascading Style Sheets) and learning how to make boring HTML pages look awesome.
If HTML is the skeleton, CSS is the skin, clothes, and confidence

What is CSS?

CSS (Cascading Style Sheets) controls how HTML elements appear on screen.
It defines colors, fonts, spacing, and layout, giving every website its visual identity.

Why CSS matters:

It separates design from structure, keeping code clean

Helps apply consistent styling across pages

Makes websites easier to maintain and scale

Linking CSS to HTML

Before adding styles, you must connect your CSS file to HTML using the tag in the

section:

<link rel="stylesheet" href="style.css">

That one line transformed my dull page into something alive
It felt like flipping the design switch ON 🎚️

⚙️ My First CSS Boilerplate

To start clean, I built a small boilerplate to reset browser defaults.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  background-color: azure;
}

It may look simple, but this sets up a perfect foundation for all styling work ahead.

Exploring Text Properties

This is where things got fun — experimenting with how text behaves and looks.

font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: bold;
font-style: italic;
color: blue;
text-align: center;
text-transform: uppercase;

Each property gives creative control — typography is where design meets personality.

Understanding IDs vs Classes

This was one of the “Aha!” moments for me.

ID → unique, used once per element (#idname)

Class → reusable for multiple elements (.classname)

Example:

#student {
  color: blue;
}

.college {
  color: green;
}

Think of IDs as roll numbers, and Classes as groups — simple but powerful.

Using Custom Fonts (@font-face)

One of my favorite CSS tricks is using custom fonts.
I downloaded a font and connected it like this:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.ttf');
}

Now I can style my page with fonts that truly match the theme or mood of the project 🖋️

💬 Final Thoughts

Day 8 taught me that CSS is not just about colors or spacing — it’s an art form.
It lets you shape how users feel when they visit your website.

Next up → Selectors, Colors, and Layout Magic.
Can’t wait to take my designs to the next level!

💭 Question for you:
What’s your go-to CSS property when you start styling a new project? Drop it below 👇

Day 8 – CSS Basics Explained: Styling Your First Webpage

bblackwind — Thu, 30 Oct 2025 14:55:07 +0000

Hey everyone
Welcome back to my #100DaysOfCode journey!

What is CSS?

CSS (Cascading Style Sheets) controls how HTML elements appear on screen.
It defines colors, fonts, spacing, and layout, giving every website its visual identity.

Why CSS matters:

It separates design from structure, keeping code clean

Helps apply consistent styling across pages

Makes websites easier to maintain and scale

Linking CSS to HTML

Before adding styles, you must connect your CSS file to HTML using the tag in the

section:

<link rel="stylesheet" href="style.css">

That one line transformed my dull page into something alive
It felt like flipping the design switch ON 🎚️

⚙️ My First CSS Boilerplate

To start clean, I built a small boilerplate to reset browser defaults.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  background-color: azure;
}

It may look simple, but this sets up a perfect foundation for all styling work ahead.

Exploring Text Properties

This is where things got fun — experimenting with how text behaves and looks.

font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: bold;
font-style: italic;
color: blue;
text-align: center;
text-transform: uppercase;

Each property gives creative control — typography is where design meets personality.

Understanding IDs vs Classes

This was one of the “Aha!” moments for me.

ID → unique, used once per element (#idname)

Class → reusable for multiple elements (.classname)

Example:

#student {
  color: blue;
}

.college {
  color: green;
}

Think of IDs as roll numbers, and Classes as groups — simple but powerful.

Using Custom Fonts (@font-face)

One of my favorite CSS tricks is using custom fonts.
I downloaded a font and connected it like this:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.ttf');
}

Now I can style my page with fonts that truly match the theme or mood of the project 🖋️

💬 Final Thoughts

Day 8 taught me that CSS is not just about colors or spacing — it’s an art form.
It lets you shape how users feel when they visit your website.

Next up → Selectors, Colors, and Layout Magic.
Can’t wait to take my designs to the next level!

💭 Question for you:
What’s your go-to CSS property when you start styling a new project? Drop it below 👇

Tags:

webdev #css #frontend #beginners #100daysofcode #learning #codingjourney

Day 7 — Exploring HTML Tags (Images, Videos, Audio, Forms & More)

bblackwind — Tue, 21 Oct 2025 14:07:45 +0000

Hey everyone 👋

Welcome back to Day 7 of my web development journey!
Today was all about exploring some super-interesting and visual parts of HTML — from adding images and videos to creating forms and understanding meta tags.

Let’s dive right in! 🚀

🖼️ 1. Image Tag `<img>`

I started with the image tag — one of the simplest yet most used HTML tags.
It’s used to display images on a web page.

Syntax:

<img src="image.jpg" alt="Beautiful mountain view" width="400" height="250" />

Attributes:

src: Image source or file path
alt: Alternative text (important for SEO and accessibility)
width & height: Define image size

📸 [Insert Screenshot Demo Here]

🎥 2. Video Tag `<video>`

Next up, I played with the video tag — and this one’s quite fun!
It helps embed videos directly into a webpage.

Syntax:

<video src="demo.mp4" controls autoplay muted height="300"></video>

Key Attributes:

controls: Adds play/pause buttons
autoplay: Starts playing automatically
muted: Keeps the video silent (helps when using autoplay)
height: Adjusts video height

🎬 [Demo Screenshot: Embedded Video Example]

🎧 3. Audio Tag `<audio>`

Then I tried the audio tag, which lets you embed sounds or music directly in your page.

Syntax:

<audio src="sound.mp3" controls muted></audio>

Attributes:

controls: Lets users play/pause the audio
muted: Useful to prevent sudden loud playback (better UX)

🔊 [Screenshot: Audio Player Example]

🧾 4. Forms & Input Fields

Now comes one of the most powerful parts of HTML — forms!
Forms are used to collect user input such as login details, feedback, or survey responses.

I learned about various input types and their uses 👇

<form>
  <input type="text" placeholder="Enter your name" />
  <input type="email" placeholder="Enter your email" />
  <input type="radio" name="gender" value="male" /> Male
  <input type="radio" name="gender" value="female" /> Female
  <input type="submit" value="Submit" />
</form>

🧩 Common Input Types:

text, email, password, date
checkbox
radio (used for single-choice options like gender)
color, week, month

💡 I also learned about the placeholder attribute — it guides users about what to type inside input boxes.

📸 [Form Screenshot Demo]

🪶 5. `<details>` and `<summary>` Tag

This combo is really interesting — perfect for collapsible content like FAQs or hidden notes.

Example:

<details>
  <summary>Click to read more</summary>
  <p>This is hidden content that appears when you click above.</p>
</details>

🪄 Simple, elegant, and great for improving user experience.

🌐 6. Meta Tags

Lastly, I explored meta tags, which go inside the <head> section of an HTML document.
They provide important information about your webpage — like encoding, viewport settings, and SEO details.

Example:

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Learning HTML basics on my dev journey" />
<meta name="keywords" content="HTML, Web development, Learn coding" />

⚠️ Fun fact:
Google no longer prioritizes meta keywords because they were often misused — like people adding irrelevant or adult words just to appear in unrelated searches. (Imagine searching “toys” and finding “sex toys” — awkward 😅)

🕉️ Final Thoughts

Today was super productive!
I got a much better grip on HTML’s visual and interactive elements.

From embedding multimedia 🎥 to creating forms 🧾 and understanding meta tags 🌐 — it finally feels like I’m giving life to my web pages.

Can’t wait for Day 8, where I’ll dive into CSS styling and make everything look amazing! 🎨

💬 Question of the Day:
Which HTML tag do you find most fun to use — image, video, or forms?

100DaysOfCode #HTML #WebDevelopment #Frontend #CodingJourney #DevCommunity #LearnCoding

Day 6 of My Web Dev Journey – Exploring HTML Tags

bblackwind — Sun, 19 Oct 2025 09:02:43 +0000

Hello everyone 👋

Day 6 was all about getting hands-on with HTML basics.
Until now, I only knew that HTML gives structure to a website — but today, I actually played with tags, code, and outputs. And honestly… it was fun! 😄

🧠 First Things First — HTML Is Not a Programming Language

Let’s clear this right now 👉 HTML is NOT a programming language.
If someone calls it that, feel free to (politely 😅) correct them.

HTML stands for HyperText Markup Language, and that’s why it uses angle brackets < > — it’s used to mark up content, not program logic.

🧱 What Is HTML Boilerplate?

Every HTML file starts with a boilerplate — basically the skeleton of the page.

Here’s what it includes:

<!DOCTYPE html> → tells the browser this is an HTML5 document.
<html> → wraps the entire page.
Inside, we have <head> and <body>.

👉 Quick VS Code Shortcut:
Type Shift + ! and hit Enter/Tab → Boom 💥 a full HTML boilerplate appears automatically! (No need to write it manually.)

📸 Press enter or click to view image in full size

🧩 `<head>` vs `<body>`

This confused me earlier, but now it’s crystal clear 👇

<head> → contains information about the page like title, metadata, SEO keywords, stylesheets, etc.
<body> → contains the actual content you see on the screen — text, images, videos, links, etc.

📸 Press enter or click to view image in full size

💡 Bonus Insight:
This is where SEO starts — proper <title>, <meta> descriptions, and structured content inside <head> help your page rank higher on Google.

🏷️ Heading Tags `<h1>` – `<h6>`

Headings are like newspaper titles — they grab attention and organize your content.

<h1> → biggest, used for the main title (use only one per page for SEO).
<h2> to <h6> → smaller subheadings.

👉 Pro Tip:
Using semantic headings helps both users and search engines understand your content hierarchy.

📸 Press enter or click to view image in full size

✍️ Paragraphs & Text Formatting

Today I also played with some basic text tags:

<p> → defines a paragraph of text.</p>  
<strong> → makes text important (search engines treat it as strong emphasis).</strong>  
<b> → just bold styling, no semantic meaning.</b>  
<i> → italic text.</i>  
<br> → adds a line break.  
<sup> → superscript (x²).</sup>  
<sub> → subscript (H₂O).</sub>

Simple but powerful tools to make text readable, structured, and meaningful.

That’s it for Day 6 of my web dev journey 🚀
Tomorrow, I’ll move deeper into HTML elements and maybe start CSS basics.

Until then, happy coding! 💻

100DaysOfCode #WebDevelopment #HTML #Frontend #CodingJourney #DevCommunity

Forem: bblackwind

Stop Hardcoding Pixels: A Developer's Guide to CSS Units (px, rem, vh, vw)

The Rigid Foundation: px (Pixels)

The Relatives: Designing for Fluidity

1. Percentages (%)

2. Viewport Width (vw) & Viewport Height (vh)

3. Viewport Maximum (vmax) & Viewport Minimum (vmin)

The Typography Kings: em and rem

The em Unit (The Multiplier)

The rem Unit (Root em)

Wrapping Up Day 19

Question for the Dev community:

Let's Connect!

I fought with CSS layouts for years. Then I found CSS Grid. 🤯 (Day 18)

1. The Foundation: display: grid;

2. Say Goodbye to Math with fr

3. Ultimate Responsiveness: minmax()

4. Breathing Room: Gaps

Day 17/100: Mastering CSS Grid, Nth-Child Magic, and Text Illusions 🎨🚀

1. The Foundation: Block vs. Inline Elements 🧱

2. Advanced Selection: The Magic of :nth-child() 🪄

3. Demystifying CSS Grid 🎛️

4. Hands-on Styling: Text Illusions & Flex Shrink ✨

Follow the Journey

What's Next?

Let's Connect!

Day 16/100: CSS Box Model & Building a Hover-Effect Pokémon Grid

1. Demystifying Padding vs. Border

2. The Magic of transform: scale()

3. Putting it Together: The Interactive Pokémon Grid

What's Next?

Let's Connect! 🌐

CSS Is Super Effective! ⚡️ Building a 3D Pokémon Card Interaction (Day 15)

🚀 See It Live

🛠 The Tech Stack

Key CSS Tricks I Used

1. Custom Shapes with clip-path

Day 11 of My Web Dev Journey — Creating a Michael Jackson Webpage with CSS Position & Styling

100DaysOfCode #WebDevJourney #CSSLearning #MichaelJacksonWebpage #FrontendDevelopment #CodingInPublic

Day 10 of My Web Dev Journey — Mastering CSS Positions: Absolute, Relative, Fixed & Sticky

🧩 Day 9 of My 100 Days of Web Dev — CSS Gradients, Backgrounds & Parent–Child Magic!

Day 8 – CSS Basics Explained: Styling Your First Webpage

Day 8 – CSS Basics Explained: Styling Your First Webpage

webdev #css #frontend #beginners #100daysofcode #learning #codingjourney

Day 7 — Exploring HTML Tags (Images, Videos, Audio, Forms & More)

🖼️ 1. Image Tag <img>

🎥 2. Video Tag <video>

🎧 3. Audio Tag <audio>

🧾 4. Forms & Input Fields

🧩 Common Input Types:

🪶 5. <details> and <summary> Tag

🌐 6. Meta Tags

🕉️ Final Thoughts

100DaysOfCode #HTML #WebDevelopment #Frontend #CodingJourney #DevCommunity #LearnCoding

Day 6 of My Web Dev Journey – Exploring HTML Tags

🧠 First Things First — HTML Is Not a Programming Language

🧱 What Is HTML Boilerplate?

🧩 <head> vs <body>

🏷️ Heading Tags <h1> – <h6>

✍️ Paragraphs & Text Formatting

100DaysOfCode #WebDevelopment #HTML #Frontend #CodingJourney #DevCommunity

The Rigid Foundation: `px` (Pixels)

1. The Foundation: `display: grid;`

1. Custom Shapes with `clip-path`

🖼️ 1. Image Tag `<img>`

🎥 2. Video Tag `<video>`

🎧 3. Audio Tag `<audio>`

🪶 5. `<details>` and `<summary>` Tag

🧩 `<head>` vs `<body>`

🏷️ Heading Tags `<h1>` – `<h6>`