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.

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.

What You'll Learn

Good News: No Installation Required!

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!

Create Your First HTML File (Step-by-Step)

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!

File Extension

What It Is

Opens With

.html

HTML document (structure)

Any web browser

.css

CSS stylesheet (styling)

Linked inside HTML

.js

JavaScript file (behavior)

1) What Is Web Development?

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:

2) How the Web Actually Works

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.

3) What Is HTML?

4) Basic HTML Structure (Every Page Needs This)

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.

5) Common HTML Elements (You Will Use These A LOT)

6) HTML Attributes

Attributes give extra information to elements.

7) What Is CSS?

HTML creates the content. CSS makes it look professional.

8) Basic CSS Example

9) How CSS Is Applied (3 Ways)

1. Inline (NOT recommended)

2. Internal CSS

Better, but still not ideal for larger projects.

3. External CSS (BEST PRACTICE ✅)

10) CSS Selectors (Very Important)

11) The Box Model (Core Concept)

12) What You'll Learn in This Course

Key Takeaways

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.

Continue this course