Front-End

Developer 

Roadmap
Created by JS Mastery

Visit jsmastery.pro for more

Starting with web development can be
overwhelming. This front-end developer
roadmap will guide you to start with it in the
proper way. We will cover the most important
building blocks of the web. This guide will help
you to become a modern front-end developer.

https://jsmastery.pro JavaScript Mastery

Brought to you by JSM
This guide will provide you with useful
information and actionable steps, but if you truly
want to dominate the competition and secure a
high-paying job as a full-stack software
developer, jsmastery.pro is the answer.
Read until the end for more information and
special discounts!

help onng your

// With yoanurd wa
projectsI wa tchi
s ab
videosyr React jo le to laa nd a
$110k/ b at !
o, CA
company in San Dieg
― Jake Simon gic Media
at Tra
Developer
Full Stack

Say to JSM Pro

<header> ”>
<section id=”hero </h1>
ar t Le ar ning
<h1> St
<h2>
<!-- React.js -->
<!-- Next.js -->
Web Development rters
<!-- Blockchain --
> 500k+ suppo

<!-- Solidity -->

</h2>
h1>
<h1> Right Now </

https://jsmastery.pro JavaScript Mastery

Learn the Basics - HTML
HTML
Basics
Emmet
Forms
Semantic HTML
SEO Basics

https://jsmastery.pro JavaScript Mastery

Learn the Basics - CSS

CSS
Basics
Selectors
Positioning
Box Model
Display
Specificity

https://jsmastery.pro JavaScript Mastery

Learn the Basics - CSS

CSS
FlexBox
Grid
Media Queries
Pseudo Elements
Pseudo Classes
Animations

https://jsmastery.pro JavaScript Mastery

Learn the Basics - JS

JavaScript

Basic Syntax

DOM Manipulation

Fetch API / Ajax

Async Await

Event Listeners

ES6+ JavaScript

https://jsmastery.pro JavaScript Mastery

Learn the Basics - JS

JavaScript

Promises

Classes

Array Methods

Scoping

Hoisting

Closures

https://jsmastery.pro JavaScript Mastery

Learn any CSS Framework
These are the most popular ones

Bootstrap

Tailwind

Materialize

Bulma

Semantic UI

Foundation

https://jsmastery.pro JavaScript Mastery

Learn any CSS
Preprocessor mostly SASS
and SCSS

SASS / SCSS

Postcss

Less

Stylus

Stylecow

https://jsmastery.pro JavaScript Mastery

Learn basic usage of
Version Control System
Git
GitHub

Learn the basics of

Package Managers
NPM
Yarn
https://jsmastery.pro JavaScript Mastery
Pick a JavaScript
Framework / Library
The most popular ones

React

Vue

Angular

Svelte

Meteor

Remix
https://jsmastery.pro JavaScript Mastery
Basic things to learn in

React

Components

JSX

Props

State

Events

Conditional Rendering

https://jsmastery.pro JavaScript Mastery

Important topic

React - Hooks

useState

useEffect

useRef

useContext

useReducer

useMemo

useCallback
https://jsmastery.pro JavaScript Mastery
Learn some of the React UI
Frameworks
Material UI
Ant Design
Chakra UI
React Bootstrap
Rebass
Blueprint
Semantic UI React
https://jsmastery.pro JavaScript Mastery
Learn to use popular
React packages
React Router

React Query

Axios

React Hook Form

Styled Components

Storybook

Framer Motion
https://jsmastery.pro JavaScript Mastery
Learn how to manage
state in React with state

management tools

Redux

MobX

Hookstate

Recoil

Akita

https://jsmastery.pro JavaScript Mastery

Things to learn after
learning React

Next JS

Gatsby

TypeScript

React Native

Electron

https://jsmastery.pro JavaScript Mastery

Important things to learn
in Next JS
Static Site Generation
Server Side Rendering
Incremental Static
Regeneration
Dynamic Pages
CSS / SASS Modules
Lazy loading Modules
API Routes
https://jsmastery.pro JavaScript Mastery
Learn to test your apps
with some of these
libraries / frameworks

Jest

Testing Library

Cypress

Enzyme

Jasmine

Mocha

https://jsmastery.pro JavaScript Mastery

Learn to deploy your
websites
Some free popular service

Netlify

Vercel

Firebase

Github Pages

Heroku

Render

https://jsmastery.pro JavaScript Mastery

Other important topics
you should know
PWA
Web Sockets
CORS
JSON
RESTful APIs
GraphQL APIs
Basic Security
Web Accessibility
https://jsmastery.pro JavaScript Mastery
Learn about style guides
A style guide is a set of standards that outline
how code should be written and organized.

A style guide contains general rules.

e.g. which quotes to use, how many spaces to

indent, where to put line breaks, etc.

Some tools to help lint and

format code
ES Lint

Standard

Prettier
https://jsmastery.pro JavaScript Mastery
Optional Thing to learn

Module Bundlers

Webpack

Parcel

SnowPack

Rollup.js

Gulp

https://jsmastery.pro JavaScript Mastery

Project Ideas

Real Estate App

Cryptocurrency App

Travel Companion App

ECommerce Web Shop

Voice Assistant News App

Portfolio Website

Voice Powered Budget Tracker

Blog App with CMS

https://jsmastery.pro JavaScript Mastery

Project Ideas

Social Media Web App

Modern UI/UX Website

Chat App

Video Chat App

Progressive Web Apps

Covid-19 Tracker App

Google Search Clone

Premium Landing Page

https://jsmastery.pro JavaScript Mastery

JS Mastery Pro
Looking to advance your career and
understand the concepts & technologies that
top-shelf employers are looking for?

JS Mastery Pro offers two courses that will

help you master libraries, tools, and
technologies such as React.js, Next.js,
Material UI, Solidity, Redux, and many more.

If your goal is to earn a high income while

working on projects you love, JS Mastery Pro
can help you develop your skills to become
a top candidate for lucrative employment
and freelance positions.

https://jsmastery.pro JavaScript Mastery

Become a React.js master as you create a stunning
Netflix clone streaming app to showcase movies, actor
bios, and more with advanced AI voice functionality.

Leverage Web 3.0 and blockchain technology to build

a comprehensive NFT platform where users can
discover, create, purchase, & sell non-fungible tokens.

https://jsmastery.pro JavaScript Mastery

Plus, if you really want to make a splash and add

multiple group projects to your portfolio, join the JSM

Masterclass Experience to set yourself above the rest

and impress hiring managers.

Collaborate with other developers on exciting monthly

group projects, have your code reviewed by industry

experts, and participate in mock interviews and live

Q&As. With two masterclass options available, this is

the best way to truly launch your programming career

and secure the job of your dreams!

Visit jsmastery.pro today to get started!

https://jsmastery.pro JavaScript Mastery