DEV Community

dharanidharan
dharanidharan

Posted on

HTML & CSS

#html #css

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

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.

Top comments (0)