Module Overview

Credits: 20 credits | Level: Undergraduate | Focus: Front-end Web Design

This module covers the fundamentals of web design with a focus on HTML5, CSS3, and JavaScript. Students will develop a responsive website for a client as their main assessment. Each slideshow is designed for a 3-hour session with interactive tasks.

Introduction to HTML

Basic HTML structure, elements, and semantic markup

25 slides • 3 hours • 2 tasks

HTML Forms and Input

Form elements, validation, and user input handling

28 slides • 3 hours • 2 tasks

CSS Fundamentals

Selectors, properties, and basic styling

26 slides • 3 hours • 2 tasks

CSS Layout and Box Model

Display, positioning, and responsive design basics

27 slides • 3 hours • 2 tasks

CSS Flexbox and Grid

Modern layout techniques and responsive design

26 slides • 3 hours • 2 tasks

JavaScript Basics

Variables, functions, and DOM manipulation

25 slides • 3 hours • 2 tasks

JavaScript Events and Interactivity

Event handling, user interactions, and dynamic content

25 slides • 3 hours • 2 tasks

JavaScript Advanced Concepts

Advanced functions, OOP, and modern JavaScript features

26 slides • 3 hours • 2 tasks

Web APIs and External Libraries

REST APIs, authentication, and popular libraries

25 slides • 3 hours • 2 tasks

Project Planning and Development

Project methodologies, Git, and deployment

25 slides • 3 hours • 2 tasks

Advanced Topics and Future Trends

Modern frameworks, PWAs, and emerging technologies

25 slides • 3 hours • 2 tasks

Final Project and Assessment

Bringing it all together - final project development and assessment

25 slides • 3 hours • 2 tasks

Assessment Overview

CMU422: Fundamentals of Web Design has a single assessment component worth 100% of your final grade.

Artefact - Front-end Website Development (100%)

Project Type: Individual client website

Client Options: Local charity, small business, community organisation, or educational institution

Requirements: Hand-coded responsive website with HTML5, CSS3, and JavaScript

Due: End of module (consultation with tutor required)

Project Requirements

Technical Requirements: HTML5, CSS3, JavaScript (minimum), additional frameworks encouraged
Design Requirements: Contemporary web interface design with interactive functionality
Content Requirements: Multiple pages, contact forms, interactive elements
Documentation: Comprehensive code comments with Harvard Newman format references
Delivery: Entirely hand-coded (no Dreamweaver, Wix, or similar tools)
Responsive Design: Must work across mobile, tablet, and desktop browsers

Learning Outcomes Assessed

Plan and design contemporary web-based interfaces using digital tools and techniques
Design usable interfaces for web-based environments across mobile, tablet, and desktop browsers
Examine and interpret how interactive and responsive websites are designed, organised, and managed through contemporary code and frameworks
Write and manipulate efficient code to problem solve, develop interactive technologies, and manage digital web-based content
Have an awareness of the process by which front-end webpages are delivered to users
Reflect on the professional, moral, legal and ethical issues associated with a computer science professional working within the field of web application development

Important Notes

Client Consultation: Students must consult with their tutor to agree on the client and project scope before beginning development.

Code Quality: All code must be well-commented with proper Harvard Newman format references for techniques and methodologies used.

Professional Standards: The project should demonstrate professional web development practices and ethical considerations.

Module Quizzes

Test your knowledge with interactive quizzes for each session. Each quiz contains questions based on the lecture content and practical exercises.