TOC.md

Table of contents

Introduction

---

Precursor knowledge

• Recommended soft skills: Recommendations of soft skills that students can aim to get better at while learning web development, and which constitute good traits to have when entering the industry
• Environment knowledge: Recommendations for topics related to the setup and usage of the computer system that you will use to implement websites/apps.

---

Core modules

• 1 The web standards model: The fundamentals of how the web works at a high level, including the model used for communication, the core technologies involved, how those technologies are created, and how a web browser renders and displays websites to a user.
  • 1.1 How the web works
  • 1.2 The HTML, CSS, and JavaScript triangle
  • 1.3 Web standards
  • 1.4 How browsers work
• 2 Semantic HTML: HTML is the technology that defines the content and structure of any website. Written properly, it should also define the semantics (meaning) of the content in a machine-readable way, which is vital for accessibility, search engine optimization, and tapping into using the built-in features browsers provide for content to work optimally. This module covers the basics of the language, before looking at key areas such as document structure, links, lists, images, forms, and more.
  • 2.1 Basic HTML syntax and structure
  • 2.2 Good document structure
  • 2.3 Lists
  • 2.4 Advanced text techniques
  • 2.5 Links
  • 2.6 Media
  • 2.7 Other interactive elements
  • 2.8 HTML tables
  • 2.9 Debugging HTML
• 3 CSS fundamentals: CSS enables you to add style to your webpages, including color, text, positioning and layout, and animation. In our first CSS module we cover all the fundamental language mechanics you need to understand how CSS works.
  • 3.1 Basic CSS syntax
  • 3.2 Selectors and combinators
  • 3.3 The box model
  • 3.4 Cascade, specificity, and inheritance
  • 3.5 Values and units
  • 3.6 Sizing
  • 3.7 Background and borders
  • 3.8 Overflow
  • 3.9 Styling replaced elements
  • 3.10 Styling form elements
  • 3.11 Debugging CSS
• 4 CSS text styling: This module focuses specifically on CSS font and text styling, including loading custom web fonts and applying them to your text.
  • 4.1 Text and font styling
  • 4.2 Styling lists and links
  • 4.3 Web fonts
• 5 CSS layout: Our final core CSS module looks deep into another crucial topic: creating layouts for modern websites. This module looks at floatings, positioning, modern layout tools, and building responsive designs that will adapt to different devices, screen sizes, and resolutions.
  • 5.1 The basics of CSS layout
  • 5.2 Floats
  • 5.3 Positioning
  • 5.4 Modern layout
  • 5.5 Responsive design specifics
• 6 JavaScript fundamentals: JavaScript is a huge topic, with so many different features, styles, and techniques to learn, and so many APIs and tools built on top of it. This module focuses on the essentials of the core language. Learning these topics will give you a solid basis to work from.
  • 6.1 Variables
  • 6.2 Math
  • 6.3 Text
  • 6.4 Arrays
  • 6.5 Conditionals
  • 6.6 Loops
  • 6.7 Functions
  • 6.8 JavaScript object fundamentals
  • 6.9 DOM scripting
  • 6.10 Events
  • 6.11 Asynchronous JavaScript fundamentals
  • 6.12 Network requests with fetch()
  • 6.13 Working with JSON
  • 6.14 JavaScript libraries and frameworks introduction
  • 6.15 Debugging JavaScript
• 7 Accessibility: Access to public services, education, entertainment, and all the other valuable content the web offers is a human right. No one should be excluded based on disability, race, geography, or other human characteristics. This module discusses the best practices and techniques you should learn to make your websites as accessible as possible.
  • 7.1 Accessibility basics
  • 7.2 Accessible styling
  • 7.3 Accessible JavaScript
  • 7.4 Assistive technology and testing
  • 7.5 WAI-ARIA
• 8 Version control fundamentals (Git/GitHub): Version control tools are an essential part of modern workflows, for backing up and collaborating on codebases. This module takes you through the essentials of version control using Git and GitHub.
• 9 Design theory for developers: The idea of this module is to introduce developers to some design thinking. They may not want to work as a designer, but having some basic user experience and design theory under their belt will be invaluable for understanding design briefs, making their portfolios look better, and getting into the mindset of the user.
  • 9.1 Basic design theory
  • 9.2 User-centered design
  • 9.3 Common UI design patterns
  • 9.4 Understanding design briefs

---

Optional extension modules: These "extension" topics constitute useful additional skills to learn as web developers start to expand their knowledge and develop specialisms.

• Extension 1 CSS transforms and animation: Animations are a vital part of a good user experience. Subtle usage can make page designs more interesting and appealing, and also enhance usability and perceived performance.
• Extension 2 Creating your own JavaScript objects: Having a deeper knowledge of how JavaScript objects work is very useful as you build confidence with web development, start to build more complex apps, and create your own libraries.
• Extension 3 Web APIs: This module covers common aspects of three of the most common classes of Web APIs that we haven't previously covered in any kind of detail, providing a useful grounding for those who want to go deeper into browser API usage.
• Extension 4 Performance: Performance centers around making your websites as fast as possible, both in real terms (for example small file sizes, quicker loading), and in terms of how performance is perceived (for example getting initial content to a usable state as fast as possible, even if all the content is not yet loaded).
• Extension 5 Security and privacy: It is vital to have an understanding of how you can and should protect your data and your user's data from would-be attackers who may try to steal it. This module covers both hardening websites to make it more difficult to steal data, and collecting user data in a respectful way that avoids tracking them or sharing it with unsuitable third parties.
• Extension 6 Testing: Any codebase past a certain level of complexity needs to have a system of tests associated with it, to make sure that as new code is added, the codebase continues to function correctly and performantly, and continues to meet the users' needs. This module lists the fundamentals that you should start with.
• Extension 7 A practical understanding of JavaScript frameworks: JavaScript frameworks are commonly used to build web applications, so it is beneficial to learn about common frameworks and use cases (as listed below) for employment prospects.
• Extension 8 CSS tooling: Tooling is not just confined to JavaScript frameworks. There are also common CSS tooling types that you'll encounter on your learning journey.
• Extension 9 Other tooling types: There are other types of tooling that you'll commonly encounter on a web project. This module aims to provide a useful list to research.