HTML: A Complete Guide to Structuring Web Pages

This course provides the complete foundation for building websites with HTML. You will learn to structure pages and add all types of content, from text and images to complex forms and tables. We even cover embedding media and setting up your project with Git and GitHub. Every great website starts with clean, well-written HTML. It is the universal language of the web, providing the essential skeleton for every page you see. Mastering this foundation is the single most important first step on your journey in web development. This course is designed for the absolute beginner with no coding experience. We provide a clear path to get you started on your web development journey. It's also a fantastic refresher for any developer who wants to solidify their foundational skills.

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.

Modern Web Development: First Principles

This learning path is your complete guide from a blank page to a fully functional web application. You will start by mastering HTML to structure your content, then use CSS to create beautiful and responsive designs. The journey culminates with JavaScript, where you'll breathe life into your projects with dynamic interactivity. In today's digital world, knowing how to build for the web is a superpower. This track is designed to give you that power, providing a structured path to becoming a confident front-end developer. You won't just learn technologies; you'll build a portfolio and gain the skills to launch a new career. This learning track is crafted for ambitious beginners and career changers. No prior coding experience is necessary; we start from the very first line of code. If you are determined to become a professional web developer, this structured path provides everything you need to succeed.

Course Chapters

Introduction

Browser-server relationship; basic definitions; how to set up your code editor and how to report issues in the chat room.

Chapter lessons

1.Browser and server relations15:27

How the web browser interacts with the server.

2.HTML, CSS and JavaScript17:20

Significance of HTML, CSS and JavaScript to web pages.

3.Documentations10:07

Software documentations and why you need them.

4.Code, program(me), or programming languages?11:31

A look at the meaning of these words, for the sake of theory and formality.

5.Set up your code editor7:05

How to set up your code editor

6.Reporting any issue7:08

How to use the chatroom functionalities to report any problem for the instructor's attention.

Structure of a Web Page

Understanding the structure of web pages (documents) with HTML tags, elements.

Chapter lessons

1.HTML elements and tags8:28

Identifying HTML elements and tags.

2.Body, head and title elements13:05

Understanding HTML body, head and title elements.

3.Attributes6:32

Meaning of attributes and their use.

4.Void or self-closing elements10:30

Void or self-closing HTML elements, with examples.

5.Semantic and non-semantic elements19:42

Meaning of semantic and non-semantic elements, with examples.

6.Block and inline elements9:57

Meaning of block and inline elements, with examples.

Text Elements

HTML text and text-formatting elements and their uses.

Chapter lessons

1.Text content12:42

How to make a text content using headings, paragraphs, addresses and blockquotes.

2.Text formatting12:04

Understanding text formatting elements, for bold, italics, subscripts, superscripts, etc.

3.Character entities13:26

Understanding HTML character entities and their uses.

4.Code formatting and autocomplete16:23

How to format and autocomplete code using VS Code extensions.

Links

HTML anchor element and its uses.

Chapter lessons

1.External links16:22

How to link to external resources using the anchor element.

2.Internal links23:49

How to link to internal resources using the anchor element.

List Elements

HTML list elements and their uses.

Chapter lessons

1.List elements6:41

Understanding ordered, unordered and definition (description) lists.

Image Element

HTML image element, its formatting and uses.

Chapter lessons

1.Image element16:51

Understanding the HTML img element, its attributes and their uses.

2.Personal portfolio project17:49

Getting started on your personal portfolio project.

Form and Input Elements

HTML form and input elements and their uses.

Chapter lessons

1.Input element

Understanding the HTML input element and its uses.

2.Textarea and select elements

Understanding HTML Textarea and Select Elements, and their uses.

3.Label, fieldset and legend

How to label input elements, group them and also label their groups.

4.Form element

HTML form element, input controls.

Table Elements

HTML table elements and their uses.

Chapter lessons

1.Table elements

HTML elements used in constructing a table.

Audio Element

HTML audio element and its use.

Chapter lessons

1.Audio element

The HTML audio element and its use.

Video Element

HTML video element and its use.

Chapter lessons

1.Video element

HTML video element and its use.

2.External content embeds

How to embed external content using iframes.

Head Elements

HTML head elements and their uses.

Chapter lessons

1.Meta element

HTML metadata definitions using the meta element.

2.Link element

Inserting stylesheets, file icons, etc.

3.Script element

How to embed JavaScript code in HTML file.

Git and GitHub

An introduction to continuous deployment and version control using Git and GitHub

Chapter lessons

1.Introduction

An introduction to version control.

2.Create repository

How to create a GitHub repository.

3.Deploy your project

How to deploy your portfolio project.