We're training a handful of junior web developers!

Here's how we're doing it; including the full programme.

In Jun 2022, we begin training a group of 4 junior web developers with loads of potential. We'd been looking for a mid-level or senior web develop to work with on our client projects, and while there are many out there, none that applied were quite what we were looking for. We knew it was time to train.

The programme we created covers 4 months of web dev training, with them spending about 2 hours per day in teaching and demonstrations, and the rest of the day used for practice and occasional homework. As you'll see below, the curriculum we've developed covers every topic our web developers should know about to be effect at developing websites for our sort of clients. They'll learn about the frontend techniques,the backend best practices, and everything in between.

We're really excited about this, and can't wait to see how they do when given paying client work as they near completion of the course!

If you'd like to hire one of them when they're finished the course, or if you know someone who should join the training, please let us know.

This is the full curriculum we're taking them through. For the most up-to-date version, see our Web Developer Training repo on Gitlab.

Useful resources


General web dev principles

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


A simple way to build sites with just enough control

  • 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


For making websites beautiful

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

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


For making websites interactive

  • 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

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


A great way to build regular ecommerce sites

  • 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?


A powerful content management system (CMS)


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


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


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

  • 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

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


Makes JavaScript more reliable


Docker & containers

The modern way to serve sites and apps

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


To backup and collaborate on code

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


Progressive web apps: Websites that act like native apps

  • 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.

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

Other development concepts


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

You might also like

How to buy a website

We explore the things you can do to find the perfect web designer / developer and to provide them with just what they need.

Webflow agencies in SA 2022

While Webflow may be new to our country, it's definitely making its mark. We did some research for you, finding all the professionals using it to make sites in SA.