Overview

Framework:
RQF
Level:
Level 5
Unit No:
H/617/9937
Credits:
12
Guided learning hours:
102 hours

Aim

This unit aims to provide learners with the knowledge and skills needed to build a Frontend web application. It includes understanding the principles of responsive design, documentation and effective layout of content.

Unit Learning Outcomes

1

Design a Frontend web application based on the principles of user experience design, accessibility and responsivity.

Assessment Criteria

  • 1.1

    Design a website that incorporates a main navigation menu and a structured layout.

  • 1.2

    Design a website that meets accessibility guidelines (e.g. contrast between background and foreground colours, non-text elements have planned alternative text equivalents to cater for the visually impaired).

  • 1.3

    Design the organisation of information on the page following the principles of user experience design (headers are used to convey structure, information is easy to find due to being presented and categorised in terms of priority). 

  • 1.4

    Ensure that foreground information is never distracted by backgrounds.

  • 1.5

    Include graphics that are consistent in style and colour.

  • 1.6

    Design the site to allow the user to initiate and control actions such as pop-ups and playing of audio/video.


2

Develop and implement a static Frontend web application using HTML and CSS.

Assessment Criteria

  • 2.1

    Create a website of at least 3 pages, or (if using a single scrolling page) at least 3 separate page areas, to match the design and to meet its stated purpose.

  • 2.2

    Write custom CSS code that passes through the official (Jigsaw) validator with no issue.

  • 2.3

    Write custom HTML code that passes through the official W3C validator with no issues.

  • 2.4

    Incorporate images that are of sufficient resolution to not appear pixelated or stretched.

  • 2.5

    Code all external links to open in a separate tab when clicked.

  • 2.6

    Use CSS media queries or CSS Grid/Bootstrap across the application to ensure the layout changes appropriately and maintains the page's structural integrity across device screen sizes.

  • 2.7

    Use Semantic markup to structure HTML code.

  • 2.8

    Present the finished website with clearly understandable site-specific content, rather than Lorem Ipsum placeholder text. Implement clear navigation to allow users to find resources on the site intuitively.


3

Maximise future maintainability through documentation, code structure and organisation.

Assessment Criteria

  • 3.1

    Write a README.md file for the web application that explains its purpose, the value that it provides to its users, and the deployment procedure.

  • 3.2

    Insert screenshots of the finished project that align to relevant user stories.

  • 3.3

    Attribute all code from external sources to its original source via comments above the code and (for larger dependencies) in the README.

  • 3.4

    Clearly separate and identify code written for the website and code from external sources (e.g. libraries or tutorials).

  • 3.5

    Organise HTML and CSS code into well-defined and commented sections.

  • 3.6

    Place CSS code in external files, linked to the HTML page in the HEAD element.

  • 3.7

    Write code that meets at least minimum standards for readability (consistent indentation, blank lines only appear individually or, at most, in pairs).

  • 3.8

    Name files consistently and descriptively, without spaces or capitalisation, to allow for cross-platform compatibility. Group files in directories by file type (e.g. an assets directory will contain all static files and may be organized into sub-directories such as css, images, etc.)


4

Use version control software to maintain, upload and share code with other developers.

Assessment Criteria

  • 4.1

    Use a cloud-based, git-based, version control system (e.g. Git & GitHub) throughout the development and implementation process.

  • 4.2

    Document the development process through descriptive commit messages.

  • 4.3

    Use consistent and effective markdown formatting to produce a README file that is well-structured, easy to follow, and has few grammatical errors.


5

Test and deploy a Frontend web application to a Cloud platform.

Assessment Criteria

  • 5.1

    Design and implement manual testing procedures to assess functionality, usability and responsiveness.

  • 5.2

    Document the testing in the README or in a separate file.

  • 5.3

    Deploy a final version of the code to a cloud-based hosting platform (e.g. GitHub Pages) and test to ensure it matches the development version.

  • 5.4

    Remove commented-out code before pushing final files to version control and deploying. Ensure that there are no broken internal links.