5 Simple Steps to Create Your First Website with HTML & CSS

Creating a website can seem intimidating, but it doesn’t have to be. In fact, with just a few lines of code, you can build a basic webpage from scratch. This article will walk you through the core concepts of HTML and CSS to help you launch your very first website.

Step 1: Get Your Tools

All you need to get started is a simple text editor. While you could use something like Notepad, we highly recommend a free and powerful tool called Visual Studio Code (VS Code). It provides features that make writing code much easier, like syntax highlighting and automatic formatting.

Step 2: Write the HTML (The Skeleton)

HTML (HyperText Markup Language) is the language that gives your website its structure. It’s the skeleton of your site. All HTML is written using tags, which are keywords enclosed in angle brackets.

Here’s the basic structure every HTML file needs. You can copy and paste this into a new file and save it as index.html.

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>
    <h1>Hello, Megalistech!</h1>
    <p>This is my first website paragraph.</p>
</body>
</html>

Step 3: Write the CSS (The Style)

While HTML gives your site structure, CSS (Cascading Style Sheets) is what makes it look good. CSS controls the colors, fonts, and layout. It’s the style of your site.

Create a brand new file in the same folder as your index.html and save it as style.css. In this file, you can write a simple style rule.

body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}

This code tells your website to have a light blue background and to use the Arial font.

Step 4: Link Your HTML and CSS

Now you need to connect your HTML file to your CSS file. To do this, you will add a single line of code inside the <head> section of your HTML file.

<link rel="stylesheet" href="style.css">

Your final index.html file will now look like this:

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello, Megalistech!</h1>
    <p>This is my first website paragraph.</p>
</body>
</html>

Step 5: View Your Creation

You’re ready to see the result! Simply go to your file manager, find your index.html file, and double-click it. It will open in your web browser, and you’ll see your first website, complete with a background color and new font. You are now a web designer!

Where to Learn More

Now that you’ve created your very first website, you can continue your learning with these excellent resources.

freeCodeCamp: A non-profit organization that provides thousands of free, full-stack development lessons and certifications.
The Odin Project: A comprehensive, open-source curriculum for web development with a strong focus on hands-on projects.
Coursera / edX: Online course platforms that offer structured courses from top universities.

Now that you’ve mastered this basic skill, you can join our Telegram community to get support and updates on your learning journey.