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

HTML is not about memorizing tags; it is the professional practice of structuring information. This course teaches HTML5 by guiding you through the construction of a complete, portfolio-ready webpage. We move from a blank file, through a professional asset-preparation phase, to building a multi-section, feature-rich website based on a modern UI design. A well-structured portfolio is a non-negotiable tool for any aspiring developer. The quality of your HTML directly impacts your site's performance, search ranking, and accessibility. This course teaches you to write the clean, semantic, and professional markup that separates a hobbyist's page from an impressive portfolio piece that gets you noticed. You will master the full lifecycle of a modern HTML project. You will prepare all necessary assets using AI and design tools. You will structure a complete page with semantic landmarks, build complex components like project cards and interactive tables, and create a functional contact form. By the end, you will have a complete, well-structured project. This course is designed for the absolute beginner with no prior coding experience. It is the essential starting point for aspiring developers and is invaluable for designers, content creators, and marketers who need to build or understand the fundamental structure of a professional website.

6

12 hrs

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
[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.

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
4

This chapter establishes your professional environment. We will set up the project with version control, generate a design target, and configure a live-preview workflow. This is the standard setup required before writing any code. Key topics: initialising a project folder and Git repository; generating a target UI Design; and configuring an instant-preview workflow with Live Server.

Chapter lessons

1-1. Welcome
11:22

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
22:24

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
12:26

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 Language of HTML
7

This chapter teaches the fundamental grammar of HTML. We define the core vocabulary of elements and tags, construct a valid page structure, and add basic, semantic content. These are the non-negotiable building blocks for any web page. Key topics: defining HTML vocabulary (tags, elements); building a valid page structure; adding content with semantic text; and understanding element display behaviour.

Chapter lessons

2-1. HTML vocabulary
18:44

This lesson defines the core building blocks of any HTML page. We will clarify the difference between an element and a tag, and explain the roles of attributes, parents, children, and siblings.

2-2. The core structure
11:07

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-3. Creating content
10:20

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-4. Formatting text
9:09

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.

2-5. Block and inline elements
19:43

This lesson explains the two main display behaviours of HTML elements. We will cover how block elements take up their own line, while inline elements sit within the flow of text.

2-6. Comments
10:14

This lesson covers the professional habit of writing comments in your code. We will explain the syntax for HTML comments and their critical role in documenting and debugging your work.

2-7. Special characters
13:18

This lesson explains how to handle special characters that have a meaning in HTML, like the less-than sign. We will introduce character entities as the professional method for displaying these reserved characters correctly.

3. Preparing Your Project Assets
6

This chapter establishes a professional workflow for asset management. We will source, create, and organise all required media - logos, headshots, and icons - before building the page. A structured and legally compliant asset base is essential. Key topics: understanding asset copyright; structuring the project folder; creating a logo and headshot; and choosing a modern icon library.

Chapter lessons

3-1. Asset copyright
15:42

This essential lesson covers the professional responsibility of using assets. We will explain the basics of copyright and why you cannot use just any image you find online. We will then discuss the importance of using royalty-free or self-generated assets for your portfolio.

3-2. Structuring your project folder
7:23

We will create a clean, professional folder structure for our project. This lesson covers creating an 'assets' or 'public' directory to keep our images and logo organised from the start.

3-3. Creating your logo
26:49

This is a practical lesson on using a free tool like Canva. You will create a simple, professional text-based logo or wordmark for your personal portfolio project.

3-4. Preparing your professional headshot
8:16

This lesson covers how to choose a good professional photo for your portfolio. We will then use a free online tool to easily remove the background, preparing it for our design.

3-5. Choosing an icon library
7:41

This lesson explains why we use modern icon libraries instead of simple image files. We will choose a professional library and learn how to get the SVG code we will need to implement our icons later in this course.

3-6. Generating placeholder media
8:35

We will use an AI image generator to create a professional placeholder image and a short video clip. These assets will be used for our project cards later in the course.

4. Building the Page Structure
3

This chapter focuses on building the high-level skeleton of our portfolio page using semantic HTML. We will translate the main visual sections of our design into the correct, professional HTML5 structural elements. By the end, you will: structure your page with header and footer landmarks; create a navigation bar with the nav element; and use main and section elements to define the primary content areas of your page.

Chapter lessons

4-1. Header and footer
10:09

We will build the very top and very bottom of our page. This lesson covers the correct usage of the <header> and <footer> elements as main page landmarks.

4-2. Navigation
25:54

This lesson covers building the navigation bar inside our header. We will introduce the <nav> element and explain why an unordered list (<ul>) is the correct semantic choice for a menu. You will then build the navigation structure using <ul>, <Li>, and <a> tags.

4-3. Main and section
11:15

This lesson covers how to structure the main content of our page. We will use the <main> element to wrap our primary content and <section> elements to create our distinct sections.

5. Adding Core Content and Media
5

With the main structure in place, this chapter is about populating our sections with their actual content. We will add the text, images, and icons that make up the hero, skills, and social media sections of our portfolio. By the end, you will: build a complete hero section with text and an image; understand the critical attributes of the img element; implement SVG icons; and make links functional.

Chapter lessons

5-1. Building the hero section
16:58

We will bring the top of our portfolio to life. This lesson covers adding your name with an <h1> tag, your tagline with a <p> tag, and your professional headshot using the <img> element, including a discussion of its essential src and alt attributes.

5-2. Building the About Me section
15:02

This lesson focuses on creating the "About Me" section. We will add an <h2> for the section title and then write the professional summary inside <p> tags.

5-3. Adding icons
17:42

This lesson covers the professional way to add icons. We will learn how to get SVG code from a library like Heroicons and embed it in our HTML to create the skills and social media sections.

5-4. Making links functional
20:09

This lesson covers the <a> (anchor) tag. We will make our navigation and social media links functional by adding their required href attributes.

5-5. Some refinements
27:30

This final lesson adds the professional finishing touches to our project. We will add our brand logo to the header and refactor our skills and social media links into semantic lists, using a specialised icon library for professional-grade accessibility.

6. Structuring Complex Components
5

This chapter focuses on a critical professional skill: building repeatable components. We will build the HTML structure for the "Project Card" from our design, integrating different media types for a dynamic result. By the end, you will: understand the role of the div element; build a reusable project card structure; and embed static images, local videos, and third-party videos into your project.

Chapter lessons

6-1. Structuring the project card
13:09

This lesson introduces the <div> element. We will then build the complete HTML structure for all three of our project cards, creating placeholders for the static image, the local video, and the embedded third-party video.

6-2. Project card (1)
15:45

This lesson introduces the <video> element. We will implement our placeholder video clip, learning about important attributes like 'controls' and 'autoplay'.

6-3. Project card (2)
2:58

In our second project card, we will implement the placeholder image we generated earlier, using the standard <img> element.

6-4. Project card (3)
12:21

This lesson covers the <iframe> element. We will learn the professional method for embedding a third-party video into our final project card.

6-5. Finalising content
11:16

This final lesson focuses on the professional habit of writing clear and compelling content. We will write the titles, short descriptions, and links for each of our portfolio projects.

7. Displaying Tabular Data
2

This chapter focuses on the correct, professional way to display structured data. We will build a complete "Experience" table for our portfolio, including an interactive, expandable section for details. By the end, you will: build a complete, semantically correct table; and use the details and summary elements to add interactive, expandable content to your table rows.

Chapter lessons

7-1. Building your experience table
14:53

This lesson introduces the <table> element and its core children: <thead>, <tbody>, <tr>, <th>, and <td>. We will then use this knowledge to build a complete, semantically correct table to display your education or work experience.

7-2. Adding expandable details
13:10

His lesson introduces the <details> and <summary> elements. We will use them to add an interactive, expandable section to our table for displaying detailed accomplishments.

8. Building the Contact Form
6

This chapter covers the essential HTML for collecting user input. We will build the complete structure for the portfolio's contact form, a non-negotiable component for enabling professional communication. You will learn to handle everything from simple text fields to complex option selectors, ensuring your form is both functional and accessible. By the end, you will: build a complete and accessible form; use various input types for different data, including text, email, and options; semantically group related inputs using fieldset and legend; and provide a functional submission button.

Chapter lessons

8-1. The form element
15:11

This lesson introduces the <form> element, the essential container for all input fields. We will discuss its role and important attributes like 'action' and 'method'.

8-2. The input and label elements
21:01

We will learn how to create text fields using the <input> element and how to properly associate them with a <label> for accessibility, which is a non-negotiable professional standard.

8-3. The textarea element
13:54

Use <textarea> for multi-line input. Learn its key attributes, when to use it over <input>, and how to integrate it into a working contact form.

8-4. Setting options
31:59

Use <select>, <option>, checkboxes, and radios to capture choices. Learn when each fits, how to structure them, and how to apply them in a contact form.

8-5. Grouping inputs
11:49

Use <fieldset> and <legend> to group related inputs. Learn how grouping improves clarity, accessibility, and structure in a professional contact form.

8-6. The submit button
14:28

Use <button> or <input type="submit"> to send form data. Learn their differences, key attributes, and how to place the submit button correctly in a contact form.

9. Finalising the Document
4

This final chapter covers the essential "behind-the-scenes" tags in the document <head> that make your page professional, complete, and ready for the world. These details control how your site appears in search engines and social media, and prepare it for styling. By the end, you will: understand the role of the <head> element; add essential meta tags for SEO and social sharing; set a custom favicon for your site; and understand how to link a CSS file for the next course.

Chapter lessons

9-1. The head element revisited
8:47

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.

9-2. The meta tag
12:41

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.

9-3. Adding a favicon
3:48

This lesson covers how to add a custom icon to your browser tab. We will use the <link> tag to set the logo file we created earlier as our site's favicon.

9-4. What next?
7:59

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.