Module Overview

Web Development Client-Side

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.

Module Code

COMP H1035

ECTS Credits


*Curricular information is subject to change

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