HTML Foundations: From Zero To Your First Web Page - Web Development (Professional Practice)

HTML is not about making text bold; it is the structural foundation of every website on the internet. This course teaches HTML5 as a professional tool, moving beyond basic tags to focus on writing clean, semantic, and accessible markup - the kind that real-world applications are built upon. This is the first, non-negotiable step in web development. The quality of your HTML directly impacts a site's performance, search engine ranking, and accessibility. Clean, semantic markup makes styling with CSS and manipulating with JavaScript simpler and more reliable. This course teaches you to write HTML that provides a robust foundation for any project and meets modern web standards. You will master the fundamentals of HTML5, from basic content tags to complex forms and media elements. You will learn to structure documents professionally using semantic tags like `<header>`, `<main>`, and `<article>`. By the end, you will build a complete, well-structured webpage from a blank file. This course is designed for the absolute beginner with no prior coding experience. It is the essential starting point for aspiring front-end, back-end, and full-stack developers. It is also invaluable for designers, content creators, and marketers who need to understand the fundamental structure of the web.

Payment required for enrolment

Enrolment valid for 12 months

This course is also part of the following learning track. You may join the track to gain comprehensive knowledge across related courses.

[Beginner] Modern Web Development Foundations - From Zero to Your First Interactive Website

This is the direct path to building professional-grade web development skills. This learning track is a comprehensive programme covering the entire modern front-end stack, engineered to take you from zero knowledge to possessing a practical, portfolio-worthy skillset. It moves logically from foundational web concepts and professional tools, through structuring content with HTML5, styling with modern CSS, and finally, building dynamic user experiences with JavaScript. This programme is built for individuals starting a career in technology with no prior coding experience. It is the essential curriculum for aspiring front-end developers, full-stack engineers, and computer science students. It also serves professionals in adjacent roles - such as UI/UX designers and product managers - who require a practical understanding of web technologies to excel in their careers. By the end of this learning track, you will have the ability to build, style, and launch a fully interactive, responsive website from a blank file. You will master the professional developer's toolkit - Git, the command line, and an AI-assisted editor - and write clean, semantic code. This track provides the foundational project and technical skills to confidently begin your career path toward junior developer roles and to build robust personal or business projects.

Course Chapters

1. Introduction

This chapter sets the stage for your first practical building course. We will connect the professional toolkit you have already mastered in the Concepts and Tools course to the project you are about to build, and establish the core workflow you will use to write and preview your code. By the end, you will: understand the role of HTML; set up a professional project environment; and master the write-save-preview workflow using Live Server in VS Code.

Chapter lessons

1-1. Welcome

8:14

This lesson provides a direct overview of the course. We will define our objective - mastering HTML5 as a professional tool - and outline the structure we will follow to achieve it.

1-2. Getting your project ready

12:35

This lesson combines the command line and Git skills you learned in the first course to create a professional project structure. We will create the project folder, open it in VS Code, create the index.html file, and initialise a Git repository.

1-3. Generating your design

This lesson teaches you how to create a visual target for your project. You will use a professional AI prompt template to generate a high-quality UI Design for your personal portfolio website.

1-4. Your HTML5 workflow

This lesson establishes the core developer loop of writing code, saving, and previewing. We will introduce and set up the "Live Server" extension in VS Code to see our changes update in the browser instantly.

2. The Basic Skeleton

This chapter moves from theory to code. We will construct the mandatory skeleton of a valid HTML5 document and then add the first layer of content. This is where you write your first webpage, focusing on structure and semantic meaning from the very start. You will learn to construct a valid HTML document, populate it with foundational content using headings and paragraphs, and add meaning to your text with semantic formatting tags like <strong> and <em>.

Chapter lessons

2-1. The core structure

We now build the mandatory structure of a valid HTML5 document. This includes the `<!DOCTYPE>` declaration, the root `<html>` element, and the `<head>` and `<body>` sections that separate a page's metadata from its visible content.

2-2. Creating content

The `<body>` tag holds all visible content. This lesson covers the most essential content elements: headings (`<h1>` to `<h6>`) to create a document hierarchy, and paragraphs (`<p>`) for text blocks. All content starts here.

2-3. Formatting text

Formatting text is about adding meaning, not just changing its look. This lesson contrasts older, visual tags with semantic tags like `<strong>` for importance and `<em>` for emphasis. Using the correct tag is a Mark of a professional.

3. Building Your Profile Page

Theory is insufficient; practical application is where learning solidifies. This chapter moves from individual elements to a complete project. We will combine everything learned so far to build a real, multi-section profile page from a blank file. You will structure the page using semantic layouts. You will then add text content using headings and lists, embed your profile image, and create hyperlinks to your social media or other external sites.

Chapter lessons

3-1. Project overview

Before we build, we plan. This lesson presents our final goal: a complete, professional profile page. We will then deconstruct the project and outline the step-by-step process for its construction.

3-2. Adding a profile picture

This lesson covers embedding images with the `<img>` tag. We will define the `src` attribute to link your image file and, crucially, the `alt` attribute for accessibility. Proper `alt` text is a non-negotiable professional requirement.

3-3. Linking to your socials

This lesson focuses on creating external hyperlinks with the `<a>` tag. We will use the `href` attribute to link to your social media profiles and discuss the professional practice of using `target="_blank"` to open these links in a new tab.

3-4. Organizing your links

A list of links requires a list structure. This lesson teaches the professional standard for organizing navigation: wrapping your `<a>` tags inside `<ul>` and `<Li>` elements to create a clean, semantic, and accessible group.

4. Semantic Layout

Professionals build layouts with meaning. This chapter moves beyond generic `<div>` tags to teach the HTML5 semantic elements that define the structural sections of a modern webpage. This practice is crucial for accessibility, SEO, and creating maintainable code. You will learn to use the primary semantic elements to structure a page. This includes defining the `<header>`, `<footer>`, and `<main>` content areas, and organizing content with `<nav>`, `<section>`, and `<article>` tags.

Chapter lessons

4-1. What is semantic HTML?

Semantic HTML means choosing tags based on meaning, not just appearance. This lesson explains why using <article> instead of <div class="article"> is the professional standard for creating clear, accessible, and machine-readable web pages.

4-2. Structuring your page

Theory is over; it is time to build. This lesson applies semantic theory by structuring a document with the most common layout tags: <header>, <nav>, <main>, and <footer>. This is the professional way to define your page's main regions.

4-3. Grouping content

A well-structured page has clear, logical groupings. This lesson introduces the next level of semantic tags: `<section>` for thematic groups, `<article>` for standalone content, `<aside>` for supplementary information, etc.

4-4. A first look at CSS

Professionals keep structure (HTML) and style (CSS) in separate files. This lesson introduces the <link> tag, the essential element used in the <head> to attach an external stylesheet, thereby separating content from presentation.

5. Forms, Tables and Media

This chapter introduces the three key structures for handling complex information and user interaction: forms for input, tables for data, and media elements for images and video. Mastery of these is essential for building real-world applications. You will learn to: build a functional web form for user data collection, structure tabular data correctly using semantic table markup, and embed images and video with essential accessibility features.

Chapter lessons

5-1. Creating a contact form

This lesson puts form theory into practice by building a functional contact form. We will combine the <form> element with accessible labels, various input types, a <textarea> for messages, and a submit button.

5-2. Displaying tabular data

HTML tables are for data, not page layout. This lesson teaches the professional way to structure tabular data using the <table> element and its semantic children, including <thead>, <tbody>, <th>, and <td>.

5-3. Embedding media

We now move beyond text to rich media. This lesson covers the essential tags for embedding video (`<video>`), and audio (`<audio>`), focusing on the critical attributes for accessibility and user controls.

6. Finalizing the Document

Writing the code is only the first step; finalizing it is what makes it professional. This chapter covers the essential final checks for any HTML document, focusing on validation, comments, and metadata. These details ensure your code is robust, maintainable, and discoverable. You will learn to: validate your HTML against official standards to ensure correctness, add comments to improve code clarity, and implement metadata for better SEO and social sharing.

Chapter lessons

6-1. The <head> tag revisited

The <head> contains all the non-visible, but critical, information for your page. This lesson covers the essential metadata within it, including the <title> for the browser tab and the various <meta> tags that control SEO and character encoding.

6-2. Telling the browser about your page

The <meta> tag provides structured data about your document to browsers and search engines. This lesson covers the most important meta tags, including the description for SEO and the viewport for mobile responsiveness. Getting these right is a professional requirement.

6-3. What next?

You have now built the skeleton. This concluding lesson outlines your next logical step: learning CSS to add visual style to your structured HTML documents. The foundation is complete; the next stage is construction.