Vibe Coding with HTML5

By the end of this module learners should be able to:

• Explain Vibe Coding in simple terms.
• Identify the basic components of a website.
• Explain the role of HTML5.
• Understand the relationship between HTML, CSS and JavaScript.
• Use an AI coding assistant to generate basic HTML.
• Create and open a simple HTML document in a browser.

• Introduction to Vibe Coding
• What is web development?
• Introduction to HTML5
• How websites work
• Web browsers and web pages
• HTML document structure
• Elements, tags and attributes
• Using AI to generate HTML
• Understanding AI-generated code
• File and folder organisation

Build a Personal Introduction Page: Learners use an AI coding assistant to create a simple page containing:

• Name
• Short biography
• Interests
• Hobbies
• Contact information

Expected outcome

Learners can create, save, open and explain a basic HTML5 webpage and understand the role of AI in generating and modifying code.

Learners should be able to:

• Create properly structured HTML documents.
• Use headings and paragraphs appropriately.
• Format text using HTML elements.
• Create lists.
• Add hyperlinks.
• Use comments and attributes.
• Prompt AI to generate structured content.

• HTML document hierarchy
• Headings
• Paragraphs
• Text formatting
• Comments
• Ordered and unordered lists
• Links and navigation
• Absolute and relative links
• HTML attributes
• Semantic content organisation
• AI prompting for content generation

Build a Personal Profile/Portfolio Introduction

Create a webpage containing:

• About Me
• Education
• Skills
• Hobbies
• Useful links
• Career interests

Expected outcome

Learners can structure and organise information using appropriate HTML5 elements and use AI to improve the structure and content of their webpage.

By the end of this module, learners should be able to:

• Insert and organise images.
• Create accessible image descriptions.
• Embed audio and video.
• Use hyperlinks effectively.
• Understand basic multimedia file management.
• Prompt AI to improve multimedia integration.

• HTML <img> element
• Image attributes
• Alternative text
• Image sizing
• Audio
• Video
• Embedding external media
• File paths
• Multimedia accessibility
• Copyright and responsible use of digital content
• AI-assisted multimedia integration

Build a Digital Gallery

Learners create a webpage featuring:

• A gallery of images
• Image descriptions
• Embedded video
• Audio content
• Links to relevant resources

Expected outcome

Learners can create an engaging multimedia webpage while applying basic accessibility and responsible digital-content practices.

Learners should be able to:

• Create basic HTML forms.
• Use different input types.
• Create labels and form controls.
• Apply basic HTML5 validation.
• Understand how user information is collected.
• Use AI to generate and improve forms.

• Introduction to HTML forms
• <form> element
• Text inputs
• Email inputs
• Password inputs
• Radio buttons
• Checkboxes
• Dropdown menus
• Text areas
• Buttons
• Labels
• Required fields
• Basic HTML5 validation
• User-friendly form design

Build a Registration/Contact Form

Create a functional form containing:

• Full name
• Email address
• Phone number
• Gender/options
• Area of interest
• Message
• Submit button

Expected outcome

Learners can create a structured HTML5 form that collects user information and applies basic validation.

Learners should be able to:

• Explain semantic HTML.
• Identify appropriate semantic elements.
• Structure a webpage professionally.
• Create navigation sections.
• Improve accessibility and readability.
• Ask AI to review and improve HTML structure.

• Semantic vs. non-semantic HTML
• <header>
• <nav>
• <main>
• <section>
• <article>
• <aside>
• <footer>
• Page hierarchy
• Website navigation
• Accessibility fundamentals
• Clean HTML structure
• AI-assisted code review

Build a Business/Organisation Homepage

Learners create a homepage containing:

• Header
• Navigation menu
• Hero section
• About section
• Services
• News/articles
• Contact section
• Footer

Expected outcome

Learners can design a professionally structured webpage using semantic HTML5 and explain why different elements are used.

Learners should be able to:

• Write effective coding prompts.
• Give clear instructions to AI coding tools.
• Identify errors in AI-generated HTML.
• Debug simple HTML problems.
• Ask AI to explain unfamiliar code.
• Modify generated code independently.
• Iteratively improve a webpage.

• Introduction to AI coding assistants
• Anatomy of an effective coding prompt
• Context and requirements
• Giving AI constraints
• Asking AI to explain code
• Debugging HTML
• Identifying broken tags
• Fixing missing attributes
• Improving accessibility
• Refactoring generated HTML
• Testing and iteration
• Responsible use of AI-generated code

AI-Assisted Website Improvement Challenge

Learners receive a basic or intentionally flawed webpage and use AI to:

• Identify problems.
• Explain the problems.
• Generate corrections.
• Test the corrections.
• Improve the webpage.
• Explain what they changed.

Expected outcome

Learners demonstrate the ability to use AI as a coding assistant, understand generated HTML, identify errors and iteratively improve their work.

Learners should be able to:

• Plan a website before coding.
• Convert requirements into AI prompts.
• Develop multiple HTML pages.
• Connect pages using navigation.
• Organise website files.
• Test website functionality.
• Review and improve generated code.

• Website planning
• Defining user requirements
• Creating a site map
• Writing development prompts
• Multi-page HTML websites
• Navigation between pages
• File organisation
• Reusable page structures
• Website testing
• Debugging
• AI-assisted optimisation

Mini Website Project

Learners develop a 3–5 page website for one of the following:

• Small business
• Training centre
• Personal portfolio
• Community organisation
• School
• NGO
• Digital service
• Event

Suggested pages:

• Home
• About
• Services/Programmes
• Gallery/Projects
• Contact

Expected outcome

Learners can independently plan and build a functional multi-page HTML5 website using Vibe Coding principles.

By the end of the week, learners should be able to:

• Complete an HTML5 website independently.
• Use AI effectively throughout the development process.
• Test and debug their website.
• Apply basic accessibility principles.
• Explain their development process.
• Present their project professionally.
• Demonstrate what they understand rather than simply displaying AI-generated output.

• Capstone project development
• Website testing
• HTML validation
• Debugging
• Accessibility checks
• Content review
• Code organisation
• AI-generated code review
• Project documentation
• Presentation skills
• Project demonstration
• Peer review and feedback

Final Vibe Coding Website Project

Each learner develops and presents a complete HTML5 website.

The project should demonstrate:

• Proper HTML5 structure
• Semantic elements
• Text and content
• Images
• Links
• Navigation
• Forms
• Multimedia where appropriate
• Accessibility considerations
• Effective use of AI
• Clean file organisation

Expected outcome

Learners complete and present a functional HTML5 website and demonstrate the ability to use Vibe Coding, AI prompting, HTML5 development, debugging and iterative improvement.