Table of contents
Web Development
This module provides you with a foundational web development skillset. You will learn the critical languages of the web: HTML, CSS and JavaScript. Using HTML and CSS, you’ll learn how to markup, layout and style web content. You’ll study the document object model and how you can dynamically manipulate it with JavaScript to create interactive web pages. You’ll consider accessibility and usability issues, and how you can overcome them. You’ll learn about website deployment and how to make your websites accessible to other people. The module also enables you to present your work online in the form of a website.
Enrolled students only: Course syllabus available on Coursera.
Professor(s)
- Dr. Nick Hine
- And more
Topics covered
- Introduction to Web Development
- Web Site Design
- Essential HTML
- Introduction to CSS
- Positioning in Styling & Design
- Responsive CSS
- Introduction to JavaScript for the Web
- Manipulating the DOM using JavaScript
- JavaScript Libraries
- Web Hosting & Professional Practices
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.