frontend-engineer-learning-resources.md

So, You Want to be a Frontend Engineer

Frontend Engineering is a challenging but rewarding career path. Working on the frontend began with the inception of the internet, the web browser and its core technologies (HTML, CSS, JavaScript), but has become significantly more complex over the past 26 years. Because most frontend engineering occurs in the context of multiple iterations of a Browser, it contrasts with other disciplines like Backend Engineering which tends to focus on a single stable platform. This resource is intended to give you a sketch of some of the learning-paths that can lead you to a career as a Frontend Engineer.

What do I need to know?

To start, let's examine a high-level list of topics that established frontend engineers should have knowledge of. In each of these topics, the level of depth required to get started as a frontend engineer may vary, but it's good to have a general breadth of knowledge on all of these topics.

These lists are not exhaustive, rather a good starting point to gain general knowledge.

• Frontend Engineering Fundamentals
  • Core Web Technologies
    • HTML
      • basics
        • elements
          • tags, attribute, id, class
        • form elements
          • form, fieldset, legend, textarea, label, button, input
          • checkbox, file, password, radio, reset, submit, text
        • js/css elements
          • script, link, style
        • embed elements
          • img, video, audio, iframe
    • CSS
      • basics
        • syntax and grammar
          • rules
          • selectors
            • type, class, id
          • declarations, values
        • the cascade
          • specificity
        • import schemes
        • rendering
          • display
            • block, inline-block, float, flex, grid
          • position
            • static, relative, absolute, fixed, sticky
          • stacking order
            • z-index
    • JavaScript
      • basics
        • syntax and grammar
          • primitive values
            • boolean, null, undefined, number, string, symbol, bigint, object, function, date, arrays, map, weakmap, set, weakset
          • function, object, class
        • scope
          • closure
          • global object
          • window
        • declarations
          • var, let, const
        • control flow
          • async
            • Promise
            • callback
          • sync
            • switch
            • if
            • ternary operator
        • standard library
          • global objects
            • date, math, string, array, object
          • parsing
            • parseFloat, parseInt, JSON.stringify/parse
          • iterators
            • functional
              • map, reduce, filter
            • imperative
              • forEach, for, for in, for of, do while, while
      • module systems
        • commonjs
        • native
          • import
          • export
      • data-interchange formats
        • JSON, XML, RSS
  • Browser Fundamentals
    • Developer Tools
      • techniques
        • debugging, logging, profiling, tracing, audits
      • browser-specific
        • Lighthouse
        • Chrome Dev Tools
        • Firefox Dev Tools
    • Parsing & Execution
      • main thread
      • web workers
    • Storage
      • localStorage, sessionStorage, IndexedDB
    • Communication Channels
      • ajax, websockets, CORS
  • Libraries & Frameworks
    • JavaScript (choose one to start)
      • React
      • Vue
      • Angular
      • Svelte
      • HTMX
      • Ember
    • CSS
      • atomic
        • Tailwind
        • Tachyons
      • comprehensive
        • Bootstrap
        • BEM
      • architecture
        • OOCSS
        • JSS
        • SMACSS
  • Frontend Tooling
    • The NPM Ecosystem
      • installing packages
      • package.json
    • CSS Pre-processors
      • sass / scss
      • less
      • postcss
    • JavaScript Bundlers
      • webpack
      • vite
      • parceljs
      • rollup.js
      • esbuild
      • babel
  • Accessibility (A11Y)
    • standards
      • WCAG, WAI-ARIA
    • tools
      • axe
  • Alternate Syntax
    • JSX
    • HyperScript

What order should I learn things in?

This is somewhat subjective, but the best place to start is the thing you are most interested in learning right now. Inspiration and interest are powerful motivators that will help you stay focused when you dive into a topic.

That said, here is an ordered list that composes a learning-path that may be useful to help guide you:

1. Core Web Technologies

HTML, CSS, and JavaScript are the building blocks of the web, which makes them a great place to start your frontend journey. Understanding each of these will set you up with a strong foundation on which to build.

2. Browser Fundamentals

With the days of the browser wars mostly in the rear view mirror, it's still a good idea to understand how browsers work. There are a large number of capabilities you should be aware of, but we've limited this to Parsing, Storage, and Communication. Lastly, the tools provided by browser vendors in developer tools are excellent to invest time in; learning how to debug, log, profile, and trace are very valuable skills.

3. Libraries & Frameworks

These things build on top of the core web technologies, adding an abstraction that can give you a boost in productivity. We've listed some of the most popular JavaScript and CSS frameworks that you might come across in your work. Ultimately, we recommend you limit your exploration to the libraries and frameworks in use within the project you are working on -- but if you want to expand your horizons this list should be a good place to start.

4. Frontend Tooling

There are a vast number of tools that can help in the frontend ecosystem. Understanding the general concepts of pre-processors and bundlers will help you as you encounter them in the wild. It's also helpful to have a basic knowledge of npm and package.json, as so many tools are installed using it. We've listed a few of the most common ones here to give you a starting point; as with the previous section we recommend you start with the tools your current project is using.

5. Accessibility

Creating accessible web experiences is a best practice and it is increasingly becoming mandatory for certain industries. Knowing how to optimize experiences for those with accessibility needs is a vital part of a frontend engineers toolbox.

6. Alternate Syntax

JSX has become nearly ubuiquitous in the frontend ecosystem, so we think it's a good idea to understand how it works as you will find it in use in many frameworks (React, Vue, etc..). HyperScript is very experimental but provides a novel approach to building applications in the browser. Start with JSX, try out HyperScript if you're feeling adventurous. This is listed last as we consider it optional in your frontend learning path.

Where can I learn more?

The path to learning frontend engineering is challenging due to the breadth and number of problem-spaces that require understanding. One of the best things you can do is to find a mentor who can help guide you and answer questions along your journey.

In the absence of a mentor, the following resources will help you with self-study. We've broken these out into free and paid categories with a focus on high-quality resources.

Free Resources

• Tutorial: Structuring the web with HTML
• Tutorial: CSS first steps
• Tutorial: Front-End Web Developers
• Book: Eloquent JavaScript
• Article: How Browsers Work: Behind the scenes of modern web browsers
• Video: So, You want to be a Front-End Engineer (How Browsers Work)

Paid Resources

• Courses: Deque Systems Accessibility Training
• Courses: A11Y Collective
• Frontend Masters Learning Path