This unit aims to provide learners with the knowledge and skills needed to build a dynamic, interactive Front end web application. It includes understanding user input and control when interacting with a web application. It also includes understanding the principles of automated and manual testing for debugging.
Design, develop and implement a dynamic Front end web application using HTML, CSS and JavaScript.
Design a web application that meets accessibility guidelines, follows the principles of UX design and presents a structured layout and navigation model, and meets its given purpose.
Design interactivity for a web application that lets the user initiate and control actions and gives feedback.
Write custom JavaScript, HTML and CSS code to create a responsive Front end web application consisting of one or more HTML pages with significant interactive functionality.
Write JavaScript code to produce relevant responses to user actions.
Implement an interactive web application that incorporates images or graphics of usable resolution, legible, unobscured text, consistent styling, undistracted foregrounds.
Implement Front end interactivity, using core JavaScript, JavaScript libraries and/or Application Programming Interfaces (APIs).
Write JavaScript code, that passes through a linter (e.g. JSLint) with no major issues and write validated HTML and CSS code.
Write JavaScript functions that correctly implement compound statements such as “if statements” and/or loops.
Write code that intelligently handles empty or invalid input data.
Implement appropriate working functionality for all project requirements.
Organise non-trivial JavaScript code in external file(s) linked at the bottom of the body element (or bottom of head element if needs to be loaded before the body HTML) and CSS code in external files linked to HTML in the head element.
Write code that meets minimum standards for readability (comments, indentation, consistent and meaningful naming conventions).
Name files consistently and descriptively, without spaces or capitalisation to allow for cross-platform compatibility.
Write code that does not generate internal errors on the page or in the console as a result of user actions.
Organise code and assets files in directories by file type.
Test an interactive Front end web application through the development, implementation and deployment stages.
Explain the principles of automated and manual testing and when each might be deployed.
Design and implement testing procedures (automated or manual) to assess functionality, usability and responsiveness of the web application.
Insert screenshots of the finished project that align to relevant user stories.
Apply test procedures during development and implementation stages and test to ensure the deployed version matches the development version.
Fully document the results of well-planned testing procedures (automated or manual) to assess the website’s functionality, usability and responsiveness.
Deploy an interactive Front end web application to a Cloud platform.
Deploy a final version of the interactive web application code to a cloud-based hosting platform (e.g. GitHub Pages).
Ensure that the deployed application is free of commented out code and has no broken internal links.
Use Git & GitHub for version control of an interactive web application up to deployment .
Demonstrate and document the development process through a version control system such as GitHub.
Document the full development cycle, with clear evidence given through commit messages, the README.
Write a README.md file for the interactive web application that explains its purpose and the value that it provides to its users.
Clearly separate and identify code written for the interactive web application and code from external sources (e.g. libraries or tutorials). Attribute any code from external sources to its source via comments above the code and (for larger dependencies) in the README.
Use consistent and effective markdown formatting that is well-structured, easy to follow, and has few grammatical errors, when writing a README file.