freecourses.digital
Lesson progress: 0 of 4 activities done
All lessons in HTML Basics for Beginners Lesson 1.4 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

Setting up your first HTML file

What we will go through

  • Choosing a free code editor
  • Creating a project folder
  • Saving a file as index.html
  • Opening and refreshing it in the browser

Short answer

To make an HTML file, open a code editor, type some HTML, and save the file with a .html extension, such as index.html. Then double click the file to open it in your browser. Every time you save a change, refresh the browser to see it. That loop of edit, save, refresh is how all web development starts.

Pick a code editor

A code editor is a text editor made for code. It colors your tags and catches typos. Good free choices:

  • Visual Studio Code (VS Code): free, works on Windows, Mac, and Linux. The most popular choice.
  • Notepad++: light and fast on older Windows laptops.
  • Acode or Spck Editor: Android apps if you only have a phone.

Avoid Microsoft Word or Google Docs. They add hidden formatting that breaks HTML.

Organize your project folder

Create one folder for each website. Keep names lowercase with no spaces.

my-first-site/
  index.html
  about.html
  images/
    logo.png
  css/
    style.css

index.html is special. Web servers show it by default when someone visits a folder, so it acts as your homepage.

Your first file

Paste this into a new file in your editor:

<!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 webpage.</p>
</body>
</html>

Save it as index.html inside your folder. Make sure the file is not saved as index.html.txt. On Windows, turn on File name extensions in File Explorer’s View menu to check.

The edit, save, refresh loop

  1. Change something in the editor.
  2. Save with Ctrl + S (or Cmd + S on Mac).
  3. Switch to the browser and refresh with F5 or Ctrl + R.

In VS Code, the free Live Server extension refreshes the browser for you every time you save.

Set up VS Code in five steps

Step 1 of 5

Download VS Code

Go to code.visualstudio.com and install the version for your computer. It is free.

Try it: make it yours

This is a complete starter file. Change the title and heading to your name, then add a second paragraph about where you are from.

Live preview

Quick quiz

1. Which file name is best for a homepage?
2. Why avoid Word for HTML?
3. After saving a change, what do you do?
4. Which is a good folder name?

Common mistakes

  • Saving as .txt. Hidden file extensions on Windows can turn index.html into index.html.txt.
  • Spaces in file names. They turn into %20 in URLs. Use hyphens instead.
  • Forgetting to save. If nothing changes on refresh, check that you saved the file.
  • Editing the wrong copy. Keep one project folder so you do not edit a duplicate.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

Code editor
A text editor built for writing code, like VS Code.
File extension
The letters after the dot that tell the computer the file type, like .html.
index.html
The default homepage file a web server loads for a folder.
Live Server
A VS Code extension that auto refreshes the browser on save.
Project folder
One folder that holds all files for one website.

Questions beginners ask

Can I write HTML on my phone?

Yes. Android apps like Acode work, and so does the live editor on this page. A laptop is easier for bigger projects.

Do I need internet to write HTML?

No. HTML files open from your computer without internet.

How do I put my page online?

You upload the files to a web host. Free options include GitHub Pages and Netlify. That comes after this course.

What is Emmet?

Emmet is a shortcut tool built into VS Code. Typing ! and Tab creates a full HTML starter.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.