We're training a handful of junior web developers!

For the most up-to-date version, see our Web Developer Training repo on Gitlab.

Useful resources

General web dev principles

Curriculum
  • Frontend & backend
  • URLs
  • Tech stacks
  • Web design (incl. responsive wd)
  • Web apps
Helpful links

Webflow

A simple way to build sites with just enough control

Curriculum
  • Type of site builder; use cases
  • Basic dev
    • HTML / elements available
    • Applying CSS
    • using / organising classes
    • Applying animations
    • Responsive modes
    • Embedding custom components
  • CMS
    • Types + fields
    • CMS items in "lists"
    • CMS page templates
  • Launching + Admin
    • Using editor mode; incl. training clients
    • Forms
    • Adding a custom domain
    • Handover + other settings

CSS

For making websites beautiful

Things you should already know
  • Colours
  • Fonts & type (incl. web fonts)
  • Media queries
  • Box model
Curriculum

We assume that the developers already know the basics of CSS, so we'll only be covering advanced and new features of CSS.

  • "custom properties" (variables)
  • Flexbox (on CSS Tricks)
  • Grid (on CSS Tricks)
  • Attribute selectors (on CSS Tricks)
  • Pseudo selectors
  • Aspect ratios
    • Incl. background-size, aspect-ratio, object-fit
  • Calc
  • Transitions & transforms
  • Processors
Helpful links

JavaScript

For making websites interactive

Curriculum
  • Querying the DOM
  • Events
  • Promises (incl. async / await)
  • Fetch API
  • Modules (ES modules & Node.js modules)
Helpful links

Development environment

Getting your computer ready to work on code

Curriculum *Note that these are highly OS-specific*
  • Code editors / IDEs
  • CLI / Terminal
  • Browsers
  • CLI tools (these are covered in more detail later)
    • built-in (eg. nano, less, wget, etc.)
    • node
    • git
    • docker
    • composer (for PHP)
  • Repositories
Helpful links

Browser dev tools

For investigating how your browser sees your site / app

Curriculum
  • Inspector
  • Console
  • Network
  • Responsive tester
  • Storage
Helpful links

Shopify

A great way to build regular ecommerce sites

Curriculum
  • Using the backend
    • Products
    • Categories + collections
    • Choosing themes
    • Plugins ("apps")
    • Marketing tools
      • Discounts
    • Info pages
    • Legal pages + other settings
    • Bulk import products
  • Custom theme development
    • Developing a theme using Shopify CLI
    • Liquid
    • Template parts?

Drupal

A powerful content management system (CMS)

Curriculum

Including custom themes, custom modules

  • Structure / setup (5 days)
    • Installation
    • Drupal versions : drupal core
    • Blocks
    • Nodes / Content types
    • Taxonomies (vocabularies)
    • Menus
    • Views
    • Image styles
    • Users
    • Site status page
  • Extending (contrib modules) (2 days)
    • Webforms
    • Pathologic
    • Pathauto
    • Search API
    • Devel (+ kint)
    • Devel generate
    • AMSwap
  • Theme development (3 days)
    • Not including knowing CSS, HTML, JavaScript
    • Folder structure
    • .info.yml file
    • Sub- themes
    • Templates + Regions
    • Libraries
    • CSS and JS (acknowledge)
    • #advanced preprocess functions
  • Custom module development
    • Hooks
    • Forms & render API (see docs)
    • Caching
Useful modules
Helpful links

WordPress

A popular content management system (CMS) with thousands of plugins and themes

Curriculum

Including custom themes, custom plugins.

  • Structure / setup (2 days)
    • Installation
    • Choosing themes
    • Customising / editing themes
    • Blocks / Gutenberg
    • Widgets
    • Menus
    • Users + roles
    • Taxonomies: Categories + Tags
  • Extending (contrib modules) (2 days)
    • CPT + ACF
    • Facets
    • Forms (WP Forms or Ninja Forms)
  • Themes (3 days)
    • Folder structure
    • styles.css
    • "hooks"
  • WooCommerce
    • Products
Helpful links
WooCommerce links

APIs & integrations

How your site / app can communicate with other sites and services

Curriculum
  • REST
  • GraphQL
  • HTTP requests
  • APIs
    • Explore GitHub API
    • Insomnia / Postman
    • Authentication
    • Documentation
    • SwaggerHub
    • API managers (eg. Apigee)
Helpful links

Frontend (JavaScript) frameworks

For building interactive web user interfaces

Curriculum
  • Vue
  • React
  • Angular
  • Others
    • Express, Svelte, Solid, Astro, Mithril
  • Data binding
  • Components
  • Routing
  • Forms
  • SPAs vs SSG vs hydration
Helpful links

TypeScript

Makes JavaScript more reliable

Curriculum

Docker & containers

The modern way to serve sites and apps

Curriculum
  • Getting images
  • Building images
  • Docker compose
  • Traefik
  • Dockerhub
  • Docker swarm / Kubernetes

Git

To backup and collaborate on code

Curriculum
  • What it is
  • Basic commands
  • Advanced commands
  • Github / Gitlab
Helpful links

PWAs

Progressive web apps: Websites that act like native apps

Curriculum
  • Offline modes
  • Caching
  • Browser storage
  • Service workers
  • Installation on phones
  • Notifications
  • Access to device hardware (eg. bluetooth)
Helpful links

Cloud services

Hosting, compute, databases, authentication, etc.

Curriculum
  • AWS by Amazon
  • Azure by Microsoft
  • Google Cloud (GCP) by Google
  • Firebase by Google
Helpful links

Other development concepts

Curriculum

  • Markdown
  • SEO
  • Domains / DNS
  • CDNs
  • Integration testing
  • Unit testing
  • Accessibility
  • Cross-browser testing
  • Regex (see RegExr)
  • WebSockets
  • CORS
Helpful links

You might also like

Website, App, or Web app?

We explore the similarities and differences of all three, their pros and cons, and help you choose one for your business.

Every way to make a website in 2022

We discuss what the various methods are, the pros and cons of each, and what each one is best for. We cover simple site builders, CMSs, JavaScript frameworks, and all the rest.