Beginner friendly4 weeks36 lessons7 assignments
Watch a free lessonHTML
Build and publish real web pages from scratch using HTML — structuring text, images, links, tables and forms the way employers and clients expect. By the end you'll have three hand-coded pages hosted online that you can show in a portfolio or job application.
Instructor: Alex Olam
Recently in this course
- FeranmifinishedLink between pages with relative paths and to sites with absolute URLs5 days ago
Course content
Module 1
Set Up and Publish Your First Page
- 1.1Install VS Code and Chrome (plus a phone-only setup with Acode)▶ Watch free preview
- 1.2Create your project folder and write your first index.html file
- 1.3Open your page in a browser and reload after every change
- 1.4Use the HTML boilerplate: doctype, html, head and body explained
- 1.5Inspect any live website with Chrome DevTools to read its HTML
- Your First Hand-Coded Page, and Proof You Understand ItAssignment
Module 2
Structure Text Content
- 2.1Write headings h1 to h6 in a logical outline▶ Watch free preview
- 2.2Format paragraphs with strong, em, br and line breaks that behave
- 2.3Add comments and fix broken tags with proper nesting and indentation
- 2.4Use HTML entities for naira signs, arrows and special characters
- 2.5Build a one-page personal bio using only text elements
- Your Bio Page, Marked Up With MeaningAssignment
Module 3
Links, Images and Media
- 3.1Link between pages with relative paths and to sites with absolute URLs▶ Watch free preview
- 3.2Create email, phone and WhatsApp links that open the right app
- 3.3Add images with alt text and compress them for slow connections
- 3.4Jump to sections on the same page with anchor IDs
- 3.5Embed a YouTube video and a Google Map into your page
- A Two-Page Site With Working Contact Links and Real ImagesAssignment
Module 4
Lists, Tables and Page Layout Structure
- 4.1Build ordered, unordered and nested lists for menus and steps▶ Watch free preview
- 4.2Lay out a price list in a table with thead, tbody and th
- 4.3Group content with div and span versus semantic tags
- 4.4Structure a page with header, nav, main, section, article and footer
- 4.5Build a reusable navigation bar and copy it across three pages
- A Three-Page Site With Real StructureAssignment
Module 5
Forms That Collect Real Data
- 5.1Build a contact form with labels, text inputs and a submit button▶ Watch free preview
- 5.2Collect choices with select dropdowns, radio buttons and checkboxes
- 5.3Use email, tel, number and date input types for better mobile keyboards
- 5.4Validate entries with required, pattern, minlength and placeholder
- 5.5Connect your form to Formspree so submissions land in your inbox
- A Working Enquiry Form That Reaches a Real InboxAssignment
Module 6
Accessibility, SEO and Clean Code
- 6.1Write title and meta description tags that show up well in Google▶ Watch free preview
- 6.2Add the viewport meta tag and a favicon for mobile users
- 6.3Make your page screen-reader friendly with alt text, labels and landmarks
- 6.4Check your page through the W3C validator and fix every error
- 6.5Organise files and folders the way real projects are structured
- Audit and Fix Your Site: Search, Validity and Real AccessibilityAssignment
Module 7
Capstone: Build and Launch a Three-Page Business Site
- 7.1Plan the pages and content for a real local business or your own brand▶ Watch free preview
- 7.2Build the home page with hero section, services list and footer
- 7.3Build the about page with a gallery of optimised images
- 7.4Build the contact page with a working form and map
- 7.5Publish the site free on GitHub Pages or Netlify and get your live link
- 7.6Test on a real phone, fix issues and write your portfolio case study
- Capstone: A Live Three-Page Site for a Real Business, With Proof It WorksAssignment
🔒 Assignments open once you've finished the lessons and quizzes in their module. They're marked by an instructor and count towards your certificate.