HTML and CSS tutorial - Sharih Hassan

Hey there, future web wizard! 🧙‍♂️ Ready to embark on the magical journey of creating your very first webpage? Don’t worry; we’ve all been there—staring at the screen, wondering if “HTML” is a new texting acronym the kids are using these days. 😂 But fear not! By the end of this guide, you’ll not only know what HTML and CSS stand for but also how to use them to craft a simple yet stunning webpage. Let’s dive in!

What Are HTML and CSS? 🤔

Before we get our hands dirty with code (not literally, unless your keyboard needs cleaning), let’s break down these two fundamental building blocks of the web:

HTML (HyperText Markup Language): Think of HTML as the skeleton of your webpage. It structures the content, telling the browser, “Hey, this is a heading,” or “This is a paragraph.” Without HTML, your webpage would be like a house without a frame—just a pile of stuff. 🏠
CSS (Cascading Style Sheets): If HTML is the skeleton, then CSS is the wardrobe and makeup. It styles your webpage, adding colors, fonts, and layouts, making everything look fabulous. Imagine showing up to a party in your pajamas; that’s HTML without CSS. 😅

Setting Up Your First Webpage 🖥️

Alright, let’s get to the fun part—building your first webpage! Follow these steps, and you’ll have something to show off in no time.

1. Create a New HTML File 📄

Open your favorite text editor (Notepad, VS Code, or even the old-school Notepad++). Create a new file and save it as index.html. The .html extension tells your computer that this is an HTML file.

A Screen shot of creating index.html file in Visual Studio Code.

A Screen short of file created showing index.html and and added code of html in visual studio code.

2. Add the Basic HTML Structure 🏗️

In your index.html file, type the following:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My First Webpage!</h1>
    <p>This is a paragraph of text on my awesome new webpage.</p>
</body>

</html>

Let’s break this down:

<!DOCTYPE html>: This line tells the browser, “Hey, I’m using HTML5!” It’s like the secret handshake of web development. 🤝
<html lang="en">: This tag wraps all your HTML content and sets the language to English.
<head>: Contains meta-information about your webpage, like the title and character set.
<title>: The text that appears on the browser tab. Make it snappy!
<body>: This is where all the visible content of your webpage goes.

3. Style It Up with CSS 🎨

Now, let’s add some style to your page. Create a new file in the same directory and save it as styles.css. In this file, type:

An Image of Creating Styles.css File on Visual Studio Code.

An Image of Created Styles.css file and added css code.


body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}

h1 {
    color: #333333;
}

p {
    color: #666666;
}

This CSS will give your webpage a clean, modern look. But wait, how does your HTML know about this CSS? Good question!

4. Link CSS to HTML 🔗

Go back to your index.html file and modify the <head> section to include a link to your CSS file:


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
    <link rel="stylesheet" href="styles.css">
</head>

This <link> tag tells the HTML, “Hey, use these styles for the page.” It’s like hiring a decorator for your house. 🖌️

5. View Your Masterpiece 🖼️

Save both files and open index.html in your web browser. Voilà! You’ve just created your first webpage. Take a moment to bask in the glory. 🌟

Next Steps 🚀

Congratulations on building your first webpage! But don’t stop here. The world of web development is vast and exciting. Here are some next steps to consider:

Learn More HTML & CSS: There are tons of resources online to deepen your knowledge. Check out tutorials, courses, and documentation to expand your skills.
Explore JavaScript: Once you’re comfortable with HTML and CSS, dive into JavaScript to add interactivity to your webpages. It’s like adding a dash of magic to your creations. ✨
Build Projects: Practice makes perfect. Start small by building personal projects like a portfolio site or a blog. The more you code, the better you’ll get.

I’ve written an article that will help you get started: The Ultimate Beginner’s Guide to Web Development.

Call-to-Action 📢

Feeling excited about your journey into web development? Share your first webpage with friends and family to showcase your new skills. And if you’re hungry for more knowledge, explore additional resources and tutorials to continue your learning adventure.

Happy coding! 😊

Posts tagged HTML and CSS tutorial

HTML & CSS Basics: Building Your First Webpage