Getting Started with Web Development: My First Day Learning HTML & CSS

Hey everyone!

This is my very first blog post, and I’m super excited to share my journey into web development with you. I recently joined an offline class to learn HTML and CSS — the foundation of every website — and today was Day 1 of this new adventure.

What is HTML & CSS?

Before diving into the details, here’s a quick intro for those who are new:

HTML (HyperText Markup Language) is used to structure content on the web. Think of it as the skeleton of a web page — it defines headings, paragraphs, links, images, and more.
CSS (Cascading Style Sheets) is used to style that content. It adds color, spacing, layout, and makes your site look beautiful.

We started by learning some essential HTML tags that help structure a web page:

Here’s a sample structure I created for a portfolio website header:

<header>
  <h1>My Portfolio</h1>
  <nav>
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

Introduction to CSS

After learning how to structure a page, we moved on to CSS to style it. There are three ways to add CSS to a web page:

1.Inline CSS

You add styles directly inside an HTML tag using the style attribute:

<p style="color: blue;">This is a blue paragraph.</p>

2.Internal CSS

<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>

3. External CSS

HTML (index.html):

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

CSS (styles.css):

p {
  color: red;
}

My First Flexbox Layout

We also touched on Flexbox, which is a powerful layout system in CSS. It makes aligning items easier and more responsive.

Here’s how I styled my header using Flexbox:

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f5f5f5;
}

nav a {
  margin-left: 20px;
  text-decoration: none;
  color: #333;
}

This made my navigation bar align horizontally, and everything looked neat and professional.

Summary

On my first day of learning web development, I was introduced to the core building blocks of any website — HTML and CSS. I learned how to:

Use basic HTML tags to structure a web page
Apply styles using inline, internal, and external CSS
Create a simple, responsive header layout using Flexbox

It felt amazing to write my first lines of code and actually see the results in the browser. I’m just getting started, but I’m already excited about how much there is to explore and create.

I’ll continue to share my learning journey here — stay tuned!💻✨

Leave a Reply Cancel reply