Scribd
Upload
638 views39 pages

JS Mastery 2024 Web Dev Roadmap

JSM Mastery

Uploaded by

Rossrival Bendillo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
638 views39 pages

JS Mastery 2024 Web Dev Roadmap

JSM Mastery

Uploaded by

Rossrival Bendillo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

JS Mastery

2024 Web Dev

Roadmap
Visit jsmastery.pro for more
Introduction

This roadmap will guide you to start with it in

the proper way.

Recommended path:

- Learn HTML & CSS

- Learn JavaScript

- Learn Git & GitHub

- Learn React.js

- Learn Next.js

JavaScript is the fundamental building block of

the web. All frontend frameworks (React.js,

Next.js, Vue.js) and all backend technologies

(Node.js, Express.js) revolve around JavaScript.

https://jsmastery.pro JavaScript Mastery


HTML

HTML - HyperText Markup Language

Basics

Understand the structure, elements, and attributes of HTML documents

Structure

<!DOCTYPE> <html> <head> <body>

Elements

Heading <h1> to <h6> Image <img>

Paragraph <p> Input <input> <textarea>

Lists <ul> <ol> <li> Button <button>

Link <a> Group Elements <div>

Semantics

Use elements like

<header> <nav> <main> <section> <aside> <footer>

https://jsmastery.pro JavaScript Mastery


CSS
CSS — Cascading Style Sheets
Structure

Box Model

Understand how elements are styled using

padding margin border

Selectors
Learn about different types of selectors to target and style
specific HTML elements. For example,

Type Class Id Child Sibling

Typography
Explore text-related properties like

font size weight alignment

Colors and Backgrounds


Understand how to set different

colors gradients background images

https://jsmastery.pro JavaScript Mastery


CSS
Layout and Positioning

Display
Learn the various display values like

block inline inline-block

Position
Explore how to position an element in different ways such as

relative absolute sticky fixed

Flexbox
Master the flexbox layout to create responsive website layouts

Grid
Dive into CSS grid layout for advanced two-dimensional layouts

Effects

Transitions
Learn to create smooth transitions using different CSS properties like

delay timing duration property timing-function

https://jsmastery.pro JavaScript Mastery


CSS
Transformations
Explore 2D and 3D transformations like

scaling rotating translating elements

Animations
Learn how to create animations using keyframes

Shadows and Gradients


Explore with box shadows and linear or radial gradients

Advanced (Plus)

Learn how to use CSS processors like sass or frameworks like


tailwindcss for more powerful and efficient styling

Build and Deploy a Sushi Website using


HTML & CSS

https://jsmastery.pro JavaScript Mastery


CSS
Transformations
Explore 2D and 3D transformations like

scaling rotating translating elements

Animations
Learn how to create animations using keyframes

Shadows and Gradients


Explore with box shadows and linear or radial gradients

Advanced (Plus)

Learn how to use CSS processors like sass or frameworks like


tailwindcss for more powerful and efficient styling

Build and Deploy a Sushi Website using


HTML & CSS

https://jsmastery.pro JavaScript Mastery


JS
JavaScript

Variables and Data Types


Declaring variables and understanding different data types such
as string, number, boolean, null, undefined, object, array, etc.

Operators
Learn to use different operators such as arithmetic, comparison,
logical, and assignment to perform operations on data

Control Flow
Try & test conditional statements such as if else, switch and loops
such as for while to control program flow

Functions
Define and learn to create different functions, understand function
scope, and work with different parameters and return values

DOM Manipulation
Knowing how to use JavaScript to change and interact with HTML
elements on a webpage is an important skill.

https://jsmastery.pro JavaScript Mastery


JS
Modern JavaScript
ES6 Features

Arrow Functions
In JavaScript, there are different kinds of functions. One type that
you'll often come across is called the Arrow function. Many prefer
using arrow functions because they are shorter & easier to write.

Destructuring
A helpful concept that will come in handy when we have to extract
values from arrays and objects

Spread Syntax
Allows to expand elements of an array or object into individual
elements

Template Literals
One of the widely used. Using the back sticks ``, we can
interpolate strings with placeholders & expressions

Modules
Learn how to import export code between files to organize the
code

https://jsmastery.pro JavaScript Mastery


JS
Asynchronous Programming

Promises
Gain an understanding of the concept of promises and why they
are necessary. Learn about resolving and rejecting promises and
utilizing then and catch for handling asynchronous operations.

Async/Await
Explore the usage of async/await to write asynchronous code in a
more synchronous way. This convention is widely adopted as an
alternative to using then and catch for handling promises.

Fetch API
Discover how to use the Fetch API in the browser to send HTTP
requests and handle the resulting responses.

Axios (Plus)
Explore the popular third-party library, Axios, which simplifies the
process of making HTTP requests compared to the standard Fetch
API.

https://jsmastery.pro JavaScript Mastery


JS
Additional JavaScript Concepts

Array Methods
Familiarize yourself with different widely used array methods to
simplify the development process. For example,

map slice includes

filter splice join

reduce forEach reverse

and few others

Error Handling
One of the crucial part of web development is to catch and
display the errors properly. No user will like to see the complete
red screen with a text — “Error on line 35”. Not even us.

Therefore, it is essential for every developer to cultivate the skill of


error handling. Familiarize yourself with the try-catch-finally block,
which enables you to capture errors and present them on the user
interface using user-friendly and easily understandable language.

https://jsmastery.pro JavaScript Mastery


Master JavaScript
What is JavaScript?
Get started with JavaScript
What is ECMAScript?
Easy Guide to Object Rest/Spread
Properties in JavaScript
Learn JavaScript Async/Await
The Ultimate JavaScript CheatSheet
JS Projects for Beginnners

https://jsmastery.pro JavaScript Mastery


Git & GitHub
Roadmap

https://jsmastery.pro JavaScript Mastery


Git & GitHub Roadmap
Start from the top and work your way down to
more advanced topics:
What is Git?
Git in few words
Learn Git in 15 minutes
Learn Github in 15 minutes
Git- The Simple Guide
Git Commands for beginners
Git Lab
Learn Git Branching
https://jsmastery.pro JavaScript Mastery
Git & GitHub Roadmap
Free courses that will help you learn Git & GitHub:
Git Tower
Introduction to Git & Github
Compilation of commonly asked git questions:
First Aid Git

https://jsmastery.pro JavaScript Mastery


React Roadmap

https://jsmastery.pro JavaScript Mastery


Master React.js
What are the Main Benefits of
ReactJS over Plain JavaScript?
8 reasons Why you need to use React.js?
React vs Vue vs Angular: Which is the
best framework for your project?
Vite Vs create-react-app: Which is
the best tool for your project?
Build an App and Master React.js

https://jsmastery.pro JavaScript Mastery


Master React.js
Build and Deploy a Modern GPT-3
Website in React.js
React Hooks Guide
React Component Lifecycle methods
with Hooks
Learn Custom Hooks and Build a
Project
Complete guide to Refs in React
Build and Deploy a Modern
Restaurant website in React.js

https://jsmastery.pro JavaScript Mastery


Master React.js
Build and Deploy a Modern Fitness
Exercises website in React.js
Build and Deploy Google Search 2.0
with Tailwind CSS
React State Management Tools:
Redux vs Mobx vs Recoil
A deep dive into React Context API
with examples
Brain-friendly guide to Redux
Redux Vs React Context: Which
should you use?

https://jsmastery.pro JavaScript Mastery


Master React.js
Build and Deploy a Full stack Social
Media App with React & Sanity.io
Build and Deploy a Full stack Portfolio
Build and Deploy a Modern Website
Build and Deploy a Real-time React

Admin Dashboard
Build and Deploy a Full Stack Social

Media App | React JS, Appwrite


Build and Deploy an Amazing

3D Developer Portfolio with Three.js

https://jsmastery.pro JavaScript Mastery


React Resources
React Resources
Keep up with the growing React ecosystem! It
cover the latest learning resources, libraries...

https://reactresources.com/

React Bits
A compilation of React Patterns, techniques,
tips and tricks.

https://vasanthk.gitbooks.io/react-bits

Reactjs Official Website


React documentation and related resources.

https://reactjs.org/

https://jsmastery.pro JavaScript Mastery


Next.js Roadmap

https://jsmastery.pro JavaScript Mastery


Master Next.js
Next.js 14 Full Course 2024 | Build and
Deploy a Full Stack App Using Next.js
React Foundations
Learn about the Next.js architecture
and how it works under the hood.
File Based Routing
Styling in Next.js
Data Fetching
SEO and Metadata
Build and Deploy a Car Rental App

https://jsmastery.pro JavaScript Mastery


Master Next.js
Build and Deploy a Dribbble Clone
How to implement authentication
API Routes in Next.js
Build and Deploy a Threads Clone
Server Actions in Next.js 14
Build and Deploy an E-Commerce App
Fetching data faster with the Next.js
App Router
When to use Server and Client
Components

https://jsmastery.pro JavaScript Mastery


Master Next.js
Build and Deploy a Full Stack Next 14
Events App with Next.js 14 & Stripe
Build and Deploy a Figma Clone
Build and Deploy a Full Stack AI SaaS

Platform with Next js 14, TS, Stripe

https://jsmastery.pro JavaScript Mastery


More Resources

https://jsmastery.pro JavaScript Mastery


Challenges
It might also be a good idea to do a little
practicing before moving on.

If you want something fresh to work on, now


would be a fine time to do some coding exercises
from across the net.

The following sites are all great places to look:

LeetCode
https://leetcode.com/

Coderbyte
https://coderbyte.com/

https://jsmastery.pro JavaScript Mastery


Challenges

Exercism
https://exercism.org/

Codewars
https://codewars.com/

CodeChef
https://www.codechef.com/

Hacker Rank
https://www.hackerrank.com/

https://jsmastery.pro JavaScript Mastery


Challenges
The developer’s life is a life of challenges (& bugs,
haha). To keep up with trends, we have to
challenge ourselves constantly. For that, use:

CSS Battle
Battleground to improve, tighten CSS skills

https://cssbattle.dev/

Frontend Mentor
Develop, practice & compete to code a
frontend website from its design file.

https://frontendmentor.io/

https://jsmastery.pro JavaScript Mastery


Guides
Covers valuable cheat sheets, guides and great
tutorials on tech stuff.

DevDocs
Pragmatic information on almost every
language.

https://devdocs.io/

DevHints
Beautiful cheatsheets comprising many
languages.

https://devhints.io/

https://jsmastery.pro JavaScript Mastery


Guides
GitSheets
A dead simple git cheatsheet.

https://gitsheet.wtf/

30secondsofcode
Provides short code snippet mainly featuring
JavaScript.

https://30secondsofcode.org/

OverAPI
A site collecting all the cheatsheets, all!

https://overapi.com/

https://jsmastery.pro JavaScript Mastery


Useful GitHub Repos
Freely available programming books
A collection of tips to imporve CSS skills
Lists about all kinds of interesting topics
A collective list of free APIs
Short JavaScript code snippets
A Collection of app ideas to improve
33 JavaScript concepts every
developer should know.
Algorithms and DS implemented in
JavaScript with explanations
https://jsmastery.pro JavaScript Mastery
Best AI tools

https://jsmastery.pro JavaScript Mastery


AI Tools
AI tools that can streamline your web
development process.

GPT-4 by OpenAI
It’s a valuable tool for content creation, helping
developers and writers create high-quality
content for their websites.
https://openai.com/gpt-4

GitHub Copilot
It’s one of the best AI tools for bug fixing,
learning new languages, and accelerating the
coding process overall.
https://github.com/features/copilot

https://jsmastery.pro JavaScript Mastery


AI Tools
CopyAI
Useful to generate high-quality content that is
optimized for search results.
http://copy.ai/

Wordlift
It help web developers improve the visibility
and SEO performance of their website content
https://wordlift.io/

https://jsmastery.pro JavaScript Mastery


AI Tools
Mintlify
It scans code and generates documentation to
explain it. Since it uses AI, its work is pretty good
https://mintlify.com/

Testim - Tricentis
It optimizes & accelerates end-to-end testing.
It covers a range of capabilities, including risk-
based testing, GUI, design testing and more.
https://tricentis.com

https://jsmastery.pro JavaScript Mastery


AI Tools
ClickUp
ClickUp is a game-changer for software teams,
offering a range of innovative tools to enhance
work efficiency
https://clickup.com/

Stepsize
It’s a collaborative tool designed to help you
stay updated on your product engineering
team’s activities and achievements. It serves
as a project historian and task manager
https://stepsize.com/

https://jsmastery.pro JavaScript Mastery


AI Tools
Synk
It’s a code analysis tool that can help devs find
security vulnerabilities and open-source
licence compliance issues in their code.
https://snyk.io/

Otter AI
It’s an AI-powered meeting transcription tool
that can help developers transcribe their
meetings and collaborate more effectively.
https://otter.ai/

https://jsmastery.pro JavaScript Mastery


...before you go
Ready to take your web development skills to the
next level? Dive into our exclusive Next.js course to
turn your roadmap into hands-on expertise.
If you're eager to dive deep into something this
specific and build substantial projects, our special
course on Next.js has got you covered.

The Ultimate

Next 14 Course

It teaches everything from the ground up, providing a


hands-on experience that goes beyond this.
Check it out and take your skills to the next level

https://jsmastery.pro JavaScript Mastery

You might also like