Frontend Roadmap Mobile

Front-end ¿

Internet ¿

How does the internet work?

What is HTTP?

Browsers and how they work?

DNS and how it works?

What is Domain Name?

What is hosting?

HTML ¿

Learn the basics

Writing Semantic HTML

Forms and Validations

Accessibility

SEO Basics

Conventions and Best Practices

CSS ¿

Learn the basics

Making Layouts

Responsive design and Media Queries

Floats Positioning Display Box Model CSS Grid Flex Box

JavaScript ¿

Syntax and Basic Constructs

Learn DOM manipulation

Learn Fetch API / Ajax (XHR)

ES6+ and modular JavaScript

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

Version Control Systems ¿

Repo hosting services
Create account and Learn to use GitHub

GitHub

GitLab

Bitbucket

Basic Usage of Git

Web Security Knowledge ¿

Get at least a basic knowledge of all of these

HTTPS

CORS

Content Security Policy

OWASP Security Risks

Package Managers ¿

npm

yarn

CSS Architecture ¿

BEM

OOCSS

SMACSS

CSS Preprocessors ¿

Sass

PostCSS

Less

Build Tools ¿

Task Runners

npm scripts

Gulp

Linters and Formatters

Prettier

ESLint

StandardJS

Module Bundlers

Webpack

Rollup

Parcel

Pick a Frameworks ¿

React.js

Redux

MobX

Angular

RxJS

NgRx

Vue.js

VueX

Modern CSS ¿

Styled Components

CSS Modules

Styled JSX

Emotion

Radium

Glamorous

Web Components ¿

HTML Templates

Custom Elements

Shadow DOM

CSS Frameworks ¿

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

Testing you Apps ¿

Mocha

Chai

Ava

Jasmine

You can fill all your testing need with just these

Jest

react-testing-library

Cypress

Enzyme

Type Checkers ¿

TypeScript

Flow

Progressive Web Apps ¿

Learn different Web APIs used in PWAs

Storage

Web Sockets

Service Workers

Location

Notifications

Device Orientation

Payments

Credentials

Calculating, Measuring and improving perfomance

PRPL Pattern

RAIL Model

Performance Metrics

Using Lighthouse

Using DevTools

Server Side Rendering ¿

React.js

Next.js

After.js

Angular

Vue.js

Universal

Nuxt.js

GraphQL ¿

Apollo

Relay Modern

Static Site Generators ¿

Next.js

GatsbyJS

Nuxt.js

Vuepress

Jekyll

Hugo

Mobile Applications ¿

React Native

NativeScript

Flutter

Ionic

Desktop Applications ¿

Electron

Carlo

Proton Native

Web Assembly ¿

Keep Learning

"Bright" Future♥