520 Frontend web programming

The client-side of the web handles everything users see and interact with—HTML, CSS, and JavaScript work together to shape how web applications look and behave.

Outline

This chapter introduces the essential tools and practices used in front-end web development. Students will learn how HTML structures content, CSS styles it, and JavaScript makes it interactive. The chapter also explores responsive design, accessibility, and common front-end libraries that accelerate development and improve user experience.

Targets

In this topic, students learn to:

• Structure content using HTML tags and attributes

• Apply styles using CSS and understand its cascading rules

• Enhance interactivity using JavaScript and DOM manipulation

• Implement responsive layouts and design principles

• Apply accessibility guidelines to support inclusive design

• Explore the role of front-end libraries and CSS frameworks

Glossary

Term	Definition
HTML	HyperText Markup Language used to define the structure and elements of a web page
CSS	Cascading Style Sheets used to style HTML content (colour, layout, typography)
JavaScript	A scripting language used to add interactivity and dynamic content
DOM	Document Object Model; the interface through which JavaScript accesses and updates HTML elements
Responsive design	A design approach that adapts layouts to different screen sizes and devices
Accessibility	Designing digital content that is usable by people of all abilities and disabilities
Framework	A pre-built collection of code (such as Bootstrap) that simplifies complex development tasks

Overview

Front-end web programming brings websites to life by managing everything a user sees and interacts with. HTML provides the structural backbone, CSS controls presentation and layout, and JavaScript adds dynamic behaviour. Together, these technologies form the foundation of every interactive web page.

This chapter begins with foundational markup using HTML, then explores styling techniques with CSS, including cascading rules and media queries. Students then move into JavaScript, learning how to manipulate the DOM, respond to user events, and fetch data from APIs. The chapter concludes with a study of responsive design, accessibility principles, and the growing role of front-end libraries and frameworks in modern web development.