Teaching Web Programming
Resources for teaching basic web design.
Background
Teaching web design and development has moved from relatively simple in the 1990s to about as complex as full on backend programming.
Building a modern website requires, at a minimum, learning the following languages:
- HyperText Markup Language (HTML) - To give the page structure.
- Cascading StyleSheets (CSS) - To control the look of the page, including animation.
For anything more than a trivial site, the following may also be required:
- JavaScript - To add interactivity to the page.
- Ruby/Python/Elixir/JavaScript/etc. - To add backend functionality, whether on traditional servers or via serverless/lambda functions.
- JSON/YAML/TOML/etc. - To exchange data with Application Programming Interfaces (APIs).
Resources
While professional programmers tend to love massive collections of resources, students need to be slowly introduced to research methods and how to successfully navigate the mountains of data common to software design. The essential resources below should be just about enough for a brief introductory class.
Essential Resources
- DevDocs API Documentation: Excellent reference for most programming languages with fast search.
- HTML & CSS Is Hard: A friendly web development tutorial that practices what it preaches.
- Whitespace – A List Apart: Essential reading for web or general typographic design.
Basic Resources
- awesome-html5: A curated list of awesome HTML5 resources
- awesome-css-learning: A tiny list limited to the best CSS Learning Resources
- css-group/awesome-css: A curated contents of amazing CSS :)
- awesome-web-accessibility: A collection of accessibility related resources.
Design Resources
- awesome-web-design: A curated list of awesome resources for digital designers.
- awesome-design (oscarotero): A collection of open resources for web designers.
- awesome-design (troyericg): An ever-growing/changing collection of tools, resources, tutorials, guidelines and examples.
- awesome-motion-design-web: A list of links for using motion design on the Web.
Tooling
- awesome-no-login-web-apps: Awesome (free) web apps that work without login
- awesome-web-online-tools: Many many useful Web Online Tools For Web Developers & Programmers
- awesome-web: A curated list of awesome resources for web developers.
Static Analysis
It's possible to automatically check the correctness of certain aspects of HTML and CSS code. This makes it possible to automate many aspects of grading freeform projects.
Validators, Linters, and Formatters
- HTML-validate (vscode extension): Offline HTML5 validator. Validates either a full document or a smaller (incomplete) template, e.g. from an AngularJS or Vue.js component.
- HTML Tidy (source code): The granddaddy of HTML tools, with support for modern standards.
- stylelint (vscode extension): A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
- prettier (vscode extension): Prettier is an opinionated code formatter.
- mlc: Check for broken links in markup files.