Skip to main content

Frontend Web Developer Plan

Note: This plan is WIP

Metalearning Plan for Frontend Developer​

  • What concepts do I need to understand?
  • What facts do I need to memorize?
  • What procedures do I need to practice?
  • HTML
    • Tags
    • Id & Class
    • Box Model
      • Margin
      • Padding
      • Borders
  • Styling
    • CSS
      • Inline
      • Internal
      • External
    • FlexBox
    • CSS Grid
    • CSS Animation
      • Transition
      • Animation
      • Transforms
        • Scaling
        • Translation
        • Rotate
        • Skew
      • Prefixes (fix browser compatibility issues)
      • Custom timing functions
    • CSS Variables
    • Responsive Design
      • CSS Units (Absolute, Percentages, Relative)
        • Relative Units
          • Relative to Font Size (em, rem)
          • Relative to Viewport (vw, vh, vmin, vmax)
      • Media Queries
    • SCSS
    • CSS-in-JS (e.g. emotion )
  • JavaScript
    • Scope
    • Hoisting
    • Functions
    • Class
    • Modules
    • High Order Function
      • map
      • reduce
      • filter
      • sort
      • every
      • some
      • find
      • findindex
    • Rest & Spread operators
    • Promises
    • Async/Await
    • Fetch API
    • Axios
  • NodeJS Basics
  • Markdown
  • GraphQL
    • Why GraphQl
    • How it differs from Rest
    • GraphQL Type System
    • GraphQL Schema
    • Data Types in Schema
    • GraphiQL
    • Operation Types
    • Handling Data (Aliases, Fragments, Nested Fields)
    • Naming a query
    • Defining Variables
    • Mutation
    • Common issues with GraphQL (such as n+1 problem)
    • Appollo
  • ReactJS
    • JSX
    • components
      • Function based components
      • Class based components
      • High order components
    • props
    • Styling
    • state
    • Event Handling
    • State management using class
    • Life cycle methods
    • Conditional rendering (using ternary or && operator)
    • React Router
    • Hooks
      • useState
      • useEffect
      • useContext
      • useRef
      • useCallback
      • Custom Hooks
    • Context API
    • Error Boundaries
    • React lazy, memo, and Suspense
    • Reusability
      • Composition
      • React Children
      • HOCs (Higher Order Components)
      • Render Props
    • React Apps Performance
      • React's Tree Rendering
      • Shallow Comparison
      • Fixing performance issues using shouldComponentUpdate, React.PureComponent, and React.memo()
  • Redux
  • Gatsby
    • Gatsby Basics
    • plugins
    • Create a blog (text+Images+Videos)
    • Gatsby eCommerce
    • Deploy the site to GitHub Pages
    • Deploy the site to Netlify
  • Functional Programming

Procedures​

  • Creating an array of components using map
  • Components read data from JSON
  • Components read data from an API
  • Conditional rendering of components
  • Forms
    • Controlled Forms
    • Form Library: Formik

Practice/Drills​