DEV Community

Megha M
Megha M

Posted on

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

#html #css #webdev #programming

Hey everyone!

This is my very first blog post, and I’m super excited to share my journey into web development with you. 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

2.Internal CSS

<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>
Enter fullscreen mode Exit fullscreen mode

3. External CSS

HTML (index.html):

<link rel="stylesheet" href="styles.css">
Enter fullscreen mode Exit fullscreen mode

CSS (styles.css):

p {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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!💻✨

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.