Awesome Frontend Masters Course Resources
Tags: tutorial, webdev, programming, productivity
Published: 2021-10-06 09:55:47

<h1 align="center">Awesome FrontendMasters Course Resources</h1>

<p align="center">
<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Badge"/>
<a href="https://github.com/AmnaAbd/awesome-frontendmasters"><img src="https://img.shields.io/static/v1?label=%F0%9F%8C%9F&message=If%20Useful&style=style=flat&color=BC4E99" alt="Star Badge"/>
</a>
<a href="https://github.com/AmnaAbd/awesome-frontendmasters/blob/main/LICENSE">
<img src="https://img.shields.io/github/license/AmnaAbd/awesome-frontendmasters" />
</a>
<br>
<i>A curated list of awesome frontendmasters course resources
</i>
<br>

<a href="https://www.buymeacoffee.com/AmnaAbd" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="20" width="100" style="border-radius:2px" />
</a>
</p>
<br>

| Resource | Repository | Instructor/Developer |
| ------ | ------ | ------ |
| [Introduction to Next.js](https://hendrixer.github.io/nextjs-course/) | [nextjs-course-app](https://github.com/Hendrixer/nextjs-course-app) | [Scott Moss](https://github.com/Hendrixer) |
| [JavaScript & TypeScript Monorepos](https://static.frontendmasters.com/resources/2020-10-15-js-typescript-monorepos/js-ts-monorepos.pdf) | [js-ts-monorepos](https://github.com/mike-north/js-ts-monorepos/) | [Mike North](https://github.com/mike-north) |
| [Introduction to Design Systems](https://fem-design-systems.netlify.app/intro) | [fem-design-systems](https://github.com/emmabostian/fem-design-systems) | [Emma Bostian](https://github.com/emmabostian) |
| [Getting The Front End Job](https://getting-the-front-end-job.surge.sh/) | [hot-to-get-front-end-job](https://github.com/jeromehardaway/hot-to-get-front-end-job) | [Jerome Hardaway](https://github.com/jeromehardaway) |
| [Building Web Apps with Vue and Nuxt](https://github.com/sdras/building-web-apps-with-vue#slides) | [building-web-apps-with-vue](https://github.com/sdras/building-web-apps-with-vue) | [Sarah Drasner](https://github.com/sdras) |
| [Introduction to Vue.js](https://github.com/sdras/intro-to-vue#slides) | [intro-to-vue](https://github.com/sdras/intro-to-vue) | [Sarah Drasner](https://github.com/sdras) |
| [Introduction to SVG and D3.js](https://observablehq.com/@sxywu/introduction-to-svg-and-d3-js) | [introduction-to-svg-and-d3-js](https://observablehq.com/@sxywu/introduction-to-svg-and-d3-js) | [Shirley Wu](https://github.com/sxywu) |
| [Serverless Functions](https://static.frontendmasters.com/resources/2020-07-22-serverless-functions/frontendmasters-serverless.pdf) | [frontendmasters-serverless](https://github.com/jlengstorf/frontendmasters-serverless) | [Jason Lengstorf](https://github.com/jlengstorf) |
| [Complete Intro to Linux and the CLI](https://btholt.github.io/complete-intro-to-linux-and-the-cli/) | [complete-intro-to-linux-and-the-cli](https://github.com/btholt/complete-intro-to-linux-and-the-cli) | [Brian Holt](https://github.com/btholt) |
| [State Management with Vuex](https://github.com/shortdiv/frontend-masters-vuex#slides) | [frontend-masters-vuex](https://github.com/shortdiv/frontend-masters-vuex) | [Divya](https://github.com/shortdiv) |
| [Introduction to Svelte](https://svelte-workshop.netlify.app/introduction/) | [svelte-workshop](https://github.com/Rich-Harris/svelte-workshop) | [Rich Harris](https://github.com/Rich-Harris) |
| [Angular 9 Fundamentals](https://static.frontendmasters.com/resources/2020-05-28-angular-9/angular-9-fundamentals.pdf) | [angular9-fundamentals-workshop](https://github.com/onehungrymind/angular9-fundamentals-workshop) | [One Hungry Mind](https://github.com/onehungrymind) |
| [JavaScript State Machines & XState](https://static.frontendmasters.com/resources/2020-05-14-state-machines-xstate/state-machine-xstate.pdf) | [frontend-masters-xstate-workshop](https://github.com/davidkpiano/frontend-masters-xstate-workshop) | [David Khourshid](https://github.com/davidkpiano) |
| [Complete FrontEnd Project: Project Fox Game](https://btholt.github.io/project-fox-game-site/) | [project-fox-game-site](https://github.com/btholt/project-fox-game-site) | [Brian Holt](https://github.com/btholt) |
| [React Native: Building mobile applications](https://kadikraman.github.io/react-native-v2/) | [react-native-v2](https://github.com/kadikraman/react-native-v2) | [Kadi Kraman](https://github.com/kadikraman) |
| [Creative Coding with WebGL & Shaders](https://static.frontendmasters.com/resources/2019-10-28-more-creative-coding/webgl-shaders.pdf) | [workshop-webgl-glsl](https://github.com/mattdesl/workshop-webgl-glsl) | [Matt DesLauriers](https://github.com/mattdesl) |
| [Go for JavaScript Developers](https://static.frontendmasters.com/resources/2019-09-24-golang/golang.pdf) | [fem-intro-to-go](https://github.com/martensonbj/fem-intro-to-go) | [Brenna](https://github.com/martensonbj) |
| [Functional Architecture Patterns: JavaScript](https://docs.google.com/presentation/d/1L5gxYQz2hyzbVJk5tkyNdDidf_cg4I1BlIGd_Y9jblU/edit#slide=id.g338d117be_040) | [Practically-Functional](https://github.com/DrBoolean/Practically-Functional) | [Brian Lonsdorf](https://github.com/DrBoolean) |
| [Functional Programming in JavaScript](https://docs.google.com/presentation/d/1nj5xmsHeJh-6RdjLs1190Hwl8smclvFLePqPCTVsrYw/edit#slide=id.g338d117be_040) | [Functional-Light-JS](https://github.com/DrBoolean/Functional-Light-JS) | [Brian Lonsdorf](https://github.com/DrBoolean) |
| [Practical Guide to Deep Learning with TensorFlow 2.0 and Keras](https://github.com/Vadikus/practicalDL) | [practicalDL](https://github.com/Vadikus/practicalDL) | [Vadim Karpusenko](https://github.com/Vadikus) |
| [Advanced GraphQL](https://docs.google.com/presentation/d/1DaTDx2Jdolkws2xPx44ee6WuQYMiIAyaaEmN-IBaW1s/edit#slide=id.p) | [advanced-gql-v2](https://github.com/FrontendMasters/advanced-gql-v2) | [Scott Moss](https://github.com/Hendrixer) |
| [Intro to JAMstack](https://jlengstorf.github.io/presentations/fem-jamstack-intro/#/) | [jamstack-intro](https://github.com/jlengstorf/jamstack-intro) | [Jason Lengstorf](https://github.com/jlengstorf) |
| [State Management in Pure React](https://speakerdeck.com/stevekinney/react-state) | [pure-react-state-management](https://github.com/FrontendMasters/pure-react-state-management) | [Steve Kinney](https://github.com/stevekinney) |
| [Interviewing for Frontend Engineers](https://docs.google.com/presentation/d/1-04cvp4xDLNb8YRWpkmPTEY_4r-56sM5J178lxjU4vA/edit#slide=id.p) | [frontend-interviewing](https://github.com/young/frontend-interviewing) | [Jem Young](https://github.com/young) |
| [Complete Intro to Containers](https://btholt.github.io/complete-intro-to-containers/) | [complete-intro-to-containers](https://github.com/btholt/complete-intro-to-containers) | [Brian Holt](https://github.com/btholt) |
| [JavaScript: Hard Parts](https://static.frontendmasters.com/resources/2019-09-18-javascript-hard-parts-v2/javascript-hard-parts-v2.pdf) | [js-hard-parts](https://github.com/StevanCakic/js-hard-parts) | [Will Sentance](https://github.com/WillSen) |
| [Intermediate Gatsby with Gatsby Themes](https://github.com/jlengstorf/gatsby-intermediate) | [gatsby-intermediate](https://github.com/jlengstorf/gatsby-intermediate) | [Jason Lengstorf](https://github.com/jlengstorf) |
| [Client-Side GraphQL in React](https://static.frontendmasters.com/resources/2019-10-14-full-stack-graphql/client-graphql-react.pdf) | [fullstack-graphql](https://github.com/FrontendMasters/fullstack-graphql) | [Scott Moss](https://github.com/Hendrixer) |
| [Server-Side GraphQL in Node.js](https://static.frontendmasters.com/resources/2019-10-14-full-stack-graphql/server-graphql-nodejs.pdf) | [fullstack-graphql](https://github.com/FrontendMasters/fullstack-graphql) | [Scott Moss](https://github.com/Hendrixer) |
| [Full Stack for Front-End Engineers](https://docs.google.com/presentation/d/1Mvf_rOFz1wZeH1irajJqhRQgzid7BkqJBd8wigpz39M/edit) | [Full-Stack-For-Frontend](https://github.com/young/Full-Stack-For-Frontend) | [Jem Young](https://github.com/young) |
| [HTML Email Development](https://static.frontendmasters.com/resources/2019-09-26-html-email-v2/html-email-v2.pdf) | [html-email-development](https://github.com/rodriguezcommaj/frontendmasters) | [Jason Rodriguez](https://github.com/rodriguezcommaj) |
| [Building Your Own Programming Language](https://static.frontendmasters.com/resources/2019-05-31-build-your-own-programming-language/programming-language.pdf) | [dropbear](https://github.com/stevekinney/dropbear) | [Steve Kinney](https://github.com/stevekinney) |
| [Visual Studio Code Can Do That?](https://burkeholland.gitbook.io/vs-code-can-do-that/) | [workshop-vs-code-can-do-that](https://github.com/burkeholland/workshop-vs-code-can-do-that) | [Burke Holland](https://github.com/burkeholland) |
| [Advanced CSS Layout](https://github.com/jen4web/fem-adv-css-layout) | [fem-adv-css-layout](https://github.com/jen4web/fem-adv-css-layout) | [Jen Kramer](https://github.com/jen4web) |
| [Accessibility in JavaScript Applications](https://marcysutton.github.io/js-a11y-workshop/slides/) | [js-a11y-workshop](https://github.com/marcysutton/js-a11y-workshop) | [Marcy Sutton](https://github.com/marcysutton) |
| [State Management: Redux and Mobx](https://static.frontendmasters.com/resources/2019-05-28-react-state/redux-mobx.pdf) | [redux-counter](https://github.com/stevekinney/redux-counter) | [Steve Kinney](https://github.com/stevekinney) |
| [Exploring Service Workers](https://github.com/FrontendMasters/service-workers-offline) | [service-workers-offline](https://github.com/FrontendMasters/service-workers-offline) | [Kyle Simpson](https://github.com/getify) |
| [Ember Octane Fundamentals](https://drive.google.com/file/d/1UGuP5Yhg-nZ5z_JFKhQCqHeLU_Yt_o3D/view) | [ember-octane](https://github.com/FrontendMasters/ember-octane) | [Mike North](https://github.com/mike-north) |
| [Getting started with JavaScript](https://static.frontendmasters.com/resources/2019-05-08-getting-into-javascript/getting-into-javascript.pdf) | [You-Dont-Know-JS](https://github.com/getify/You-Dont-Know-JS) | [Kyle Simpson](https://github.com/getify) |
| [Introduction to Gatsby](https://jlengstorf.github.io/presentations/workshop-gatsby-mdx-blog/#/) | [gatsby-intro](https://github.com/frontendmasters/gatsby-intro) | [Jason Lengstorf](https://github.com/jlengstorf) |
| [Intermediate React](https://btholt.github.io/complete-intro-to-react-v5/) | [complete-intro-to-react-v5](https://github.com/btholt/complete-intro-to-react-v5) | [Brian Holt](https://github.com/btholt) |
| [Hard Parts: Servers & Node.js](https://static.frontendmasters.com/resources/2019-04-24-servers-node-js/Hard-Parts-Servers-Node.pdf) | [fm-hard-parts-servers-nodejs](https://github.com/frankPairs/fm-hard-parts-servers-nodejs) | [Will Sentance](https://github.com/WillSen) |
| [Tree and Graph Data Structures](slides.com/bgando/intro-graph-trees) | [coding-interview-university](https://github.com/jwasham/coding-interview-university) | [Bianca](https://github.com/bgando) |
| [Intermediate Python](https://www.learnpython.dev/) | [python](https://github.com/nnja/python) | [Nina Zakharenko](https://github.com/nnja) |
| [Deep JavaScript Foundations](https://static.frontendmasters.com/resources/2019-03-07-deep-javascript-v2/deep-js-foundations-v2.pdf) | [You-Dont-Know-JS](https://github.com/getify/You-Dont-Know-JS) | [Kyle Simpson](https://github.com/getify) |
| [TypeScript Fundamentals](https://drive.google.com/file/d/170oHzpLNeprUa-TMmOAnSU4caEFDSb3e/view) | [typescript-fundamentals](https://github.com/mike-works/typescript-fundamentals) | [Mike North](https://github.com/mike-north) |
| [Firebase with React](https://github.com/stevekinney/think-piece) | [think-piece](https://github.com/stevekinney/think-piece) | [Steve Kinney](https://github.com/stevekinney) |
| [Electron Fundamentals](https://gist.github.com/stevekinney/7d9927ad0059322998f68914e172f32c) | [electron-in-action](https://github.com/electron-in-action) | [Steve Kinney](https://github.com/stevekinney) |
| [API design in Node.js with Express](https://slides.com/scotups/api-design-in-node-with-express-v3/) | [api-design-node-v3](https://github.com/FrontendMasters/api-design-node-v3) | [Scott Moss](https://github.com/Hendrixer) |
| [SVG Essentials & Animation](https://github.com/sdras/svg-workshop#slides) | [svg-workshop](https://github.com/sdras/svg-workshop) | [Sarah Drasner](https://github.com/sdras) |
| [Design For Developers](https://github.com/sdras/design-for-developers#slide-decks) | [design-for-developers](https://github.com/sdras/design-for-developers) | [Sarah Drasner](https://github.com/sdras) |
| [Reactive Angular with NgRx](https://github.com/onehungrymind/angular-reactive-workshop) | [angular-reactive-workshop](https://github.com/onehungrymind/angular-reactive-workshop) | [One Hungry Mind](https://github.com/onehungrymind) |
| [Angular Core](https://github.com/onehungrymind/angular-core-workshop#getting-started) | [angular-core-workshop](https://github.com/onehungrymind/angular-core-workshop) | [One Hungry Mind](https://github.com/onehungrymind) |
| [Creative Coding with Canvas & WebGL](https://static.frontendmasters.com/resources/2018-10-25-canvas-webgl/creative-coding.pdf) | [workshop-generative-art](https://github.com/mattdesl/workshop-generative-art) | [Matt DesLauriers](https://github.com/mattdesl) |
| [Introduction to MongoDB](https://github.com/FrontendMasters/intro-mongo-db) | [intro-mongo-db](https://github.com/FrontendMasters/intro-mongo-db) | [Scott Moss](https://github.com/Hendrixer) |
| [Introduction to Nodejs](https://github.com/FrontendMasters/intro-node-js) | [intro-node-js](https://github.com/FrontendMasters/intro-node-js) | [Scott Moss](https://github.com/Hendrixer) |
| [Advanced Elm](https://github.com/rtfeldman/elm-0.19-workshop/blob/master/README.md) | [elm-0.19-workshop](https://github.com/rtfeldman/elm-0.19-workshop) | [Richard Feldman](https://github.com/rtfeldman) |
| [AWS for Frontend Engineers](https://speakerdeck.com/stevekinney/aws-for-frontend-engineers) | [aws-for-frontend](https://gist.github.com/stevekinney/6ab02582829f039b6a14c973923909f8) | [Steve Kinney](https://github.com/stevekinney) |
| [Mastering ChromeDev Tools](https://github.com/jkup/mastering-chrome-devtools) | [mastering-chrome-devtools](https://github.com/jkup/mastering-chrome-devtools) | [Jon Kuperman](https://github.com/jkup) |
| [Building Custom Data Visualizations](https://slides.com/shirleywu/deck-10) | [custom-dataviz-example](https://github.com/sxywu/custom-dataviz-example) | [Shirley Wu](https://github.com/sxywu) |
| [Data Visualization for React Developers](https://slides.com/shirleywu/deck-11) | [react-d3-example](https://github.com/sxywu/react-d3-example) | [Shirley Wu](https://github.com/sxywu) |
| [Website Performance with Webpack](https://docs.google.com/presentation/d/1FW3GT9Ww1S6SEGu8HAO5eRZUFggfVuFE2ievNCDWVDo/edit#slide=id.g376e8d6b61_0_4) | [webpack-workshop-2018](https://github.com/thelarkinn/webpack-workshop-2018) | [Sean Larkin](https://github.com/TheLarkInn) |
| [Complete Intro to Web Development](https://btholt.github.io/intro-to-web-dev-v2/) | [intro-to-web-dev-v2](https://github.com/btholt/intro-to-web-dev-v2) | [Brian Holt](https://github.com/btholt) |
| [Serverless with AWS Lambda](https://github.com/FrontendMasters/serverless-with-aws) | [serverless-with-aws](https://github.com/FrontendMasters/serverless-with-aws) | [Scott Moss](https://github.com/Hendrixer) |
| [SQL Fundamentals](https://drive.google.com/file/d/17DckYclE6PJ2b42dMO-zVB_5WAk-bYYj/view) | [sql-fundamentals](https://github.com/mike-works/sql-fundamentals) | [Mike North](https://github.com/mike-north) |
| [Web Performance](https://speakerdeck.com/stevekinney/web-performance) | [web-performance](https://gist.github.com/stevekinney/fe401ffb8b2b7279e56dd165b272f0c3) | [Steve Kinney](https://github.com/stevekinney) |
| [4 Semesters of CS in 5 Hours](https://btholt.github.io/four-semesters-of-cs-part-two/) | [four-semesters-of-cs](https://github.com/btholt/four-semesters-of-cs) | [Brian Holt](https://github.com/btholt) |
| [Git in Depth](https://github.com/nnja/advanced-git) | [advanced-git](https://github.com/nnja/advanced-git) | [Nina Zakharenko](https://github.com/nnja) |
| [Web Security](https://drive.google.com/file/d/0B7LIdu29tPZRd1RWNWFYNjQxaWs/view) | [web-security-fundamentals](https://github.com/mike-works/web-security-fundamentals) | [Mike North](https://github.com/mike-north) |
| [JavaScript for Wordpress](https://github.com/zgordon/frontend-masters-jsforwp) | [frontend-masters-jsforwp](https://github.com/zgordon/frontend-masters-jsforwp) | [Zac Gordon](https://github.com/zgordon) |
| [PWA Fundamentals](https://drive.google.com/file/d/0B7LIdu29tPZRODE0SXpRMVVKYzA/view) | [pwa-fundamentals](https://github.com/mike-works/pwa-fundamentals) | [Mike North](https://github.com/mike-north) |
| [Modern SEO](https://drive.google.com/file/d/0B7LIdu29tPZRU3h2YVJNajlWNGc/view) | [modern-seo](https://github.com/mike-works/modern-seo) | [Mike North](https://github.com/mike-north) |
| [Sass Fundamentals](https://gist.github.com/1Marc/ccc99b341da3362a97dd9b3d06b67902) | [sass-workshop-setup](https://gist.github.com/1Marc/ccc99b341da3362a97dd9b3d06b67902) | [Marc Grabanski](https://gist.github.com/1Marc) |
| [ Robust APIs with the Hapi.js Server Framework for Node.js](https://docs.google.com/presentation/d/1EaaM8fGJqp9eUP3-E9Dpec3P5EqbM36PsoFD6z4r8pg/edit#slide=id.g35f391192_00) | [fem-instructors-app](https://github.com/chenkie/fem-instructors-app) | [Ryan Chenkie](https://github.com/chenkie) |
| [Creating an Open Source JavaScript Library on Github](https://slides.com/kentcdodds/write-oss) | [write-oss](https://slides.com/kentcdodds/write-oss) | [Kent C. Dodds](https://github.com/kentcdodds) |
| [Unit Testing with JavaScript](https://github.com/testdouble/real-world-testing/) | [real-world-testing](https://github.com/testdouble/real-world-testing/) | [Test Double](https://github.com/testdouble) |

<br>

### 🙇‍♂️ Vote of Thanks
A big shoutout to [FrontendMasters](https://github.com/FrontendMasters) for creating high quality professional courses.

### 🙏 Support
<p align="left">
<i>Loved the list? Please consider <a href="https://www.buymeacoffee.com/amnaabd">donating</a>  💸 to help it improve!</i>
</p>

<p align="left">
<a href="https://www.buymeacoffee.com/amnaabd"><img src="https://img.shields.io/badge/support-buymeacoffee-orange?logo=buymeacoffee&style=flat-square&label=Donate" alt="sponsor amnaabd"/>

<br/>
<h3 align="left">Connect with me:</h3>
<p box-align= "baseline">
<a href="https://discord.gg/HKxUV6jXPj">
  <img  alt="AmnaAbd's Discord" align="left" width="22px"  display="initial" margin="0" src="https://raw.githubusercontent.com/peterthehan/peterthehan/master/assets/discord.svg" />
</a>
<a href="https://twitter.com/AmnaAbd22">
  <img  alt="Amna Abdallah | Twitter" align="left" width="22px"  display="initial" margin="0" src="https://raw.githubusercontent.com/peterthehan/peterthehan/master/assets/twitter.svg" />
</a>
<a href="https://www.linkedin.com/in/amna-abdallah-2b615572/">
  <img  alt="AmnaAbd's LinkedIN" align="left" width="22px" display="initial" margin="0" src="https://raw.githubusercontent.com/peterthehan/peterthehan/master/assets/linkedin.svg" />
</a>
<a href="https://open.spotify.com/user/vzhpqhqmrep0yz70cxzpi45b5">
  <img align="left" alt="Amna's Spotify" align="left" width="22px" src="https://raw.githubusercontent.com/peterthehan/peterthehan/master/assets/spotify.svg" />
</a>
<a href="https://codepen.io/AmnaAbd" target="blank"><img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg" alt="amnaabd" align="left" height="30" width="40" display="initial" margin="0"/></a>
<a href="https://dev.to/amnaabd" target="blank"><img  src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg" alt="amnaabd" align="left" height="30" width="40" display="initial" margin="0"/></a>
<a href="https://instagram.com/amna.amouna.3114" target="blank"><img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg" alt="amnaabd" align="left" height="30" width="40" display="initial" margin="0"/></a>
</p>

</a>

<img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:1px" />
</p>