My web dev path

Everyone has their own journey and this has been mine up till now!

My method of learning

• Side-by-side method
  • Do what is done in the tutorial at the same time.
  • Make short notes in comments for future reference.
• If you encounter errors, document them and write the solution for future reference (preserve links as well).
• Make a project using that tech as soon as you’re done learning it, use GitHub as a part of your dev process.
• Tell people what you’re learning. The more that people know, the better.
  • Add projects on LinkedIn as posts and in the projects section.
  • Be active on Twitter.
• Participate in Tech communitites. (Shameless plug: Our Tech Community)
• Keep in mind
  • Updated list: My ‘Realisations’ blog

    • Teach Yourself Programming in Ten Years
    • Understand Fundamentals not Tools
    • Choose Boring Technology
    • Presentation and Documentation
    • The Key to a Good Life? Lose Yourself in Something.
    • PewDiePie’s philosophical videos
    • We fired our top talent. Best decision we ever made.
      • A team reborn after the fiery departure of its misanthropic guru
    • Get in DONE! 5 tips to staying PRODUCTIVE
    • Do What You Love and Love What You Do
    • The tech tool carousel
    • Deciding What Not To Learn

My working process

Learn and apply in an infinite loop.

• Get an idea. (It doesn’t have to be awesome or unique.)
• Plan (Find a neat and easy solution to the problem.)
• Learn the basics (from a small tutorial or the documentation).
• Build a basic template.
• Loop infinitely
  • Plan
  • Learn the feature that you require.
  • Implement it in the product.
  • Test.

TIP: Don’t do long courses or tutorial series.

My path

• Prerequisites
  • Browser (Any one from Chrome, Edge, Brave or Firefox are preferred.)
  • VS Code setup

Front end

• HTML
• CSS (vanilla and frameworks)
• JS (vanilla)

Misc

• Git and GitHub
• Web design
• Browser DevTools
• Accessibility
• Documentation
• Rendering Patterns

TIP: At this point, make a static website. (Eg: Your portfolio website or the front end for a larger project to which you can add the back end later.)

• PWAs (+ Service Worker API)
• Networking
• RegEx
• SVG
• Intersection Observer API
• IndexedDB
• Web Components API
• TWA

General back end prerequisites

• HTTP methods and status codes
• JSON
• APIs
• Asynchronous (async) JS (Promises, Async/await, etc)
• Caching (CacheStorage API, Cache API and Cache-Control header)
• CORS
• Cookies
• AJAX and its libraries (Fetch API, XMLHttpRequest, Axios, Node HTTP, etc.)
• JWT

Databases

• SQL (Relational DBs)
• NoSQL

JS back end

• Node.js
• Express.js
• REST (RESTful) APIs

Python back end

• Prerequisite
  • Python basics
• Common Python web dev frameworks
  • Flask
  • Django (I still have to do this)

PHP

• Prerequisites
  • PHP basics
  • PHP Data Objects (PDO)
• PHP REST API

JS front end frameworks/libraries

I still have to do this

• Prerequisite
  • Misc
  • JavaScript
  • State
  • XML

TIP: Choose any ONE of the below frameworks/libraries to get started with.

• Vue.js
• React.js
• Angular

TIP: Make a dynamic website. (Eg: Either add a back end to the previously made front end or make a new webapp from scratch.)

Common path for everyone

• Web performance
• SEO
• Firebase

DevOps

• Git (covered above)
• Shell Scripting
• Build Systems
  • Make
• Deployment/hosting

TIP: Deploy the web site/web app that you made!

• YAML
• CI/CD (I still have to do this)
• Docker

The Missing Semester of CS Education

Character Sets and Encoding

• Unicode
• New Lines/Line Endings

C

Linux