---
# System prepended metadata

title: Tech Cluster learning paths

---

# Tech Cluster learning paths

## Phase 1 - New to Web-Dev

* HTML, CSS, responsive design
    * Resources
        * https://www.freecodecamp.org/learn/responsive-web-design/
        * CSS Flexbox: https://youtu.be/tXIhdp5R7sc
        * CSS Grid: https://youtu.be/EFafSYg-PkI
        * Media queries
    * Projects:
        * https://www.freecodecamp.org/learn/responsive-web-design/#responsive-web-design-projects (Not necessary to work on all the 5 projects, do any many as you can)
* Javascript (ES6)
    * Basic syntax
    * Resources:
        * https://youtu.be/hdI2bqOjy3c (Crash course)
        * https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/ (lengthy)
    * DOM
        * https://www.youtube.com/watch?v=XF1_MlZ5l6M
* Deploying you built website
    * Using Github pages or netlify.
    * Resources:
        * github pages: https://www.youtube.com/watch?v=QyFcl_Fba-k
        * https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/
* Projects
    * To-Do list
    * Building games such as minesweeper
    * Expense tracker
    * Quiz game

## Phase 2
* Understand how the web works.
    * https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works
* Understanding JSON
* Understanding REST APIs
* Learn to make API calls
    * Example: using Fetch API in JavaScript
* What are domain names
* What is HTTPS or TLS/SSL
* What is a CDN
* Difference between frontend and backend.

## Phase 3 - Digging into frontend or backend
* Frontend
    * Geting more advanced into JavaScript
        * https://github.com/getify/You-Dont-Know-JS
    * Frontend frameworks
        * React
    * Static site generation
        * Gatsby, 11ty
    * Server side rendering
        * Next.Js
    * Headless CMS (content management systems)
        * Used along side static site generator
        * Examples:
            * Strapi
            * Sanity.io
            * contentful
    * JAM stack
    * BaaS / Serverless
        * Firebase
        * Cloudflare workers
    * Advanced styling and animations
        * Gasp.Js
        * Three.js
    * Projects and deployment

* Backend
    * Backend programming langugages and frameworks
        * Javascript
            * **NodeJs (expressJs)**
            * Deno
        * Python
            * **Django**
            * **Flask**
            * FastAPI
        * C#
            * .NET
        * Java
            * Spring
    * Communication protocols
        * **REST**
        * GraphQL
        * Real-time
        * Stream
    * Databases (Persisting data)
        * SQL
            * MySQL
            * PostgresSQL
        * NoSQL
            * MongoDB
    * Authentication
        * Protocols
            * Oauth2
            * JWT
            * Session tokens
        * Using 3rd party authentication services:
            * auth0
            * firebase
    * Projects and deployment
