Getting Started with HTML and CSS: Your First Steps into Web Design

Hello young coders!

Welcome to the exciting world of web design. Today, we're going to start with the basics: HTML and CSS. These are the building blocks of every website you see on the internet. By the end of this lesson, you'll have created your very own webpage!

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create web pages. HTML describes the structure of a webpage using elements and tags.

What is CSS?

CSS stands for Cascading Style Sheets. While HTML is used to structure a webpage, CSS is used to style it. CSS makes your webpage look pretty by adding colors, fonts, layouts, and more.


Creating Your First Webpage

  1. Setting Up: All you need is a text editor (like VS Code) and a web browser (like Chrome or Firefox).
  2. Your First HTML File:
    Open your text editor and type the following: 
    <!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage.</p>
</body>
</html>
    Save the file as index.html and open it in your web browser. Voila! You’ve created your first webpage!
  3. Adding Some Style with CSS:
    Now, let's add some style to your webpage.
    • Creating a CSS File:
      Open your text editor again and type the following: 
      body {
    background-color: lightblue;
}
h1 {
    color: white;
    text-align: center;
}
p {
    font-family: Arial, sans-serif;
    font-size: 20px;
}
      Save this file as styles.css.
    • Linking CSS to HTML:
      Modify your index.html to link the CSS file: 
      <!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage.</p>
</body>
</html>

Final Touch

Open index.html in your browser again, and see the magic! Your page should now have a light blue background, a centered white heading, and a nicely styled paragraph.

Congratulations! You've just created and styled your first webpage. Keep practicing, and soon you'll be designing amazing websites.

Stay tuned for more lessons, where we'll dive deeper into HTML and CSS, and even explore JavaScript!

Happy coding!