DEV Community

s mathavi
s mathavi

Posted on

My Journey into HTML & CSS

#webdev #programming #beginners #learning

Hi friends! I’m a Tamil girl from an IT background, currently joined an institute to learn full stack Java development. I'm still a beginner, but I'm really excited to learn how to build websites and web apps using HTML, CSS, JavaScript, Java, and Spring Boot. This blog is my small space to share what I learn along the way. Hope it helps others who are also starting their journey like me!"

This blog is not a tutorial. It’s my personal experience — the ups, the downs moments that shaped my journey.

My Background – From BSc CS to Web Dev:
I realized that in the real world, degrees are useful, but projects speak louder. That’s when I started exploring HTML and CSS, and I was hooked.

About HTML:

HTML stands for Hyper Text Markup Language. It’s basically the standard language we use to create and organize content on the web. So when you open a webpage and see text, images, links, or videos – HTML is what tells the browser how to show all of that. It sets up the basic layout or structure of the site.

1.Semantic Tags:

Semantic tags are HTML tags that clearly describe the meaning of the content inside them.

  • header tag- the top section
  • nav tag navigation menu
  • main tag main content area
  • footer tag bottom of the page 
  <header>
      <h1>My Website</h1>
    </header>
Enter fullscreen mode Exit fullscreen mode

2.Non-Semantic Tags:

Non-semantic tags don’t describe their purpose. They are just containers with no meaning.

div tag – generic block-level element

span tag – generic inline element


    <div class="footer">
      <p>© 2025 My Website</p>
    </div>
Enter fullscreen mode Exit fullscreen mode

About CSS:

CSS stands for Cascading Style Sheets. It’s what we use to style a webpage and make it look good. So while HTML gives the structure – like the headings, paragraphs, or buttons – CSS decides how everything looks. You can change colors, fonts, spacing, and even layout using CSS. For example, if you want a button to be blue with rounded corners and a hover effect, CSS does that. Without CSS, all websites would look plain and boring. It's like adding fashion to your website!

Ways to Add CSS:

1.Inline CSS:
Enter fullscreen mode Exit fullscreen mode 
  <p style="color: red; font-size: 18px;">This is inline CSS</p>
Enter fullscreen mode Exit fullscreen mode 
2.Internal CSS
Enter fullscreen mode Exit fullscreen mode 
<html>
  <head>
    <style>
      p {
        color: green;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>This is internal CSS</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
3.External CSS:
Enter fullscreen mode Exit fullscreen mode

This is index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>This is external CSS</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

This is style.css

p {
  color: blue;
  font-size: 22px;
}
Enter fullscreen mode Exit fullscreen mode

My First Mini Project 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header {
            background-color: black;
            color: white;
            padding:10px     
          }
          .header ul li a{
            color: white;
            text-decoration: none;
          }
          .header h1{
            text-align: center;
          }
          .header ul{
            list-style-type: none;
            display: flex;
            justify-content: center;
            gap: 15px;           
          }

    </style>
</head>
<body>
    <div class="header">
        <h1>MATHAVI</h1>
            <ul>
                <li><a href="">About Me</a></li>
                <li><a href="">Projects</a></li>
                <li><a href="">Login Page</a></li>
                <li><a href="">X.com</a></li>
            </ul>
     </div>   


</body>
</html>
Enter fullscreen mode Exit fullscreen mode

OUTPUT
Introduction:

My Next Plan:

More blogs coming soon on responsive design, personal portfolio projects, and coding challenges!

Stay tuned and follow me for updates on my web dev journey. Let's grow together!

Top comments (1)

Collapse
 
dotallio profile image
Dotallio •

Love your energy starting out and how you explain these basics so clearly! Looking forward to seeing what projects and lessons you share next - what was the trickiest part so far?