Frontend Roadmap

Yes

Maybe

⅟ ⅛ ¼ ⅜ ½ ⅝ ¾ ⅞

- Yyyuueeew, why so ugly? Do something!
- Easy, try mobile page version!

Front-end ⅛

How does the internet work? ½

What is HTTP? ¾

Browsers and how they work? ½

Internet ½

DNS and how it works? ¼

What is Domain Name? ¾

What is hosting? ¾

Learn the basics ¾

Writing Semantic HTML ⅝

Forms and Validations ⅝

Conventions and Best Practices ½

Syntax and Basic Constructs ⅝

Learn DOM manipulation ½

HTML ¾

CSS ⅝

JavaScript ⅜

Accessibility ⅝

SEO Basics ⅜

Learn the basics ½

Making Layouts ⅝

Responsive design and Media Queries ⅝

Floats
Positioning
Display
Box Model
CSS Grid
Flex Box

Learn Fetch API / Ajax (XHR) ¼

ES6+ and modular JavaScript ⅜

Understand the concepts Hoisting, Event Bubbling, Scope, Prototype, Shadow DOM, strict ⅜

Version Control Systems
What are they, why you should use one

Basic Usage of Git ¾

Repo hosting services
Create account and Learn to use GitHub

GitHub ¾

GitLab ⅟

Bitbucket ⅟

npm and yarn both are fine, pick one or learn both, there is not mush difference

npm ⅝

yarn ½

Web Security Knowledge ¼

Package Managers ½

Get at least a basic knowledge of all of these

HTTPS ⅜

CORS ⅟

Content Security Policy ⅟

OWASP Security Risks ⅟

BEM ½

OOCSS ⅟

SMACSS ⅟

CSS Architecture
With modern frameworks and CSS-in-JS you don’t have to worry about these anymore but still it would be a good idea to get familiarized with BEM atleast

CSS Preprocessors
With how the modern frameworks there has been more push towards CSS-in-JS so you may not need these buy still a good idea to familiarize yourself

Sass ½

PostCSS ⅟

Less ⅛

npm scripts ¼

Gulp ¼

Task Runners ¼

Build Tools ⅛

Linters and Formatters ⅝

Prettier ½

ESLint ¾

StandardJS ⅟

Webpack ⅛

Rollup ⅟

Parcel⅟

Styled Components ⅟

CSS Modules ⅟

Styled JSX ⅟

Emotion ⅟

Radium ⅟

Glamorous ⅟

Module Bundlers ⅛

Pick a Frameworks ⅛

Modern CSS ⅟

Web Components ⅟

React.js ⅛

Redux ⅛

MobX ⅟

Angular ⅟

RxJS ⅟

NgRx ⅟

Vue.js ⅟

VueX ⅟

HTML Templates ⅟

Custom Elements ⅟

Shadow DOM ⅟

You can fill all your testing need with just these

Jest ⅟

react-testing-library ⅟

Cypress ⅟

Enzyme ⅟

CSS Frameworks ¼

Testing you Apps
Learn the difference between Unit, Integration, and Functional test and learn how to write them with the tools listed on the left

Mocha ⅛

Chai ⅟

Ava ⅟

Jasmine ⅟

JS based and better to use with your framework based JavaScript applications

Reactstrap ½

Material UI ⅟

Tailwind CSS ⅟

Chakra UI ⅟

CSS first frameworks which don’t come with JavaScript components by default

Bootstrap ½

Materialize CSS ⅟

Bulma ⅟

Learn different Web APIs used in PWAs

Storage ⅟

Web Sockets ⅟

Service Workers ⅟

Location ⅟

Notifications ⅟

Device Orientation ⅟

Payments ⅟

Credentials ⅟

Progressive Web Apps ⅟

Calculating, Measuring and improving perfomance

PRPL Pattern ⅟

RAIL Model ⅟

Performance Metrics ⅟

Using Lighthouse ⅟

Using DevTools ⅟

Type Checkers ⅛

Server Side Rendering (SSR) ⅟

GraphQL ⅟

Apollo ⅟

Relay Modern ⅟

TypeScript ⅛

Flow ⅟

React.js ⅛

Next.js ⅟

After.js ⅟

Angular ⅟

Vue.js ⅟

Universal ⅟

Nuxt.js ⅟

React Native ⅟

NativeScript ⅟

Flutter ⅟

Ionic ⅟

Mobile Applications ⅟

Desktop Applications ⅟

Static Site Generators ⅟

Electron ⅟

Carlo ⅟

Proton Native ⅟

Next.js ⅟

GatsbyJS ⅟

Nuxt.js ⅟

Vuepress ⅟

Jekyll ⅟

Hugo ⅟

Web Assembly ⅟

Keep Learning ⅛

"Bright" Future♥