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, Best Practices ¾

Syntax and Basic Constructs ¾

Learn DOM manipulation ⅝

HTML ¾

CSS ¾

JavaScript ¾

Accessibility ⅝

SEO Basics ½

Learn the basics ⅝

Making Layouts ¾

Responsive 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 &#frac12;

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♥