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.

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.
Modern Web Development Foundations - From Zero to Your First Interactive Website
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.

See more

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.
Concept Overviews
4 Lessons
58:47
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.
Concept Overviews
7 Lessons
1:32:35
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.
Concept Overviews
6 Lessons
1:14:26
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.
Concept Overviews
3 Lessons
47:18
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.
Concept Overviews
5 Lessons
1:37:21
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.
Concept Overviews
5 Lessons
55:29
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.
Concept Overviews
2 Lessons
28:03
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.
Concept Overviews
6 Lessons
1:48:22
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.
Concept Overviews
4 Lessons
33:15