Programming in HTML5 with JavaScript and CSS3

    CITY & GUILDS LIMITED
    Vocational

    Programming in HTML5 with JavaScript and CSS3 involves creating interactive web pages. Skills include coding, styling, using APIs, and implementing responsive design for modern web applications.

    9
    Learning Outcomes
    33
    Assessment Guidance
    33
    Key Skills
    9
    Key Terms
    47
    Assessment Criteria

    Assessment criteria

    City & Guilds Level 2 Diploma in ICT Systems and Principles for IT Professionals
    City & Guilds Level 4 Diploma For ICT Professionals (Systems and Principles)
    City & Guilds Level 3 Diploma in ICT Professional Competence
    City & Guilds Level 2 Award in ICT Systems and Principles
    City & Guilds Level 3 Certificate in ICT Systems and Principles
    City & Guilds Level 2 Certificate in ICT Systems Support
    City & Guilds Level 3 Diploma in ICT Systems Support
    City & Guilds Level 3 Diploma in ICT Systems and Principles for IT Professionals
    City & Guilds Level 2 Diploma in ICT Systems Support

    Topic Overview

    The City & Guilds Level 3 Certificate in ICT Systems and Principles is a vocational qualification designed to equip students with the practical skills and theoretical knowledge needed to work in the ICT industry. It covers a broad range of topics including computer hardware, software, networking, database design, and cybersecurity. This qualification is ideal for those seeking a career as an IT technician, network administrator, or systems analyst, as it provides a solid foundation in both the principles and practical application of ICT systems.

    The course is structured around mandatory units that cover the fundamentals of ICT, such as computer systems, software installation and configuration, and network principles. Optional units allow students to specialise in areas like web development, database management, or IT security. Assessment is through a combination of externally set exams and internally assessed practical assignments, ensuring that students can demonstrate both their understanding and their ability to apply knowledge in real-world scenarios.

    This qualification is recognised by employers and further education institutions across the UK. It aligns with the National Occupational Standards for ICT and provides a pathway to higher-level qualifications such as the City & Guilds Level 4 Diploma in ICT or university degrees in computer science. By studying this certificate, students develop critical thinking, problem-solving, and technical skills that are highly valued in the modern workplace.

    Key Concepts

    Core ideas you must understand for this topic

    • →Computer hardware components: Understanding the function of CPU, RAM, storage devices, motherboard, and peripherals, and how they interact within a system.
    • →Operating systems and software: Knowledge of different types of operating systems (Windows, Linux, macOS), their functions, and how to install, configure, and troubleshoot software applications.
    • →Networking fundamentals: Concepts such as IP addressing, subnetting, network topologies, protocols (TCP/IP, HTTP, FTP), and the OSI model.
    • →Database design and SQL: Principles of relational databases, normalisation, entity-relationship diagrams, and writing SQL queries to retrieve and manipulate data.
    • →Cybersecurity principles: Threats such as malware, phishing, and social engineering, and countermeasures including firewalls, encryption, and access control.

    Learning Objectives

    What you need to know and understand

    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process

    Assessment Criteria

    Key criteria assessors look for in your portfolio

    • Create HTML5 pages with semantic elements.
    • Write JavaScript code to add interactivity.
    • Style pages using CSS3 including layout and animations.
    • Use HTML5 APIs for features like geolocation and offline support.
    • Create a valid HTML5 page with semantic elements.
    • Write JavaScript code to manipulate the DOM and handle events.
    • Style a webpage using CSS3 including responsive design.
    • Implement a form with HTML5 validation.
    • Use AJAX to communicate with a remote data source.
    • Creates well-structured HTML5 pages with semantic elements.
    • Writes JavaScript code to add interactivity and functionality.
    • Styles pages effectively using CSS3, including responsive design.
    • Implements forms with validation and data submission.
    • Uses APIs and Web Sockets appropriately for real-time features.
    • Award credit for demonstrating the correct use of semantic HTML5 elements (e.g., <header>, <nav>, <article>) to structure page content logically.
    • Expect evidence of form validation using both HTML5 attributes and JavaScript, with clear error messaging for user input.
    • Look for effective CSS3 styling that includes responsive design techniques such as media queries and flexible layouts, ensuring usability across devices.
    • Assess the implementation of at least one HTML5 API (e.g., Geolocation, Canvas, Web Storage) integrated seamlessly into the application.
    • Check that offline support is correctly implemented using the Application Cache or Service Worker, with fallback behaviour when offline.
    • Verify that any real-time communication using Web Sockets is functional and handles connection events appropriately.
    • Ensure Web Worker processes are used for background tasks without blocking the main UI thread, evidenced by non-janky performance.
    • Create semantic HTML5 structure.
    • Write JavaScript code for interactivity.
    • Style pages using CSS3 including responsive design.
    • Implement forms with validation.
    • Use APIs for advanced functionality.
    • Award credit for demonstrating correct use of semantic HTML5 elements (e.g., <header>, <nav>, <section>, <footer>) to structure web pages logically.
    • Evidence must show JavaScript code that manipulates the DOM effectively, such as handling events, updating content, and validating form data client-side.
    • Assessors should expect CSS3 styling that includes responsive design techniques (media queries, flexible units) to create an adaptive user interface.
    • For API use, credit is given for correctly implementing at least one HTML5 API (e.g., Canvas for graphics, localStorage for offline support, WebSocket for real-time data) within a functional web application.
    • Look for clear communication with a remote data source using Fetch or XMLHttpRequest, with appropriate handling of asynchronous operations and errors.
    • Evidence should include a working Web Worker process that offloads a task from the main thread, demonstrating improved performance or non-blocking execution.
    • Create well-structured HTML5 pages.
    • Write JavaScript code to add interactivity.
    • Style pages effectively using CSS3.
    • Implement forms and handle user input.
    • Use APIs for advanced functionality like graphics and real-time comms.
    • Creates semantic HTML5 pages with appropriate structure.
    • Uses JavaScript to add interactivity and handle events.
    • Styles pages effectively using CSS3 including responsive design.
    • Implements forms with validation and communicates with remote data sources.
    • Uses HTML5 APIs for graphics, offline support, or real-time communication.
    • Create HTML5 pages with semantic elements like header, nav, and article.
    • Code JavaScript to manipulate the DOM and handle events.
    • Style pages using CSS3 including flexbox, grid, and animations.
    • Implement form validation and communicate with a remote data source using AJAX or Fetch.
    • Use HTML5 APIs such as Geolocation, Web Storage, and Canvas.

    Assessment Guidance

    Guidance for achieving higher grades

    • 💡Practice coding examples from the objectives.
    • 💡Understand the DOM and event handling.
    • 💡Use developer tools to debug.
    • 💡Use the browser developer tools for debugging.
    • 💡Keep CSS separate from HTML for maintainability.
    • 💡Practice using the Fetch API for asynchronous requests.
    • 💡Use browser developer tools to debug and test.
    • 💡Practice building small projects that combine HTML, CSS, and JS.
    • 💡Stay updated with modern best practices and APIs.
    • 💡When presenting coursework, clearly document the purpose and functionality of each API used, and include code comments to demonstrate understanding.
    • 💡Test your web application on multiple devices and browsers; include screenshots in your evidence to prove responsive and adaptive design.
    • 💡Plan the user interface layout before coding; use wireframes to show how HTML5, CSS3, and JavaScript work together to achieve the design.
    • 💡For the remote data communication task, handle network errors gracefully and display user-friendly messages; examiners look for robust error handling.
    • 💡Demonstrate progressive enhancement: build a core experience with HTML and CSS, then layer JavaScript for interactivity, ensuring basic functionality without scripts.
    • 💡Refer to the marking criteria frequently during development to ensure all learning outcomes are evidenced; tick off each 'be able to' statement as you implement it.
    • 💡Use developer tools to debug code.
    • 💡Test on multiple browsers.
    • 💡Keep code organised with comments.
    • 💡Always start with a valid, semantic HTML5 skeleton when building pages, as this demonstrates fundamental understanding and earns easy marks.
    • 💡For JavaScript tasks, comment your code to explain logic, especially for complex DOM interactions or API calls, as evidence must show your reasoning.
    • 💡When styling with CSS3, use a mobile-first approach with a media query to scale up; this naturally demonstrates adaptive UI principles.
    • 💡During assessments, show step-by-step progression: first create static HTML/CSS, then add JavaScript, then enhance with APIs, ensuring each layer works before proceeding.
    • 💡For real-time communication or web workers, provide a simple, clear demonstration (e.g., a chat echo or prime number calculation) rather than a complex, incomplete implementation.
    • 💡Ensure all remote data source communications are secured and handled gracefully with user feedback for loading, success, and error states.
    • 💡Use semantic HTML5 elements.
    • 💡Test code in multiple browsers.
    • 💡Keep JavaScript unobtrusive.
    • 💡Use the latest HTML5 semantic elements (e.g., <header>, <nav>).
    • 💡Practice using the Canvas API and Web Storage.
    • 💡Test your pages in multiple browsers.
    • 💡Use the browser's developer tools to debug and test.
    • 💡Validate your HTML and CSS using online validators.
    • 💡Practice building a single-page application with multiple features.
    • 💡When answering exam questions on networking, always refer to the OSI model layers when explaining how data is transmitted. This shows a deeper understanding and can earn you extra marks. For example, mention that TCP operates at the Transport layer and IP at the Network layer.
    • 💡For practical assignments, document every step of your process, including any troubleshooting you performed. Examiners look for evidence of systematic problem-solving and the ability to justify your choices. Screenshots and clear explanations can make a big difference.
    • 💡In database design questions, always normalise your tables to at least third normal form (3NF) unless the question specifies otherwise. Many students lose marks by leaving tables unnormalised or by over-normalising without justification.

    Common Mistakes

    Common errors to avoid in your coursework

    • Not separating structure, style, and behaviour.
    • Forgetting to test cross-browser compatibility.
    • Misusing APIs or not handling errors.
    • Not closing tags or improper nesting in HTML.
    • Using global variables excessively in JavaScript.
    • Forgetting to test cross-browser compatibility.
    • Not separating structure, style, and behaviour.
    • Ignoring cross-browser compatibility issues.
    • Overcomplicating code without proper comments or organisation.
    • Misusing semantic elements: using <div> and <span> for everything instead of appropriating structural tags, leading to poor accessibility.
    • Overlooking cross-browser compatibility: relying on features not supported in all required browsers without providing polyfills or fallbacks.
    • Failing to handle asynchronous operations properly, resulting in race conditions or unresponsive interfaces when fetching remote data.
    • Ignoring form validation on the server side: relying solely on client-side validation, leaving the application vulnerable to malicious data.
    • Implementing offline support incorrectly, such as not specifying a fallback page or misconfiguring the manifest, causing the app to break when offline.
    • Neglecting to terminate Web Workers or Web Socket connections when no longer needed, leading to memory leaks.
    • Not validating HTML or CSS syntax.
    • Ignoring cross-browser compatibility.
    • Overusing global variables in JavaScript.
    • Confusing HTML5 semantic elements with generic <div> tags, leading to poorly structured and less accessible pages.
    • Incorrect handling of JavaScript asynchronous operations, resulting in issues like undefined data or frozen UI when fetching remote data without proper callbacks/promises.
    • Overlooking form validation beyond HTML5 built-in attributes, failing to provide custom JavaScript validation for a seamless user experience.
    • Misunderstanding the box model and positioning in CSS3, causing layout breaks on different screen sizes despite using media queries.
    • Attempting to use Web Workers without a clear understanding of the separate global scope, leading to errors from accessing DOM or other main thread resources.
    • Implementing WebSocket communication without proper error handling and reconnection logic, resulting in unreliable real-time features.
    • Not separating structure, style, and behaviour.
    • Poor error handling in JavaScript.
    • Ignoring cross-browser compatibility.
    • Not separating structure, style, and behaviour (HTML, CSS, JS).
    • Ignoring cross-browser compatibility issues.
    • Overcomplicating code without using built-in APIs.
    • Not separating structure, style, and behaviour (HTML, CSS, JS).
    • Using inline styles or event handlers instead of external files.
    • Ignoring cross-browser compatibility issues.
    • Misconception: 'The CPU's clock speed is the only factor determining performance.' Correction: While clock speed is important, other factors like the number of cores, cache size, and architecture also significantly impact performance. For example, a multi-core processor can handle multitasking better than a single-core processor with a higher clock speed.
    • Misconception: 'A firewall alone provides complete network security.' Correction: Firewalls are essential but not sufficient. They must be combined with other measures like antivirus software, regular updates, strong passwords, and user training to create a defence-in-depth strategy.
    • Misconception: 'SQL is only used for querying data.' Correction: SQL is also used for defining database structures (DDL), manipulating data (DML), and controlling access (DCL). Understanding these different sublanguages is crucial for effective database management.

    Frequently Asked Questions

    Common questions students ask about this topic

    Pass / Merit / Distinction Evidence Checklist

    How your portfolio evidence is graded for CITY & GUILDS LIMITED Programming in HTML5 with JavaScript and CSS3

    Every vocational unit is marked against named criteria rather than an exam percentage. Your tutor's brief lists the exact codes for this unit — here is what each band is asking you to do.

    Pass (P)

    Demonstrate baseline knowledge, accurate terminology, and core practical application.

    Merit (M)

    Provide detailed analysis, structured explanations, and clear workplace reasoning.

    Distinction (D)

    Deliver thorough evaluation, original problem solving, and fully justified recommendations.

    Before You Start

    Prior knowledge that will help with this topic

    • •A basic understanding of computer hardware and software, such as being able to identify common components and their functions.
    • •Familiarity with using a computer, including file management, installing software, and using the internet.
    • •Some mathematical ability, particularly in binary and hexadecimal numbering systems, as these are used in IP addressing and data representation.

    Coursework AI Review

    Paste your assignment brief and check your draft against its P/M/D criteria

    Open Coursework Review

    Key Terminology

    Essential terms to know

    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process
    • Be able to create HTML5 pages, Be able to code using JavaScript, Be able to create forms using HTML5, Be able to communicate with a remote data source, Be able to style HTML5 by using CSS3, Be able to create interactive pages using HTML5 Application Programming Interfaces (APIs), Be able to add offline support web applications, Be able to implement an adaptive User Interface (UI), Be able to create graphics, Be able to animate the User Interface (UI), Be able to implement Real Time communications by using Web sockets, Be able to create a Web Worker Process

    Ready to learn?

    AI-powered learning tailored to this unit

    Related Topics in CITY & GUILDS LIMITED Vocational Computer Science

    E2E stub concept

    View Topic

    City & Guilds Level 4 End-point Assessment for Network Engineer - Core Content

    View Topic

    City & Guilds Level 3 End-point Assessment for Software Development Technician - Core Content

    View Topic

    Number and Algebra

    View Topic