Plano de Estudo

Frontend T Roadmap 2023~2024

35 cursos
6 posts

Aqui está meu roadmap com as coisas que julgo mais importante para 2023~2024

Learn the Basics - HTML

  • Basics
  • Emmet
  • Forms
  • Semantic HTML
  • SEO Basics

Learn the Basics - CSS

  • CSS
  • Basics
  • Selectors
  • Positioning
  • Box Model
  • Display
  • Specificity

Learn the Basics - CSS 2

  • CSS
  • FlexBox
  • Grid
  • Media Queries
  • Pseudo Elements
  • Pseudo Classes
  • Animations

Learn the Basics - JS 1

  • JavaScript
  • Basic Syntax
  • DOM Manipulation
  • Fetch API / Ajax
  • Async Await
  • Event Listeners
  • ES6+ JavaScript

Learn the Basics - JS 2

  • JavaScript
  • Promises
  • Classes
  • Array Methods
  • Scoping
  • Hoisting
  • Closures

Learn any CSS Framework These are the most popular ones

  • Bootstrap
  • Tailwind
  • Materialize
  • Bulma
  • Semantic UI
  • Foundation

Learn any CSS Preprocessor

  • SASS / SCSS
  • Postcss
  • Less
  • Stylus
  • Stylecow

Learn basic usage of Version Control System

  • Git
  • GitHub

Learn the basics of Package Managers

  • NPM
  • Yarn

Pick a JavaScript Framework / Library The most popular ones

  • React
  • Vue
  • Angular
  • Svelte
  • Meteor
  • Remix

Basic things to learn in React

  • Components
  • JSX
  • Props
  • State
  • Events
  • Conditional Rendering

Important topic React - Hooks

  • useState
  • useEffect
  • useRef
  • useContext
  • useReducer
  • useMemo
  • useCallback

Learn some of the React UI Frameworks

  • Material UI
  • Ant Design
  • Chakra UI
  • React Bootstrap
  • Rebass
  • Blueprint
  • Semantic UI React*

Learn to use popular React packages

  • React Router
  • React Query
  • Axios
  • React Hook Form
  • Styled Components
  • Storybook
  • Framer Motion

Learn how to manage state in React with state management tools

  • Redux
  • MobX
  • Hookstate
  • Recoil
  • Akita

Things to learn after learning React

  • Next JS
  • Gatsby
  • TypeScript
  • React Native
  • Electron

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

Learn to test your apps with some of these libraries / frameworks

  • Jest
  • Testing Library
  • Cypress
  • Enzyme
  • Jasmine
  • Mocha

Other important topics you should know

  • PWA
  • Web Sockets
  • CORS
  • JSON
  • RESTful APIs
  • GraphQL APIs
  • Basic Security
  • Web Accessibility
Criado por Luigi Nicoletti

75.4k xp

Inscreva-se agora

Última atualização em

07/06/2023

O que é este plano de estudo?

Planos de estudo são sequências de cursos e outros conteúdos criados por alunos e alunas da Alura para organizar seus estudos. Siga planos que te interessem ou crie o seu próprio.

Passo a passo

  1. 1

    Conteúdo do plano