Skip to content

kometolabs/lean-frontend-developer-roadmap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 

Repository files navigation

Lean Frontend Developer Roadmap (React/Tailwind)

CC BY-SA 4.0

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