HTML & CSS

dharanidharan — Mon, 13 Jul 2026 14:37:13 +0000

Welcome to my very first blog.

What is HTML?

HTML stands for Hyper Text Markup Language. It is the standard language used to create the structure of a web page.

Think of HTML as the skeleton of a human body. It defines the headings, paragraphs, images, buttons, links, tables, and forms that appear on a webpage .For example, HTML helps us create:

Headings
Paragraphs
Images
Links
Lists
Tables
Forms

Without HTML, a webpage would have no structure.

What is CSS?

CSS stands for Cascading Style Sheets.

If HTML is the skeleton, CSS is the skin, clothes, and overall appearance. CSS is responsible for making websites attractive and responsive.Using CSS, we can:

Change colors
Add backgrounds
Style fonts
Create layouts
Add spacing and borders
Create animations
Make websites responsive for mobile devices

Without CSS, websites would look plain and difficult to use.

Here is an code website developed by self as a first step on learning Full stack

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        header{

            background-color: rgb(0, 0, 0);
            color: white;
            Padding: 20px;
        }
        h1{

            text-align: center;
            margin-bottom: 10px;
        }
        a{

            color: white;
            text-decoration: none;
            margin-right: 20px;
        }
        nav{
            text-align: center;

        }
        section{
            border: 1px solid #ccc;
            margin:  40px 80px;
            padding: 40px;
            border-radius: 10px;
            background-color: #d1b09a;
        }
        footer{
            text-align: center;
            padding: 20px;
            background-color: rgb(0, 0, 0);
            color: white;
        }
        p{
            margin-bottom: 10px;
        }
        ul{
            list-style-type: square;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <header> 
        <h1>Dharanidharan</h1>
        <nav>
            <a href="">About me</a>
            <a href="">Projects</a>
            <a href="">Contact</a>
        </nav>
    </header>
    <section>
        <h2>About Me</h2>
        <p>Welcome to my portfolio!</p>
        <p>Current student looking to join the workforce to gain real-world experience. Ability to completetasks on time in both individual and team settings. Dependable and reliable, ready to learn and grow with your company.</p>
    </section>

    <section>
        <h2>Projects</h2>
        <p>Here are some of my projects:</p>
        <ul>
            <li>FINTECH</li>
            <li>Temperature Monitoring Band for Babies using IoT and Cloud Data Analysis </li>
            <li>AI-Driven ECG Image Analysis and Clinical Interpretation System </li>
        </ul>
    </section>
    <section>
        <h2>Contact</h2>
        <p>You can reach me at iamdharanidharan@gmail.com</p>
        <p>Mobile: +91 8248355766</p>
    </section>
    <footer>
        <h4>&copy;  Dharanidharan.</h4>
    </footer>
</body>
</html>

here is its Output:

What's Next?

JavaScript

Conclusion

Thank you for reading my very first blog!

Everyone starts as a beginner, and this is my first step into the world of web development. I hope you'll join me as I continue learning and building new projects.

DEV Community: dharanidharan

HTML & CSS