HTML and CSS are the foundation of every website. If you've ever wanted to build a webpage but didn't know where to start — this guide is for you.

By the end of this article, you'll understand the basics well enough to build your own webpage. And you can practice everything in the Deoit Editor — no installs needed.

What is HTML?

HTML (HyperText Markup Language) is the structure of a webpage. Think of it as the skeleton of a building — it defines what's on the page: headings, paragraphs, images, links, and more.

HTML uses tags — special code wrapped in angle brackets:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<a href="https://example.com">This is a link</a>
<img src="photo.jpg" alt="A photo">

What is CSS?

CSS (Cascading Style Sheets) is the styling. If HTML is the skeleton, CSS is the paint, furniture, and decoration. It controls colors, fonts, layout, spacing, and animations.

h1 {
  color: white;
  font-size: 32px;
}

p {
  color: #888;
  line-height: 1.6;
}

body {
  background: #0d0d0d;
  font-family: system-ui, sans-serif;
}

Your First Webpage (5 minutes)

Open Deoit Editor and paste this into index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my first webpage.</p>

  <h2>About Me</h2>
  <p>I'm learning to code with Deoit.</p>

  <h2>My Favorite Things</h2>
  <ul>
    <li>JavaScript</li>
    <li>Web Development</li>
    <li>Building Things</li>
  </ul>

  <a href="https://deoit.vercel.app">Visit Deoit</a>
</body>
</html>

Then switch to style.css and add:

body {
  max-width: 600px;
  margin: 40px auto;
  padding: 0 20px;
  font-family: system-ui, sans-serif;
  background: #0d0d0d;
  color: #e8e8e8;
}

h1 {
  font-size: 36px;
  margin-bottom: 8px;
}

h2 {
  font-size: 24px;
  margin-top: 32px;
  color: #61afef;
}

p {
  color: #8a8a8a;
  line-height: 1.7;
  margin-bottom: 12px;
}

ul {
  padding-left: 20px;
  margin-bottom: 24px;
}

li {
  margin-bottom: 6px;
  color: #8a8a8a;
}

a {
  color: #e5c07b;
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  text-decoration: underline;
}

Click Run and you'll see your first styled webpage!

The 10 HTML Tags You Need to Know

  1. <h1> to <h6> — Headings (h1 is biggest)
  2. <p> — Paragraph
  3. <a href="..."> — Link
  4. <img src="..." alt="..."> — Image
  5. <ul> and <li> — Unordered list
  6. <ol> and <li> — Ordered list
  7. <div> — Generic container
  8. <span> — Inline container
  9. <button> — Button
  10. <input> — Form input

The 5 CSS Properties You'll Use Every Day

  1. color — Text color
  2. background — Background color or gradient
  3. padding — Space inside an element
  4. margin — Space outside an element
  5. border-radius — Rounded corners

What's Next?

Now that you know the basics, here's your learning path:

  1. HTML — Learn forms, semantic tags, and page structure
  2. CSS — Master Flexbox, Grid, and responsive design
  3. JavaScript — Make your pages interactive

Deoit has 81+ free lessons covering all of these topics. Start with our HTML course and work your way up.

Remember: The best way to learn is by building. Don't just read — open the editor and type the code yourself.