HTML Foundations: From Zero To Your First Web Page - Web Development (Professional Practice)
6
12 hrs
[Beginner] Modern Web Development Foundations - From Zero to Your First Interactive WebsiteThis 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. Introduction4
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. Welcome11:22
1-2. Getting your project ready12:35
1-3. Generating your design22:24
2. The Language of HTML7
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 vocabulary18:44
2-2. The core structure11:07
2-3. Creating content10:20
2-4. Formatting text9:09
2-5. Block and inline elements19:43
2-6. Comments10:14
3. Preparing Your Project Assets6
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 copyright15:42
3-2. Structuring your project folder7: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 logo26: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 headshot8: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 library7: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 media8: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 Structure3
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 footer10: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. Navigation25: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 section11: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 Media5
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 section16: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 section15: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 icons17: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 functional20: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 refinements27: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 Components5
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 card13: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 content11: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 Data2
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 table14: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 details13: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 Form6
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 element15: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 elements21: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 element13: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 options31: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 inputs11: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 button14: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 Document4
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 revisited8: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 tag12: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 favicon3: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.