Notes on FrontendMasters Courses

Disclaimer

I only added the courses and paths that I am interested in. To see all the content, visit the site. Also, the notes that I took during the courses are exclusive to me. They are not created with the motivation of creating a learning resource for people.

Learning Paths

• Beginner
• Professional
• Expert
• Computer Science
• Fullstack

Topic Paths

• Javascript
• CSS
• Node.js
• React
• Vue
• Typescript
• Functional Javascript
• Webpack
• Async JS & Rx.js

Standalone Courses

• TODO

---

Learning Paths

Beginner

Back to Top

• Complete Intro to Web Development, v2
• Getting Started with CSS
• Getting Started with JavaScript, v2
• JavaScript: From Fundamentals to Functional JS, v2
• Website Accessibility, v2

Electives

• Introduction to Dev Tools, v3
• Modern Search Engine Optimization (SEO)
• Getting a Front-End Developer Job
• Interviewing for Front-End Engineers

---

Professional

Back to Top

• JavaScript: The Hard Parts, v2
• Deep JavaScript Foundations, v3
• Complete Intro to React, v7
• Web Performance Fundamentals
• CSS Grid & Flexbox for Responsive Layouts, v2
• Full Stack for Front-End Engineers, v2
• TypeScript Fundamentals, v3
• Functional JavaScript First Steps

Electives

• Redux Fundamentals (feat. React)
• Build Progressive Web Apps (PWAs) from Scratch
• Introduction to Next.js
• Introduction to Gatsby, v2
• Design for Developers
• SVG Essentials & Animation, v2
• Complete Front-End Project: Build a Game
• Design Systems with React & Storybook

---

Expert

Back to Top

• JavaScript: The New Hard Parts
• JavaScript Performance
• Functional-Light JavaScript, v3
• State Machines in JavaScript with XState, v2
• Git In-depth
• Web Assembly (Wasm)
• Hardcore Functional Programming in JavaScript, v2
• Developer Productivity
• Asynchronous Programming in JavaScript (with Rx.js Observables)

Electives

• Complete Intro to Real-Time
• Exploring Service Workers
• Dynamic CSS with Custom Properties (aka CSS Variables)
• JavaScript and TypeScript Monorepos
• Building Your Own Programming Language
• Web Security
• Enterprise Architecture Patterns
• Hardcore Functional Architecture Patterns in JavaScript

---

Computer Science

Back to Top

• Complete Intro to Computer Science
• A Practical Guide to Algorithms with JavaScript
• Introduction to Data Structures for Interviews
• Tree and Graph Data Structures

Electives

• Web Assembly (Wasm)
• Functional JavaScript First Steps
• Functional-Light JavaScript, v3

---

Fullstack

Back to Top

• Full Stack for Front-End Engineers, v2
• Complete Intro to Databases
• Complete Intro to Linux and the Command-Line
• VIM Fundamentals
• Introduction to Node.js, v2
• API Design in Node.js, v3
• AWS For Front-End Engineers, v2
• Complete Intro to Containers (feat. Docker)

Electives

• Developer Productivity
• Git In-depth
• Introduction to Next.js
• Server-Side GraphQL in Node.js
• JavaScript and TypeScript Monorepos
• Introduction to Serverless Functions
• Complete Intro to Real-Time
• Web Security

---

Topic Paths

Javascript

Back to Top

• JavaScript: From Fundamentals to Functional JS, v2
• JavaScript: The Hard Parts, v2
• Deep JavaScript Foundations, v3
• JavaScript: The Recent Parts
• JavaScript: The New Hard Parts
• Functional-Light JavaScript, v3
• Hardcore Functional Programming in JavaScript, v2
• Accessibility in JavaScript Applications

Electives

• TypeScript Fundamentals, v3
• JavaScript Performance
• The Hard Parts of Object Oriented JavaScript
• JavaScript Testing Practices and Principles
• Debugging and Fixing Common JavaScript Errors
• Code Transformation and Linting with ASTs

---

CSS

Back to Top

• Getting Started with CSS
• CSS Grid & Flexbox for Responsive Layouts, v2
• SVG Essentials & Animation, v2
• Advanced CSS Layouts
• Dynamic CSS with Custom Properties (aka CSS Variables)

Electives

• Design for Developers
• CSS In-Depth, v2
• Design Systems with React & Storybook
• Sass Fundamentals
• Motion Design with CSS
• Responsive Web Typography v2
• Scalable Modular Architecture for CSS (SMACSS)

---

Node.js

Back to Top

• Introduction to Node.js, v2
• The Hard Parts of Servers & Node.js
• Digging Into Node.js
• API Design in Node.js, v3
• Server-Side GraphQL in Node.js
• Full Stack for Front-End Engineers, v2

Electives

• Complete Intro to Real-Time
• Introduction to MongoDB
• Introduction to Next.js
• Production-Grade Next.js
• JavaScript Testing Practices and Principles
• Advanced GraphQL, v2

---

React

Back to Top

• Complete Intro to React, v7
• Intermediate React, v4
• State Management in Pure React, v2

Electives

• React and TypeScript
• Redux Fundamentals (feat. React)
• Introduction to Next.js
• Introduction to Gatsby, v2
• Client-Side GraphQL in React
• State Modeling in React with XState
• Design Systems with React & Storybook
• React Native, v2
• Intermediate React Native

---

Vue

Back to Top

• Introduction to Vue 3
• Building Applications with Vue & Nuxt
• Production-Grade Vue.js

Electives

• Vuex for Intermediate Vue.js Developers
• Advanced Vue.js Features from the Ground Up

---

Typescript

Back to Top

• TypeScript Fundamentals, v3
• Intermediate TypeScript
• Making TypeScript Stick
• Production-Grade TypeScript

Electives

• React and TypeScript
• JavaScript and TypeScript Monorepos
• Intermediate React, v4
• Fullstack TypeScript (feat. GraphQL & Node.js)

---

Functional Javascript

Back to Top

• Functional JavaScript First Steps
• The Hard Parts of Functional JavaScript
• Functional-Light JavaScript, v3
• Hardcore Functional Programming in JavaScript, v2

Electives

• Hardcore Functional Architecture Patterns in JavaScript
• Redux Fundamentals (feat. React)
• Introduction to Elm, v2
• Advanced Elm

---

Webpack

Back to Top

• Webpack 4 Fundamentals
• Web Performance with Webpack

Electives

• Webpack Plugins System
• JavaScript and TypeScript Monorepos

---

Async JS & Rx.js

Back to Top

• JavaScript: The New Hard Parts
• Rx.js Fundamentals
• Asynchronous Programming in JavaScript (with Rx.js Observables)
• Advanced Asynchronous JavaScript

Electives

• Rethinking Asynchronous JavaScript
• Functional-Light JavaScript, v3

---