Web Development — WJEC-CBAC Vocationally-Related Qualification Digital Skills & IT Revision

    This subtopic focuses on the practical skills required to design, build, and test websites using HTML and CSS, with an emphasis on responsive design to ens

    Topic Synopsis

    This subtopic focuses on the practical skills required to design, build, and test websites using HTML and CSS, with an emphasis on responsive design to ensure accessibility across devices. Students will learn to structure content semantically, apply styling for visual appeal and usability, and evaluate the effectiveness of their design through testing. The skills developed are directly applicable to real-world web development roles.

    Key Concepts & Core Principles

    Exam Tips & Revision Strategies

    Common Misconceptions & Mistakes to Avoid

    Examiner Marking Points

    Web Development

    WJEC-CBAC
    vocational

    This subtopic focuses on the practical skills required to design, build, and test websites using HTML and CSS, with an emphasis on responsive design to ensure accessibility across devices. Students will learn to structure content semantically, apply styling for visual appeal and usability, and evaluate the effectiveness of their design through testing. The skills developed are directly applicable to real-world web development roles.

    3
    Learning Outcomes
    4
    Assessment Guidance
    4
    Key Skills
    2
    Key Terms
    4
    Assessment Criteria

    Assessment criteria

    Digital Content Creation

    Topic Overview

    Digital Content Creation is a core component of the WJEC-CBAC A-Level Digital Skills & IT qualification, focusing on the design, development, and evaluation of digital media products. This topic covers the entire content creation lifecycle, from initial planning and audience analysis to the use of industry-standard tools for graphics, audio, video, and interactive media. Students learn to apply principles of design, such as colour theory, typography, and layout, while also considering legal and ethical issues like copyright and accessibility.

    In today's digital economy, the ability to create compelling digital content is a highly sought-after skill. This topic equips students with practical techniques for producing professional-quality assets, whether for marketing, education, or entertainment. By understanding how to select appropriate formats and compression methods, students can optimise content for different platforms, from social media to websites. Mastery of this area also supports other parts of the course, such as web development and data visualisation, making it a versatile foundation for further study or careers in digital media.

    The WJEC-CBAC specification emphasises a project-based approach, where students plan, create, and evaluate their own digital content. This includes writing a creative brief, storyboarding, and using software like Adobe Creative Suite or open-source alternatives. Assessment often involves a practical portfolio where students demonstrate their ability to meet client requirements and target audience needs. By the end of this topic, students should be able to critically analyse existing content and justify their own design choices, preparing them for both exams and real-world digital projects.

    Key Concepts

    Core ideas you must understand for this topic

    • →Target audience analysis: Identifying demographics, psychographics, and user needs to tailor content effectively.
    • →Design principles: Applying contrast, alignment, repetition, and proximity (C.A.R.P.) along with colour theory and typography.
    • →File formats and compression: Understanding lossy vs lossless compression, and choosing appropriate formats (e.g., JPEG, PNG, MP4) for different media.
    • →Legal and ethical considerations: Copyright, Creative Commons licensing, and accessibility standards (e.g., WCAG) for inclusive content.
    • →Evaluation criteria: Using feedback and analytics to assess effectiveness against objectives, such as engagement metrics or usability.

    Learning Objectives

    What you need to know and understand

    • Design and create a website using HTML and CSS
    • Implement responsive design principles
    • Test and evaluate a website

    Assessment Criteria

    Key criteria assessors look for in your portfolio

    • Award credit for demonstrating the use of semantic HTML5 elements (e.g., <header>, <nav>, <section>) appropriately to structure content.
    • Evidence should show the implementation of CSS for layout, typography, and color, with clear separation of content and presentation.
    • A fully responsive design that adapts to at least two screen sizes (e.g., desktop and mobile) using media queries or flexible grids must be evident.
    • The website should be tested and evaluated against a set of defined criteria, such as W3C validation, user testing, and performance checks, with documented outcomes.

    Assessment Guidance

    Guidance for achieving higher grades

    • 💡Begin by sketching a wireframe or site map to plan the structure and user flow before coding.
    • 💡Use a mobile-first approach: style for the smallest screen first, then add media queries for larger screens.
    • 💡Validate your HTML and CSS code using the W3C validator to catch syntax errors that could lose marks.
    • 💡Document your testing methodology clearly, including screenshots of the site on different devices and a summary of any issues found and how they were resolved.
    • 💡When evaluating your own or others' digital content, use specific, measurable criteria from the specification, such as 'fitness for purpose' and 'technical quality'. Avoid vague statements like 'it looks good' — instead, reference design principles or user feedback.
    • 💡In practical tasks, show your working process. Include screenshots of drafts, annotations explaining your choices, and evidence of revisions based on feedback. Examiners reward clear documentation of the iterative design cycle.
    • 💡For exam questions on file formats, memorise key examples: JPEG for photographs (lossy), PNG for graphics with transparency (lossless), and MP4 for video (lossy with H.264 codec). Be ready to justify your choice based on quality, file size, and platform requirements.

    Common Mistakes

    Common errors to avoid in your coursework

    • Using non-semantic markup (e.g., div for everything) instead of appropriate HTML5 elements, leading to poor accessibility and SEO.
    • Confusing absolute and relative units in CSS, causing layout breakage when resizing the viewport.
    • Neglecting to include a viewport meta tag, which prevents responsive behavior on mobile devices.
    • Overlooking the importance of cross-browser testing, resulting in inconsistencies in appearance or functionality.
    • Misconception: 'Higher resolution always means better quality.' Correction: While higher resolution can improve clarity, it increases file size and may not be suitable for all platforms. For web use, balance quality with load times, and consider the viewing context (e.g., mobile vs desktop).
    • Misconception: 'Copyright only applies if you use the entire work.' Correction: Copyright covers any substantial part of a work, including images, text, or audio clips. Always attribute or obtain permission, even for small excerpts, to avoid infringement.
    • Misconception: 'Design is just about making things look pretty.' Correction: Effective design prioritises functionality and communication. A visually appealing product that confuses users fails its purpose. Always align design choices with the content's goals and audience needs.

    Frequently Asked Questions

    Common questions students ask about this topic

    Before You Start

    Prior knowledge that will help with this topic

    • •Basic understanding of computer file management and common file extensions.
    • •Familiarity with using software for editing images or text (e.g., from GCSE IT or personal experience).
    • •Knowledge of internet safety and basic copyright concepts from earlier study.

    Key Terminology

    Essential terms to know

    • HTML/CSS coding
    • Responsive design

    Ready to learn?

    AI-powered learning tailored to this unit

    Related Topics in WJEC-CBAC vocational Digital Skills & IT

    Data Quality

    View Topic

    Data, Information and Knowledge

    View Topic

    Databases

    View Topic

    Emerging Technologies

    View Topic