Introduction

HTML and CSS are the core building blocks of every website: HTML (HyperText Markup Language) defines the structure and content of a page, while CSS (Cascading Style Sheets) controls how that content looks.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Learn the fundamentals of how websites work and what technologies power the web.

To write HTML and CSS, you only need two things you already have :

Notepad (Windows), TextEdit (Mac), or any code editor like VS Code

Chrome, Firefox, Safari, or Edge — any browser works!

You can also practice directly on this website using the "Try It Yourself" sections — no setup needed!

Save it as index.html (make sure it ends with .html , not .txt )

Double-click your index.html file — it will open in your default browser!

You should see "Hello, World!" displayed in your browser!

Congratulations — you just created your first website!

Web development is the process of creating websites and web applications that run in a browser (like Chrome, Safari, or Firefox). Every website you've ever visited — Google, YouTube, Amazon, Instagram — is built using web technologies.

At its core, web development is about three main things:

When you type a website address into your browser (for example: www.example.com), this happens:

Without HTML, nothing exists. Without CSS, everything looks ugly.

Every HTML page follows the same basic structure. Try it yourself!

Tells the browser: "This is a modern HTML5 document."

Wraps the entire website. Everything must be inside this tag.

Contains information about the page (title, meta info, CSS links) — not visible content.

Where everything visible goes — text, images, buttons.

Attributes give extra information to elements.

HTML creates the content. CSS makes it look professional.

Better, but still not ideal for larger projects.

Practice quiz

What does HTML stand for and what is its job?

  • HyperText Markup Language — it describes a page’s structure and content
  • HighText Machine Language — it runs logic
  • HyperTool Markup Language — it styles a page
  • HomeText Markup Language — it stores data

Answer: HyperText Markup Language — it describes a page’s structure and content. HTML is HyperText Markup Language; its job is to describe the structure and content of a page, not to do logic or styling.

What does CSS stand for?

  • Computer Style Sheets
  • Cascading Style Sheets
  • Creative Styling System
  • Colorful Style Syntax

Answer: Cascading Style Sheets. CSS is Cascading Style Sheets; it controls how content looks — colors, fonts, spacing, and layout.

Which declaration must begin every modern HTML5 document?

  • <html5>
  • <!DOCTYPE html>
  • <doctype html5>
  • <meta html>

Answer: <!DOCTYPE html>. <!DOCTYPE html> tells the browser to treat the document as modern HTML5.

Which two top-level tags sit inside <html> in a basic page?

  • <header> and <footer>
  • <title> and <meta>
  • <head> and <body>
  • <style> and <script>

Answer: <head> and <body>. <head> holds non-visible info like the title and meta, while <body> holds the visible content.

Which is the most important (top-level) heading element?

  • <h6>
  • <head>
  • <h1>
  • <title>

Answer: <h1>. Headings run from <h1> (most important) down to <h6>; <h1> is the main heading.

Which attribute holds a link's destination on an <a> element?

  • src
  • link
  • href
  • to

Answer: href. The href attribute on <a> specifies where the link goes; src is for embedded resources like images.

Which CSS selector targets elements by a reusable class name?

  • #name
  • .name
  • name
  • *name

Answer: .name. A leading dot (.name) is a class selector and can apply to many elements; # is for a unique id.

Which selector targets a single unique element by its id?

  • .main
  • #main
  • main
  • @main

Answer: #main. A leading # (#main) is an id selector, and an id should be unique on the page.

Which approach is considered best practice for applying CSS in real projects?

  • Inline styles on every element
  • Internal <style> in the head
  • External CSS in a separate .css file
  • A mix of inline styles only

Answer: External CSS in a separate .css file. External stylesheets keep CSS separate and reusable, which is how real websites are built.

In the CSS box model, which layer is the space OUTSIDE the border?

  • Content
  • Padding
  • Border
  • Margin

Answer: Margin. From inside out: content, padding, border, margin. Margin is the space outside the border that pushes other elements away.