Forem: Ali Hamza

#css #webdev #beginners #codenewbie

Ali Hamza — Sun, 24 May 2026 05:58:58 +0000

Hello Dev Community! 👋

It is officially Day 5 of my journey toward the MERN stack! Yesterday, I learned how to add colors and fonts using CSS selectors. Today, I tackled the absolute core of CSS layout design: The Box Model.

Before today, whenever I tried to move an element, it would randomly overlap or break the layout. Today, I finally understood why that happens.

🧠 Key Learnings From Day 5

I learned that the browser treats every single HTML element as a rectangular box. This box consists of four distinct layers:

Content: The actual text, image, or video inside the element.
Padding: The transparent space inside the element, between the content and its border. (Great for making buttons look spacious!).
Border: The line wrapped around the padding and content (I experimented with border-radius to make smooth, rounded corners).
Margin: The transparent space outside the element, separating it from other surrounding boxes.

⚡ The Life-Saving Property: `box-sizing: border-box;`

One major headache I faced was that adding padding or borders increased the actual width of my elements, ruining my layout math.

Then I learned about a universal reset that senior developers use. Adding this to the top of my CSS file fixed everything instantly:


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

#css #webdev #beginners #codenewbie

Ali Hamza — Fri, 22 May 2026 12:24:53 +0000

Hello Dev Community! 👋

It is Day 4 of my journey toward mastering the MERN stack. For the past three days, I was busy building skeletons with HTML. Today, I finally started bringing those dry structures to life using CSS (Cascading Style Sheets)!

It felt amazing to move away from black text on a plain white screen and actually control how things look.

🧠 Key Learnings From Day 4

1. The Three Ways to Add CSS

I learned that there are three methods to attach styles to HTML, but one is clearly the professional standard:

Inline CSS: Writing styles directly inside the HTML tag (makes code messy).
Internal CSS: Writing styles inside the <style> tag in the HTML head.
External CSS (The Winner): Creating a separate .css file and linking it via <link rel="stylesheet">. I chose this method because it keeps my HTML clean and modular.

2. CSS Syntax & Basic Selectors

I mastered the basic anatomy of a CSS rule: Selector { Property: Value; }. I experimented with three primary selectors today:

Element Selector: Targeting tags directly (e.g., body, h1).
Class Selector (.): The most reusable way to style elements (e.g., .btn-primary).
ID Selector (#): For styling a single, unique element (e.g., #main-header).

🛠️ What I Actually Built / Styled

I took the semantic "About Me" page and navigation bar that I refactored yesterday and created an external style.css file for it.

Today, I didn't worry about complex layouts. Instead, I focused on the basics:

Changed the background color of the body to a clean, modern off-white.
Styled my headings with different font families and dark gray tones.
Turned my navigation list items (<li>) into an inline layout so they sit horizontally like a real navbar, instead of a vertical bulleted list.

🎯 My Goal for Tomorrow (Day 5)

Tomorrow, I'm diving into the absolute core of CSS layouts:

Understanding the CSS Box Model (Margin, Border, Padding, Content).
Learning how space works between elements so my layout stops overlapping.

💬 Let's Connect!

To the senior engineers: What is your favorite CSS font stack for clean, readable code? To fellow beginners: Did you start with Inline CSS or go straight to External files?

My styled code and repository are up to date on GitHub!
[Links in the Comments]

Keep coding! 🚀

#html #beginners #codenewbie #webdev

Ali Hamza — Thu, 21 May 2026 12:31:09 +0000

Hello Dev Community! 👋

It's Day 3 of my journey to master full-stack development (MERN stack). After learning forms and fixing my file paths yesterday, today was all about making my HTML code smart, accessible, and clean.

Up until yesterday, I was using generic blocks like <div> for everything. Today, I unlocked the true power of Semantic HTML.

🧠 Key Learnings From Day 3

1. What is Semantic HTML?

Semantic means "relating to meaning." Semantic tags tell both the browser and search engines (SEO) exactly what kind of content is inside them, instead of just being a blind container.

Here are the tags I practiced today:

<nav>: Specifically for navigation links.
<header>: For the introductory content or banner at the top.
<section>: To group related content together (like an "About" or "Contact" area).
<footer>: For the bottom copyright and link layout.

2. Building a Structured Navigation Bar

Instead of randomly putting links (<a>), I learned the professional way to structure a header and navbar using lists:


html
<header>
    <div class="logo">MyBrand</div>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>
<footer>Footer</footer>

#Input #form #button #img

Ali Hamza — Wed, 20 May 2026 12:23:16 +0000

Hello Dev Community! 👋

This is officially Day 2 of my web development journey (as part of my MERN stack goal). After successfully laying down the foundational skeleton yesterday, today was about refinement and expansion.

🧠 Key Learnings From Day 2

1. The Trap of Absolute Image Paths

Yesterday, I added my first image, but I used an Absolute Path (pointing directly to a specific folder on my computer's drive). A fellow developer politely pointed out that while this works for me, it will fail for everyone else once the site is deployed.

I learned about Relative Paths, which define the image’s location relative to the HTML file. It makes the codebase portable.

My Fix Today:
I took control of my asset organization! I moved the image into a dedicated assets folder within my project structure and updated my <img> tag:


html
<img src="D:\My Code Base\Quaid e Azam.jpg" alt="Quaid">

<img src="assets/Quaid e Azam.jpg" alt="Quaid">

#html #beginners #codenewbie #webdev

Ali Hamza — Tue, 19 May 2026 06:46:36 +0000

Hello Dev Community! 👋

Today marks the official Day 1 of my web development journey. I have decided to learn the MERN stack, and naturally, I am starting from the absolute foundation: HTML (HyperText Markup Language).

I believe the best way to retain what I learn is to write about it and share it with the community. So, here is a quick breakdown of what I managed to build and understand today.

🧠 What I Learned Today

Before writing code, I learned that HTML isn't a programming language—it's a markup language that acts as the skeleton or structure of any website.

Here are the core concepts I mastered today:

1. The Essential Tags

I learned that HTML uses tags enclosed in angle brackets (<>), and most of them come in pairs (an opening tag and a closing tag).

<h1> to <h6>: Headings (where <h1> is the biggest and most important).
<p>: Paragraphs for adding regular text.
<a>: Anchor tags for adding links to other websites.

2. The Boilerplate Structure

Every HTML document needs a specific structural setup to tell the browser how to read it. I learned how to set up the basic skeleton:


html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is officially my first day learning HTML.</p>
</body>
</html>

Forem: Ali Hamza

#css #webdev #beginners #codenewbie

🧠 Key Learnings From Day 5

⚡ The Life-Saving Property: box-sizing: border-box;

#css #webdev #beginners #codenewbie

🧠 Key Learnings From Day 4

1. The Three Ways to Add CSS

2. CSS Syntax & Basic Selectors

🛠️ What I Actually Built / Styled

🎯 My Goal for Tomorrow (Day 5)

💬 Let's Connect!

#html #beginners #codenewbie #webdev

🧠 Key Learnings From Day 3

1. What is Semantic HTML?

2. Building a Structured Navigation Bar

#Input #form #button #img

🧠 Key Learnings From Day 2

1. The Trap of Absolute Image Paths

#html #beginners #codenewbie #webdev

🧠 What I Learned Today

1. The Essential Tags

2. The Boilerplate Structure

⚡ The Life-Saving Property: `box-sizing: border-box;`