Table of contents
Web Development
This module equips you with the skills to design and implement dynamic web applications using foundational web programming concepts and frameworks. The course considers practical skills such as responsive design with CSS as well as the abstract underpinnings of markup languages. The course extends beyond general web programming and into areas of professional practice. These include accessibility standards and ethical, security, and sustainability aspects of web development. The course also considers team working scenarios; you will learn about how teams carry out the full process of developing a web site from assigning roles, through requirements gathering, onto testing and then deployment. The course culminates with an exploration of the exciting intersection of Generative AI and web development, preparing you for the future of the industry.
Enrolled students only: Course syllabus available on Coursera.
Professor(s)
- Dr. Matthew Yee-King
Topics covered
- HTTP and HTML
- Parsing markup languages
- Layout for different devices
- Accessibility and usability standards
- Data sources and data security
- Template engines and other presentation techniques
- Website lifecycle
- Methods for team collaboration and project management
- Ethical, legal and sustainability issues for web development
- Generative AI and web development
Assessment
Coursework only (Type III)
Module specification
Past exams
Syllabus
Primary programming language
JavaScript
Resources
Awesome learning resources
-
awesome-learning-resources - GitHub awesome list.
Essential reading
“There is no required textbook for this module. The module will draw on a number of different, largely web-based, public resources as well as the resources produced as bespoke material for this module. Some key online references are:
- W3 Schools Online Web Tutorials, http://www.w3schools.com
- Mozilla Developer Network Tutorials, https://developer.mozilla.org/
- Marijn Haverbeke, 2012 “Eloquent JavaScript: A Modern Introduction to Programming” - free online text http://eloquentjavascript.net
Specific readings for each topic are listed with direct links to free online resources that provide additional material on the topics of this course.”
Games
- CSS Diner - “A fun game to help you learn and practice CSS selectors.”
- Flexbox Froggy - “A game for learning CSS flexbox.”
- Flexbox Zombies - “Master Flexbox layout: a game by geddski.”
- Grid Critters - “Completely learn CSS Grid once and for all.”
- Grid Garden - “How well can you tend to your carrot garden using CSS grid? In this game, you must water your carrot crops and poison the weeds by mastering CSS grid, a powerful new module that makes 2-dimensional grid layouts a piece of cake. With it you can define columns, rows, and grid template areas.”
- Service Workies - “Learn Service Workers inside and out with the new game of Service Worker mastery.”
Kinks to be aware of
Notes
On REPL (See sections on Web development)
Programming
JavaScript
- Eloquent JavaScript, by Marijn Haverbeke. The book can be downloaded:
- Handlebars Training, by Rich Finelli (YouTube playlist)
Text editor
If you followed our guide at the ITP1 resource page, then you already have Visual Studio Code set up. For this course, you may want to install the following extensions in addition to those recommended earlier:
- IntelliSense for CSS class names in HTML.
- stylelint - checks for “code lint” in CSS. Requires stylelint to be installed, as well as a configuration of your choosing (for more information on installing and configuring stylelint, see the stylelint Docs).
- Web Accessibility - recommends ways for improving the accessibility of web pages. This isn’t an “accessibility silver bullet”, but it’s a start.