Resources: Learning web languages the modern way

Programming languages that are used for web development have changed significantly over the latest years. This means that there exist many old guides that teach outdated knowledge (their solutions generally still work, but often, you “would not do it this way” anymore). For beginners, this is confusing & makes it harder to get a mental model of web development. This document is an attempt to collect resources that teach the respective language the “modern” way.

HTML&CSS¹

Example for significant changes: Introduction of display: flex & display: grid modes for creating layouts. Previously, people would use the float attribute for this.

• https://developer.mozilla.org/en-US/docs/Web/CSS
• https://css-tricks.com/where-do-you-learn-html-css-in-2020/
  • https://www.amazon.com/Learning-Web-Design-Beginners-JavaScript/dp/1491960205
• Common CSS Layout Patterns: https://every-layout.dev/layouts/ & https://web.dev/patterns/layout/

JavaScript

Example for significant changes: Arrow functions & let/const variable types. These changes make scoping (this scope & variable scope) much easier. Previously, people would use .call() and .bind() for scoping this, and generally get confused about var scope. Life is much better now.

• https://eloquentjavascript.net/ (written by the creator of CodeMirror and ProseMirror)
• https://github.com/thejsway/thejsway

PHP

Example for significant changes: PHP got more Java-like (in a good way). We now have types that guarantee type safety even during runtime.

• https://phptherightway.com/
• https://github.com/PatrickLouys/no-framework-tutorial (or the more detailed book Professional PHP, that followed from the GitHub-Tutorial)

Python

Recommendation: Do not bother with virtualenv, pip and requirements.txt until you really know what you are doing. Instead, use the package manager Poetry to install third-party packages. Poetry finally solves most of Python’s packaging & dependency mess.

• https://python-poetry.org/
• https://cjolowicz.github.io/posts/hypermodern-python-01-setup/