HTML and CSS Basics — OCN London Digital Functional Skills Qualification Digital Skills & IT Revision
This element introduces the fundamental building blocks of web design using HTML to structure content and CSS to style it. Learners will gain practical abi
Topic Synopsis
This element introduces the fundamental building blocks of web design using HTML to structure content and CSS to style it. Learners will gain practical ability to create well-formed web pages, apply styling through selectors, and produce simple responsive layouts compliant with current web standards, laying a vital foundation for digital communication and e-commerce roles.
Key Concepts & Core Principles
- Digital footprint: Every online action leaves a trace; understanding this helps you manage your online reputation and privacy.
- Cyber security: Knowing how to identify phishing emails, create strong passwords, and use antivirus software to protect against threats.
- File management: Organising files into folders, using appropriate naming conventions, and understanding file extensions (e.g., .docx, .pdf).
- Effective online searching: Using Boolean operators (AND, OR, NOT) and evaluating sources for reliability and bias.
- Digital communication etiquette: Writing professional emails, using appropriate language in forums, and respecting others' privacy online.
Exam Tips & Revision Strategies
- Validate your final HTML and CSS code using the W3C validators; error-free code is often a mandatory pass criterion in vocational assessments.
- Use descriptive class names and comment your CSS to explain styling decisions—assessors look for clarity and a professional coding approach.
- Before submission, test your web page in at least two different browsers (e.g., Chrome and Edge) to ensure consistency, as cross‑browser compatibility may be assessed.
- When demonstrating CSS selectors in your assignment, showcase a range including element, class, and ID, and briefly comment on their specificity to show understanding.
- Always test your web page in at least two different browsers (e.g., Chrome, Firefox) and provide screenshots as evidence of cross-browser compatibility.
- Organize your code with clear comments explaining your design decisions, which helps assessors follow your rationale and may contribute to higher marks.
- Ensure all files are named logically (e.g., index.html, styles.css) and submitted in a structured folder to reflect professional project management.
Common Misconceptions & Mistakes to Avoid
- Forgetting to close HTML tags or mismatching opening and closing tags, leading to broken page structure.
- Confusing class (.) and ID (#) selectors in CSS, or overusing ID selectors, causing specificity issues and non‑reusable styles.
- Using outdated HTML4 presentational elements (e.g., <center>, <font>) instead of relying on CSS for styling and semantic HTML5 elements for layout.
- Confusing class and ID selectors, or using IDs for styling elements that repeat on multiple pages, leading to non-reusable code.
- Forgetting to close HTML tags or improperly nesting elements, causing validation errors and unpredictable page rendering.
- Using deprecated HTML tags (e.g., <center>, <font>) or attributes (e.g., bgcolor) instead of CSS for styling, which violates current web standards.
Examiner Marking Points
- Award credit for demonstrating the ability to write a valid HTML5 document with correct doctype and essential elements (head, body, etc.) and for correctly linking an external CSS stylesheet.
- Award credit for accurately using a variety of CSS selectors (element, class, ID) to target and style specific page components, showing an understanding of specificity.
- Award credit for effectively incorporating styling (colours, fonts, spacing) that enhances readability, and for employing current HTML5 semantic elements (e.g., <header>, <nav>, <main>) and CSS Flexbox/Grid to create a simple, responsive two‑column layout.
- Award credit for demonstrating correct use of HTML5 semantic elements (e.g., <header>, <nav>, <main>, <footer>) to structure a web page logically.
- Credit should be given for evidence of applying CSS selectors accurately, including element, class, and ID selectors, to style specific page components.
- Assessors must look for consistent and appropriate application of CSS (external, internal, or inline) with a clear justification for the chosen method in the project context.
- Award credit when the candidate creates a simple, standards-compliant layout using CSS box model properties (margin, border, padding) and positioning techniques (e.g., float, flexbox, grid) appropriately for the task.