Nothing Special   »   [go: up one dir, main page]
Scribd Logo
Upload

Welcome to Scribd!

  • 393 views

    Frontend Developer Roadmap 1676945239

    Uploaded by

    SAYAK DAS (RA2011026010101)
    This document outlines a learning path for frontend web development, covering HTML, CSS, JavaScript, frameworks like React, and related tools. It provides introductions and basic topics to learn for each area, including HTML basics, CSS positioning and box model, JavaScript syntax and DOM manipulation, React components and hooks, testing libraries, deployment options, and project ideas. The path is structured to take learners from foundations to more advanced frameworks and concepts.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Frontend Developer Roadmap 1676945239

    Uploaded by

    SAYAK DAS (RA2011026010101)
    393 views23 pages
    This document outlines a learning path for frontend web development, covering HTML, CSS, JavaScript, frameworks like React, and related tools. It provides introductions and basic topics to learn for each area, including HTML basics, CSS positioning and box model, JavaScript syntax and DOM manipulation, React components and hooks, testing libraries, deployment options, and project ideas. The path is structured to take learners from foundations to more advanced frameworks and concepts.

    Original Description:

    Original Title

    Frontend_Developer_Roadmap__1676945239

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document outlines a learning path for frontend web development, covering HTML, CSS, JavaScript, frameworks like React, and related tools. It provides introductions and basic topics to learn for each area, including HTML basics, CSS positioning and box model, JavaScript syntax and DOM manipulation, React components and hooks, testing libraries, deployment options, and project ideas. The path is structured to take learners from foundations to more advanced frameworks and concepts.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    393 views23 pages

    Frontend Developer Roadmap 1676945239

    Uploaded by

    SAYAK DAS (RA2011026010101)
    This document outlines a learning path for frontend web development, covering HTML, CSS, JavaScript, frameworks like React, and related tools. It provides introductions and basic topics to learn for each area, including HTML basics, CSS positioning and box model, JavaScript syntax and DOM manipulation, React components and hooks, testing libraries, deployment options, and project ideas. The path is structured to take learners from foundations to more advanced frameworks and concepts.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 23

    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

    You might also like