Coding 101: Build Your First Web Page with HTML & CSS

In today’s digital world, coding has become one of the most valuable skills. Whether you want to start a career in technology, build your own blog, or simply understand how websites work, learning the basics of HTML and CSS is the best first step.

This beginner-friendly guide will walk you through creating your very first web page using HTML for structure and CSS for styling. If you’ve already explored our guides on AI in everyday life (check here) or Quantum Computing basics (read more), this post will give you a hands-on foundation in the world of programming.

What is HTML & CSS?

Before diving in, let’s clarify the two main building blocks of web development:

HTML (HyperText Markup Language):
Think of HTML as the skeleton of a web page. It defines the structure—headings, paragraphs, images, links, etc.
CSS (Cascading Style Sheets):
CSS adds life to the skeleton. It controls colors, fonts, spacing, and overall design. Without CSS, all web pages would look plain and boring.

Together, HTML and CSS form the foundation of almost every website on the internet.

Setting Up: What You Need

Creating a webpage doesn’t require expensive tools. You just need:

A text editor (Notepad, Sublime Text, or VS Code).
A web browser (Chrome, Firefox, or Edge).

That’s it! Unlike complex programming, HTML and CSS are very beginner-friendly, making them the perfect entry point for students and professionals.

Step 1: Create Your First HTML File

Open your text editor.
Save a new file as index.html.
Write the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website!</h1>
    <p>This is my first webpage using HTML.</p>
  </body>
</html>

Now, open the file in your browser, and you’ll see your first webpage! 🎉

Step 2: Adding More Elements

HTML lets you add different elements:

Headings: <h1> to <h6>
Paragraphs: <p>
Links: <a href="https://vibrantpatrika.com/">Click here</a>
Images: <img src="image.jpg" alt="My Image">

Lists:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

For example, if you’re writing about General Knowledge facts (see our post), you can list them in HTML.

Step 3: Styling with CSS

So far, your webpage looks plain. Let’s add some style with CSS.

Create a new file called style.css.
Add this code:

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

h1 {
  color: #2c3e50;
  text-align: center;
}

p {
  color: #555;
  font-size: 18px;
}

Link the CSS file to your HTML by adding this line inside <head>:

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

Refresh your browser, and voilà! Your webpage now looks cleaner and more professional.

Step 4: Adding Navigation

Most websites have navigation menus. Let’s add one:

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

With CSS, you can make the menu horizontal:

ul {
  list-style: none;
  background: #333;
  padding: 10px;
}

ul li {
  display: inline;
  margin: 0 15px;
}

ul li a {
  color: white;
  text-decoration: none;
}

This gives your webpage a professional look—similar to websites where you read about Climate Change 101 (check here).

Step 5: Creating Multiple Pages

To make your website more realistic:

Create about.html and contact.html.
Use the same structure but change the content.
Link them using the navigation bar.

Now you have a multi-page website!

Why Learning HTML & CSS is Important

Career Opportunities: Web development is one of the fastest-growing careers.
Freelancing: Many freelancers earn by building websites for small businesses.
Personal Projects: Launch your own blog, portfolio, or e-commerce store.
Understanding Technology: Even if you move into fields like AI or Data Science, knowing how the web works is crucial.

For students preparing for competitive exams like UPSC, coding also appears in technology awareness sections (see our guide on CRISPR).

Common Mistakes Beginners Make

Forgetting to close tags (</p>).
Not linking CSS correctly.
Using outdated tags like <center>.
Ignoring indentation (makes code messy).
Overusing inline CSS instead of external stylesheets.

Avoiding these mistakes ensures your web pages remain clean and professional.

The Future of Web Development

Today, websites are not just about HTML and CSS. New technologies like:

JavaScript – Adds interactivity (sliders, pop-ups, forms).
Responsive Design – Makes sites mobile-friendly.
AI-driven Web Design – Smart tools help automate coding.

If you liked exploring AI in education (read here), web development will be your next exciting adventure.

Creating your first web page with HTML and CSS is easier than most people think. With just a few lines of code, you can transform a blank screen into a functional website.

By learning these basics, you open doors to countless opportunities in tech, freelancing, and entrepreneurship. Remember: every big website—from Google to Facebook—started with simple HTML and CSS.

So, don’t wait! Open your text editor, type some code, and watch your ideas come alive online. 🚀

For more educational reads, check out: