Lean Frontend Developer Roadmap (React/Tailwind)

Motivation

There are many great technologies to learn and use. Some of them are more modern and some of them are more effective. But when you have a very limited learning budget/time, you need to focus on what's more important. This roadmap is a minimal list of technologies and approaches a junior frontend developer should know to start bringing value to the team and the project as soon as possible.

We intentionally limit the choice to a single framework/tool for a particular type of job. We take responsibility for the choice to protect junior developers from doubts and the corresponding fatigue of constant comparison.

Please note, it's a living document because we are constantly looking for better and leaner technologies and approaches. If you want to cement it, please fork.

Learning levels

Level 1. Prerequisites

• English language basics (if necessary)
• Development enviroment
  • Visual Studio Code
• Using Google search
• Remote work
  • Team chat
    • Slack
  • Task management
    • Trello
  • Time management
    • Toggle Track
  • Meetings
    • Zoom
• Using Chrome Dev Tools
  • Console
  • Element inspector
  • Device toolbar

Level 2. Fundamentals

• Terminal basics
  • Directory structure
  • File & directory manipulation
• Version control
  • Git basics
• HTML
  • Document structure
  • Layout tags
  • Form elements
  • Style and script
  • Emmet
• CSS
  • Main properties
    • Background
    • Color
    • Size
    • Position
    • Display
    • Padding
    • Margin
    • Pseudo-selectors
  • Size units
    • px
    • %
    • rem
    • vh
  • CSS Variables
  • Flexbox basics
  • CSS Grid basics
  • Google fonts
• Responsive Web Design
  • Relative units (re rem, %)
  • Flexible grid (re Flexbox, CSS Grid)
  • Media queries
  • Resonsive images
    • Picture tag
• Design
  • Image formats
    • JPG
    • PNG
    • SVG
  • SVG icons
    • Font Awesome
  • Figma
    • Using third-party templates
    • Creating own banners

Level 3. CSS framework & Git team workflow

• JavaScript
  • NPM basics
  • Installing Node through NVM
• CSS Frameworks
  • Tailwind
• Version control
  • Git
    • Conflict resolution
  • Github
    • Create and merge PRs

Level 4. JS basics

• JavaScript
  • Lanugage basics
  • DOM manipulations
    • Search
    • Insert
    • Delete
    • Add/remove CSS classes
    • Change styles
  • Browser events
    • OnLoad
    • OnClick
    • OnSubmit
  • AJAX
    • Axios
  • Frameworks
    • Alpine.js
• Debugging
  • Console output
  • Chrome debugger
• Deployment
  • Vercel
• Security
  • XSS attack

Level 5. JS framework

• JavaScript
  • Frameworks
    • React
      • Installing CRA
      • Basics
        • Functional component
        • Hooks
          • Rules of Hooks
          • useState
          • useEffect
          • useCallback
          • useRef
          • useMemo
          • useContext
          • Creating own hooks
        • Context
        • Patterns
          • Component composition
      • Component styling
        • CSS Modules
        • clsx
      • Automated testing
        • Jest
        • React Testing Library
• Build systems
  • Vite

Level 6. Going deeper

• JavaScript
  • Frameworks
    • React
      • State management
        • Redux
• TypeScript
  • Built-in types
  • Installing community types
  • Creating own type
  • DOM Event parameter types
  • React types
    • Insalling CRA typescript template
    • Props type
• Deployment
  • Docker
  • Docker Compose
• CI/CD
  • Github Actions

[Optional] Level 7. Broaden horizons to full-stack

• API request structure
  • REST
• Next.js
  • Pages
  • APIs
• Databases
  • Relational
    • MySQL
  • NoSQL
    • MongoDB
• Serverless
• Deployment
  • Nginx (proxy)
• Mobile apps
  • React Native
• Desktop apps
  • Electron