A web developer roadmap for aspiring web developers

introduction.md

using the roadmap

This document should be viewed as an overall guide on what needs to be learnt. If you're an aspiring web dev, treat this as a signpost.

effective way of learning

• Learn by doing. Practice the code examples yourself.
• Then creating end to end projects is the best way to assemble all your learning at one place and boost your confidence.

do at your own pace

opinionated

I am biased towards React and so is this roadmap. I have seen React being used in multinationals across the world. However, if your local market favours Angular or Vue then my suggestion would be to go for those as all three major frameworks are similar in essence and have great demand.

updating this doc

If you find a free course or a topic which you think should be added here, feel free to comment with the link and thoughts. Together we will make this doc even better.

learning_plan.md

the roadmap

pre-requisites

Inner workings of Internet

• Domain Name and DNS
• Hosting
• HTTP Basics

week 1

Do the basics

1. HTML

   • semantic HTML
   • forms and validations

2. CSS

   • basics
   • positioning
   • cascade
   • preprocessors: SASS

3. JavaScript

   • basic programming
   • closure
   • ES6 constructs

4. Vanilla Javascript

   • Understaning the DOM.
   • And manipulation APIs.
   • fetch API

5. Async JS

   • script execution
   • callbacks
   • event loop in browsers
   • promises
   • async and await
   • generators (optional)

week 2

Node, TS and the ecosystem

1. Basics of NodeJS

   • Node APIs
   • npm
   • yarn

2. Task runners, plugins, module bundlers and compilers

   • npm scripts
   • gulp
   • babel
   • ES6 modules
   • webpack
   • lint and prettier

3. Typescript

   • getting started with tsc and options
   • writing functions with TS
   • generics in TS
   • using TS in your project using @types

4. Functional Programming in JS/TS

   • higher order functions
   • pure functions
   • currying, partial application
   • map, reduce, filter, forEach
   • compositon,
   • memoize

week 3

Let's get started with ReactJS

1. React
2. Styling in React: CSS Modules, Styled Components (or any CSS-in-JS library)
3. Understanding Flux pattern by learning Redux
4. Single Page App and Routing (React/Reach Router)
5. Depending on your choice and requirement one of these state management libs
   • Apollo GraphQL
   • MobX
   • useReducer + Context

week 4

The advanced concepts

1. Web Security (at least the below topics)

   • HTTPS
   • CORS
   • Content Security Policy
   • OAuth
   • Top 10 OWASP Security Risks

2. Web Accessibility

3. Unit Testing with Jest

4. Web Performance and tuning tips

5. Service and Web Workers

6. JS Design Patterns

7. Browser storage APIs

8. Electron and node powered desktop apps

learning_resources.md

resources

Below are some of the best resource recommendation to learn these things.

video courses

1. Frontend Masters This has the best content but unfortunately this is paid and subscription is quite costly.

2. egghead even though subscription is paid, this has some excellent free courses on redux and mobx.

   • getting-started-with-redux

   • building-react-applications-with-idiomatic-redux

   • manage-application-state-with-mobx-state-tree

3. JavaScript 30 challenge

4. Udacity

   • Good JS courses
     • Object Oriented Programming in JS
     • JS and DOM
   • Course on Responsive Design [CSS]
   • Course on a11y by Google is amazing

documentation and blogs

1. React Docs
2. HTML Spec has a dev only version for reading
3. Webpack getting started tutorial
4. JavaScript Garden for understanding JS quirks

youtube channels

1. netninja
2. Brad Traversy

interactive cli based

1. nodeschool.io
2. freecodecamp

books

1. You Don't Know JS
2. Eloquent JS
3. JS info

I found these courses on react useful - 1. https://scrimba.com/learn/learnreact 2. https://egghead.io/courses/the-beginner-s-guide-to-react