The module aims to support students' development of practical web skills. It will further their client-side form-creation and CSS design skills. The students will be introduced to concepts related to shared hosting and connections to web APIs. Students will learn how third-party libraries and framework integration can be used to enhance their web development skills.
1 - Recap HTML markup and CSS concepts
Key HTML and CSS components should be recapped
2 - CSS flexbox layouts
Flex Boxes concepts (flex container, flex items, main and cross, start and end etc.) / flex rules (display, flex, order, align-items, flex-direction, flex-wrap etc.)
3 - HTML forms
Using web forms for data input - HTML5 form elements (form, input, textarea, select, option etc.) / input types (text, password, radio, checkbox, submit, reset) / form element attributes (type, name, value, placeholder, maxlength, size) / Boolean attributes (checked, selected) / introduction to concepts of form methods (GET, POST) and actions (mailto vs server-side processing)
4 - Styling HTML forms
Using fieldset and legend / styling form elements in CSS / aligning forms effectively / type-specific styling
5 - Introduction to JavaScript libraries
Understanding the concept of JS libraries / linking a JS library in an HTML page / applying JS libraries (e.g., jQuery) to form validation / understanding the strength and weakness of client-side form validation
6 - Shared hosting environments
Introduction to hosting concepts (FTP, domain names, nameservers, A and AAAA records, CNAME entries, MX records etc.) / advantages and disadvantages of shared hosting / Windows HOSTS file / uploading a site to a shared hosting environment
7 - CSS for advanced page layout
Advanced page layout features (floating, positioning, parallax scrolling etc.) / designing and styling navigation lists with CSS / introduction to mobile-first design / introduction to concepts of CSS grid layout (rows, columns, gaps etc.)
8 - Introduction to front-end frameworks
Understanding what a front-end framework is / introduction to a front-end framework (e.g., Bootstrap) / important global styles and settings (doctype, responsive meta-tags, box-sizing, etc.) / getting a starter template working (downloading vs using a content delivery network such as BootstrapCDN)
9 - Customising a website using a frontend framework
Benefits of customisation / understanding the project file structure / CSS overrides / CSS specificity / CSS customisation (theme colours, grid breakpoints, vertical and horizontal spacing, etc.) / introduction to the concept of advanced styling methods (e.g., SASS)
10 - Introduction to APIs
Understanding the concept of APIs / integrating an API call to a web site and receiving the data (e.g., JSON or XML)
| Module Content & Assessment | |
|---|---|
| Assessment Breakdown | % |
| Other Assessment(s) | 100 |