HTML & CSS Complete Beginner Guide — Build Your First Website

What is HTML?

HTML (HyperText Markup Language) is the structure of every webpage on the internet. Think of it as the skeleton of a website.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

What is CSS?

CSS (Cascading Style Sheets) is what makes your HTML look beautiful. It controls colors, fonts, spacing, and layout.

body {
  background-color: #0a0a0a;
  color: white;
  font-family: 'Inter', sans-serif;
}

h1 {
  color: #22c55e;
  font-size: 2rem;
}

The Box Model

Every HTML element is a box with:

• Content — your text or image
• Padding — space inside the border
• Border — the outline
• Margin — space outside the border

Understanding the box model is the most important CSS concept for beginners.

Flexbox in 2 Minutes

Flexbox makes alignment effortless:

.container {
  display: flex;
  justify-content: center;  /* horizontal */
  align-items: center;      /* vertical */
  gap: 1rem;
}

Responsive Design

Use media queries to make your site look great on all screen sizes:

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

What to Learn Next?

After HTML & CSS, move to:

1. 1JavaScript — add interactivity
2. 2CSS Frameworks — Bootstrap or Tailwind CSS
3. 3React.js — build modern UIs

At Sohail Code Academy, our Full Stack course starts from HTML and takes you all the way to building production-ready apps.