top of page
Search

How to Build Your First Web Page with HTML and CSS for Beginner

Have you ever thought about building your own website but felt overwhelmed by all the technical stuff? Trust me, you’re not alone! The good news is that creating a simple web page is easier than you think—and I’m here to guide you through it step by step.


By the end of this post, you’ll have your very own web page built with HTML and CSS, even if you’ve never written a line of code before. 


What Are HTML and CSS? (And Why Do They Matter for web page creation?)

HTML (HyperText Markup Language): It is the backbone of a webpages, used to structure content like headings, paragraphs, images, and links.


CSS (Cascading Style Sheets): It is used to style and design the HTML content, making it look attractive with colors, fonts, layouts, and spacing.


Think of HTML as the structure of a house and CSS as the paint, furniture, and decorations that make it beautiful.


  •  Step 1: Setting Up Your Project


To create a web page, all you need is:

1. A code editor (I recommend VS Code because it’s free and easy to use, but even Notepad will work!)

2. A web browser like Chrome or Firefox to preview your page.


Creating Your First HTML File

1. Open your code editor { VS code or Notepad }and create a new file.

2. Save it as index.html (this is the main file of a website).

3. Write the basic structure of an HTML page:

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My First Web Page</h1>
    <p>This is a simple web page created using HTML and CSS.</p>
</body>
</html>  

4. Save the file and open it in a web browser by double-clicking it. You will see a basic web page with a heading and a paragraph.

 You just created your first web page! It might look basic, but don’t worry—we’ll make it prettier in the next step.


  • Step 2: Adding Styles with CSS


Now, let’s make the page look attractive using CSS.

1. Create a new file in the same folder as your HTML file.

2. Save it as style.css.

3. Add the following CSS code:


body { background-color: light blue;
    font-family: Arial, sans-serif;
    text-align: center;}
h1 {color: dark blue;}
p { font-size: 18px;}

4. Link the CSS file to the HTML file by adding this line inside the <head> section of index.html:

<link rel="stylesheet" type="text/css" href="style.css">

Now, when you refresh your web page, Your page now has a cool background, better fonts, and a modern look.



  •   Step 3: Adding Images and Links

To make your page more engaging, let’s add an image and a link.

Modify the <body> section of your HTML file like this:


<body>
    <h1>Welcome to My First Web Page</h1>
    <p>This is a simple web page created using HTML and CSS.</p>
    <img src="https://via.placeholder.com/300" alt="Sample Image">
    <p>Learn more about web development <a href="https://www.yourwebsite.com">here</a>.</p>
</body>

The <img> tag displays an image.

The <a> tag creates a clickable link.

Now your page actually looks like a webpage!



  •     Step 4: Structuring Your Page with a Layout

For a better layout, wrap your content inside a <div> and style it with CSS.

Modify your HTML:


<body>
    <div class="container">
        <h1>Welcome to My First Web Page</h1>
        <p>This is a simple web page created using HTML and CSS.</p>
        <img src="https://via.placeholder.com/300" alt="Sample Image">
        <p>Learn more about web development <a href="https://www.yourwebsite.com">here</a>.</p>
    </div>
</body>

And add this CSS in style.css:


.container { width: 50%;
    margin: auto;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px gray;}

Now your web page looks like something you'd see on the internet!

Want to Learn More?


If you found this guide helpful and want to learn web development in a simple and structured way, we recommend our beginner-friendly course. It covers HTML, CSS, and even JavaScript, making it easy for anyone to start coding.


Start Learning Now: Visit Our Course Here-{ https://www.calanjiyam.com/ }


Conclusion


Building a web page using HTML and CSS is simpler than you might think. By following these steps, you can create your first web page and gradually improve it with more styling and interactive features.


For more detailed tutorials and structured learning, visit{ https://www.calanjiyam.com/ } and start your web development journey today!


Comments

bottom of page