> For the complete documentation index, see [llms.txt](https://learning-resource-path.gitbook.io/resources/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learning-resource-path.gitbook.io/resources/master.md).

# Learning Resource Roadmap - (Front-End Development)

✨This repo serves as a resource for developers to leverage on their journey into Front End Development.✨

 [![](https://img.shields.io/badge/Roadmap-2019-purple.svg)](https://github.com/lauragift21/Learning-Resource-Path-Front-End) [![](https://img.shields.io/badge/twitter-tweet-blue.svg)](https://twitter.com/intent/tweet?text=Learning%20Resource%20Roadmap%20for%20Front%20End%20Developers%20https%3A//github.com/devcenter-square/Learning-Resource-Path-Front-End) [![](https://img.shields.io/badge/feedback-@devcentersquare-green.svg)](https://www.devcenter.co/community)

This is a visual roadmap for beginners venturing into the World of Software Development. In order not to feel overwhelmed by how much you need to know to be a Front End Developer. This roadmap serves as a guide through out your journey. You can follow through this guide and be assured you are on the right path.

Resource types:\
🎮 - Interactive\
📚 - Book\
📹 - Video\
📝 - Article\
🎤 - Podcast\
👩‍💻 - Community\
💰 - Paid Resource\
🎁- Free Resource\
🏆 - Exercises

## Beginner Level Front End Development

### HTML

* [Codecademy](https://www.codecademy.com/learn/learn-html) 🎮 🎁
* [HTML Cheatsheet](https://digital.com/tools/html-cheatsheet/) 📝 🎁
* [Udacity](https://www.udacity.com/course/intro-to-html-and-css--ud001) 📹 🎁
* [HTML Best Practices](https://github.com/hail2u/html-best-practices) 📝 🎁
* [HTML Reference Guide](https://htmlreference.io/) 📝 🎁
* [MDN HTML Guide](https://developer.mozilla.org/en-US/docs/Learn/HTML) 📝 🎁
* [Marksheet.io](https://marksheet.io/html-basics.html) 📝 🎁
* [W3Schools HTML Guide](https://www.w3schools.com/html/) 📝 🎁
* [HTML.com](https://html.com/) 📝 🎁
* [HTMLDog - HTML Beginner](http://www.htmldog.com/guides/html/beginner/) 📝 🎁
* [FrontEnd Masters Bootcamp](https://frontendmasters.com/bootcamp/) 📹🎁
* [HTML5 Periodic Table](https://websitesetup.org/html5-periodical-table/) 📝🎁

### CSS

* [Learn CSS from CodeCademy](https://www.codecademy.com/learn/learn-css) 🎮 🎁
* [MDN CSS Guide](https://developer.mozilla.org/en-US/docs/Learn/CSS) 📝 🎁
* [CSS Reference](https://cssreference.io/) 📝 🎁
* [Learn Layout](http://learnlayout.com/) 📝 🎁
* [CSS Diner](http://flukeout.github.io/) 🎮 🎁
* [CSS Secrets By Lea Verou](https://www.amazon.com/CSS-Secrets-Solutions-Everyday-Problems/dp/1449372635/?&_encoding=UTF8\&tag=frontend-handbook-20\&linkCode=ur2\&linkId=40a9480c18839b4b2ea798aa2afafd0e\&camp=1789\&creative=9325) 📚 💰
* [30 Seconds of CSS](https://30-seconds.github.io/30-seconds-of-css/) 📝 🎁
* [CSS-in-Depth](https://frontendmasters.com/courses/css-in-depth-v2/) 📹 💰
* [W3Schools CSS Guide](https://www.w3schools.com/css/css_intro.asp) 📝 🎁
* [CSS Tutorial](https://www.csstutorial.net/css-intro/introductioncss-part1.php) 📝 🎁
* [Learn CSS in 5 minutes](https://medium.freecodecamp.org/get-started-with-css-in-5-minutes-e0804813fc3e) 📝 🎁
* [HTMLDog - CSS Beginner](http://www.htmldog.com/guides/css/beginner/) 📝 🎁
* [Visual guide to the most popular CSS properties](https://hackr.io/tutorial/visual-guide-to-the-most-popular-css-properties) 📝 🎁
* [FrontEnd Masters Bootcamp](https://frontendmasters.com/bootcamp/) 📹🎁

### 🏆 Exercises & Challenges to test out your knowledge on HTML and CSS 🏆

* [Make a customised birthday card](https://codeclubprojects.org/en-GB/webdev/happy-birthday/)
* [Tell a story with a webpage](https://codeclubprojects.org/en-GB/webdev/tell-a-story/)
* [Make a poster](https://codeclubprojects.org/en-GB/webdev/wanted/)
* [Create a webpage to display your favourite recipe](https://codeclubprojects.org/en-GB/webdev/recipe/)
* [Create a mystery letter](https://codeclubprojects.org/en-GB/webdev/mystery-letter/)
* [Create a webpage to showcase your projects](https://codeclubprojects.org/en-GB/webdev/project-showcase/)
* [Build a robot on a webpage](https://codeclubprojects.org/en-GB/webdev/build-a-robot/)
* [Create fun robot stickers](https://codeclubprojects.org/en-GB/webdev/stickers/)
* [Create an animated sunrise image](https://codeclubprojects.org/en-GB/webdev/sunrise/)
* [Create a web project with several linked rooms](https://codeclubprojects.org/en-GB/webdev/linked-rooms/)
* [Create a multi-page magazine website](https://codeclubprojects.org/en-GB/webdev/magazine/)
* [Create a pixel editor](https://codeclubprojects.org/en-GB/webdev/pixel-art/)
* [Build a simple website using HTML, CSS, and Javascript](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/?WT.mc_id=none-twitter-buhollan)

### JavaScript

* [JavaScript.info](https://javascript.info/) 📝 🎁
* [Eloquent JavaScript](https://eloquentjavascript.net/) 📚 🎁
* [Mozilla Developer Network - Learn JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript) 📝 🎁
* [Codecademy](https://www.codecademy.com/learn/learn-javascript) 🎮 🎁
* [You Don't Know JS - Up and Going](https://github.com/getify/You-Dont-Know-JS/tree/1st-ed/up%20%26%20going) 📚 🎁
* [MDN JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference) 📝 🎁
* [Array Explorer](https://sdras.github.io/array-explorer/) 🎮 🎁
* [Object Explorer](https://sdras.github.io/object-explorer/) 🎮 🎁
* [HTMLDog - JavaScript Beginner](http://www.htmldog.com/guides/javascript) 📝 🎁
* [JavaScript for Beginners - Udacity](https://www.udacity.com/course/intro-to-javascript--ud803) 📹 🎁

### GIT

* [Git basics](https://git-scm.com/videos) 📹 🎁
* [git - the simple guide](http://rogerdudler.github.io/git-guide/) 📝 🎁
* [Version Control with Git - Udacity](https://www.udacity.com/course/version-control-with-git--ud123) 📹 🎁
* [How to use Git and Github - Udacity](https://www.udacity.com/course/how-to-use-git-and-github--ud775) 📹 🎁
* [Github and Collaboration - Udacity](https://www.udacity.com/course/github-collaboration--ud456) 📹 🎁
* [Git Cheatsheet](https://gitsheet.wtf/) 📝 🎁
* [Git Interactive](https://www.katacoda.com/courses/git) 🎮 🎁
* [Pro Git Book](https://git-scm.com/book/en/v2) 📚 🎁
* [Git Branching](https://learngitbranching.js.org/) 🎮 🏆

## Mid Level Front End Development

### CSS

* [A Beginner’s Guide to CSS Grid by Kara Luton - freeCodeCamp](https://medium.freecodecamp.org/a-beginners-guide-to-css-grid-3889612c4b35) 📝 🎁
* [CSS Grid Layout — Simple Guide by Sergey Gavelyuk](https://codeburst.io/css-grid-layout-simple-guide-e0296cf14fe8) 📝 🎁
* [Learn CSS Grid by Per Harald Borgen - Scrimba](https://scrimba.com/g/gR8PTE) 📹 🎮 🎁
* [CSS Flexbox - W3Schools](https://www.w3schools.com/css/css3_flexbox.asp) 🎮 🎁
* [CSS Flexbox Tutorial - mmtuts](https://www.youtube.com/watch?v=0e02dl66PYo) 📹 🎁
* [Quick! What’s the Difference Between Flexbox and Grid?](https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/) 📝 🎁
* [Media Queries - MDN Web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) 📝 🎁
* [CSS3 Media Queries - TutorialRepublic](https://www.tutorialrepublic.com/css-tutorial/css3-media-queries.php) 📝 🎁
* [Logic in Media Queries by Chris Coyier - CSS-Tricks](https://css-tricks.com/logic-in-media-queries/) 📝 🎁
* [What is a CSS Preprocessor? - MDN](https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor) 📝 🎁
* [CSS Preprocessors by Shay Howe](https://learn.shayhowe.com/advanced-html-css/preprocessors/) 📝 🎁
* [An Introduction to CSS Pre-Processors: SASS, LESS and Stylus](https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus) 📝 🎁
* [What is Responsive Web Design? - W3Schools](https://www.w3schools.com/css/css_rwd_intro.asp) 📝 🎁
* [Responsive Web Design by Shay Howe](https://learn.shayhowe.com/advanced-html-css/responsive-web-design/) 📝 🎁
* [Responsive Web Design Tutorial and Explanation](https://youtu.be/BIz02qY5BRA) 📹 🎁
* [Responsive Web Design Principles - freeCodeCamp](https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles) 🎮 🎁
* [Responsive Web Design Fundamentals - Udacity](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893) 📹 🎁
* [FlexBox Froggy](https://flexboxfroggy.com/) 🎮 🎁
* [Grid Garden](https://cssgridgarden.com/) 🎮 🎁
* [How Flexbox works — explained with big, colorful, animated gifs](https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35) 📝 🎁
* [How to Organize Your CSS with a Modular Architecture (OOCSS, BEM, SMACS)](https://snipcart.com/blog/organize-css-modular-architecture) 📝 🎁
* [Understanding CSS Selectors](https://medium.com/backticks-tildes/understanding-css-selectors-26fe2ea19132) 📝 🎁
* [BEM: A New Front-End Methodology](https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/) 📝 🎁
* [BEM - Full Introduction to the BEM Methodology](https://www.toptal.com/css/introduction-to-bem-methodology) 📝
* [CSS Mega Cheat Sheet](https://makeawebsitehub.com/css3-mega-cheat-sheet/) 📝🎁

### JavaScript

* [10 Things A Serious JavaScript Developer Should Learn](https://benmccormick.org/2017/07/19/ten-things-javascript/) 📝 🎁
* [Exploring ES6](http://exploringjs.com/es6.html) 📚 🎁
* [Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/) 📚 🎁
* [Robust JavaScript](https://molily.de/robust-javascript/) 📚 🎁
* [You Don't Know JS - Types and Grammer](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/types-grammar/README.md) 📚 🎁
* [You Don't Know JS - Scope and Closures](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md) 📚 🎁
* [You Don't Know JS - ES.Next and beyond](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/es-next-beyond/README.md) 📚 🎁
* [The beginning of an adventure: 13 Weeks of JavaScript ](https://medium.com/@___aerox___/the-beginning-of-an-adventure-13-weeks-of-javascript-78107605d533) 📝 🎁
* [JavaScript: Template Literals & Tag Functions for Beginners](https://codeburst.io/javascript-template-literals-tag-functions-for-beginners-758a041160e1) 📝 🎁
* [JavaScript & The spread operator](https://codeburst.io/javascript-the-spread-operator-a867a71668ca) 📝 🎁
* [Libraries vs Frameworks](https://medium.com/datafire-io/libraries-vs-frameworks-626cdde799a7) 📝 🎁
* [Single-Page Applications (and how they work)](https://blog.pshrmn.com/entry/how-single-page-applications-work/) 📝 🎁
* [Regular Expressions Demystified: RegEx isn’t as hard as it looks](https://medium.freecodecamp.org/regular-expressions-demystified-regex-isnt-as-hard-as-it-looks-617b55cf787) 📝 🎁
* [An Introduction to Regular Expressions (Regex) In JavaScript](https://codeburst.io/an-introduction-to-regular-expressions-regex-in-javascript-1d3559e7ac9a) 📝 🎁
* [Commenting JavaScript code with JSDoc](https://www.eventbrite.com/engineering/commenting-javascript-code-with-jsdoc/) 📝 🎁
* [Introduction to Functional Programming in JavaScript](https://medium.com/the-andela-way/introduction-to-functional-programming-in-javascript-1e7118545618) 📝 🎁
* [Functional Programming and Function Chaining in JavaScript](https://medium.com/@gertienyesh/functional-programming-and-function-chaining-in-javascript-76628d3cf1f5) 📝 🎁

### React

* [Official React Documentation](https://facebook.github.io/react/docs/hello-world.html) 📝 🎁
* [React Resources](https://reactresources.com/) 📝 🎁
* [React 101 - Codecademy](https://www.codecademy.com/learn/react-101) 🎮 🎁
* [The Beginner Guide to ReactJS](https://egghead.io/courses/the-beginner-s-guide-to-reactjs) 📹 💰
* [React Bootcamp](https://tylermcginnis.com/free-react-bootcamp/) 📹 🎁
* [Road to Learn React](https://www.robinwieruch.de/the-road-to-learn-react/) 📚 💰
* [React Quickly](https://www.manning.com/books/react-quickly) 📚 🎁
* [React Podcast](https://changelog.com/reactpodcast) 🎤 🎁
* [React for Beginners](https://reactforbeginners.com/) 📹 💰
* [Leigh Halliday Blog](https://www.leighhalliday.com/) 📝 🎁

### Vue

* [Vue Official Documentation](https://vuejs.org/v2/guide/) 📝 🎁
* [Learn Vue 2: Step By Step](https://laracasts.com/series/learn-vue-2-step-by-step) 📹 🎁
* [Vue Cookbook](https://vuejs.org/v2/cookbook/) 📝 🎁
* [Vue Mastery](https://www.vuemastery.com/) 📹 💰
* [Awesome Vue](https://github.com/vuejs/awesome-vue) 📝 🎁
* [Egghead Vue Courses](https://egghead.io/browse/frameworks/vue) 📹 💰
* [Vue Developers Blog & Courses](https://vuejsdevelopers.com/) 📝 📹 🎁 💰
* [Fullstack Vue ](https://www.fullstack.io/vue) 📹 💰
* [THE VUE.JS COURSE](https://vuecourse.com/preview/) 📝 🎁

### Angular

* [Angular Tutorial](https://egghead.io/browse/frameworks/angular) 📹 💰
* [Angular - An Overview](https://medium.com/@mlbors/an-overview-of-angular-3ccd2950648e) 📝 🎁
* [Angular - Official Home Page](https://angular.io/) 📝 🎁
* [Angular: Getting Started (Deborah Kurata - Pluralsight)](https://www.pluralsight.com/courses/angular-2-getting-started-update) 📹 💰
* [Angular CLI (John Papa - Pluralsight)](https://www.pluralsight.com/courses/angular-cli) 📹 💰
* [Build your first Angular app (Dan Wahlin - Scrimba)](https://scrimba.com/g/gyourfirstangularapp) 📹 🎮 🎁
* [Angular - The Complete Guide (Maximilian Schwarzmüller - Udemy)](https://www.udemy.com/the-complete-guide-to-angular-2/) 📹 💰
* [Using Animations with Angular](https://medium.freecodecamp.org/how-to-use-animation-with-angular-6-675b19bc3496) 📝 🎁

### Testing

* [Testing JavaScript on Udacity](https://www.udacity.com/course/javascript-testing--ud549) 📹 🎁
* [Testing Clientside JavaScript](https://app.pluralsight.com/library/courses/testing-javascript/table-of-contents?aid=7010a000002LUv2AAG) 📹 💰
* [Testing with Jest: from zero to hero](https://blog.logrocket.com/testing-with-jest-from-zero-to-hero-85ce0e9cc953) 📝 🎁
* [Learn Javascript Unit Testing With Mocha, Chai and Sinon](https://www.udemy.com/learn-javascript-unit-testing-with-mocha-chai-and-sinon/) 📹 💰

### 🏆 Exercises & Challenges to test out your knowledge on JavaScript 🏆

* [Bin2Dec](https://github.com/florinpop17/app-ideas/blob/master/Projects/Bin2Dec-App.md)
* [TrueOrFalse](https://github.com/florinpop17/app-ideas/blob/master/Projects/True-or-False-App.md)
* [Color Cycle](https://github.com/florinpop17/app-ideas/blob/master/Projects/Color-Cycle-App.md)
* [Flip Image](https://github.com/florinpop17/app-ideas/blob/master/Projects/Flip-Image-App.md)
* [Lorem Ipsum generator](https://github.com/florinpop17/app-ideas/blob/master/Projects/Lorem-Ipsum-Generator.md)
* [Notes App](https://github.com/florinpop17/app-ideas/blob/master/Projects/Notes-App.md)
* [Slider Design](https://github.com/florinpop17/app-ideas/blob/master/Projects/Slider-Design.md)
* [Pomodoro Clock](https://github.com/florinpop17/app-ideas/blob/master/Projects/Pomodoro-Clock.md)
* [Cause-Effect](https://github.com/florinpop17/app-ideas/blob/master/Projects/Cause-Effect-App.md)
* [Christmas Lights](https://github.com/florinpop17/app-ideas/blob/master/Projects/Christmas-Lights-App.md)
* [Windchill](https://github.com/florinpop17/app-ideas/blob/master/Projects/Windchill-App.md)
* [Book Finder App](https://github.com/florinpop17/app-ideas/blob/master/Projects/Book-Finder-App.md)
* [Flash Cards](https://github.com/florinpop17/app-ideas/blob/master/Projects/FlashCards-App.md)
* [Markdown Previewer](https://github.com/florinpop17/app-ideas/blob/master/Projects/Markdown-Previewer.md)
* [Markdown Table Generator](https://github.com/florinpop17/app-ideas/blob/master/Projects/Markdown-Table-Generator.md)
* [String Art](https://github.com/florinpop17/app-ideas/blob/master/Projects/String-Art.md)
* [Timezone Slackbot - TZ](https://github.com/florinpop17/app-ideas/blob/master/Projects/Timezone-Slackbot.md)
* [To-Do App](https://github.com/florinpop17/app-ideas/blob/master/Projects/To-Do-App.md)
* [GitHub Timeline](https://github.com/florinpop17/app-ideas/blob/master/Projects/GitHub-Timeline-App.md)
* [Kudo's Slackbot](https://github.com/florinpop17/app-ideas/blob/master/Projects/Kudos-Slackbot.md)
* [Slack Archiver](https://github.com/florinpop17/app-ideas/blob/master/Projects/Slack-Archiver.md)
* [Spell-It](https://github.com/florinpop17/app-ideas/blob/master/Projects/SpellIt-App.md)
* [Build a simple calculator](https://zellwk.com/blog/calculator-part-1/)
* [Make an Image slider](http://rafbm.github.io/howtomakeaslider/)
* [Make a pop-up penguin game](https://googlecreativelab.github.io/coder-projects/projects/pop_up_penguins/)
* [Make your own modrian](https://googlecreativelab.github.io/coder-projects/projects/mondrian/)
* [Night and Day switcher](https://googlecreativelab.github.io/coder-projects/projects/night_and_day/)
* [Music Boxes](https://googlecreativelab.github.io/coder-projects/projects/music_boxes/)
* [Two Puppy](https://googlecreativelab.github.io/coder-projects/projects/two_puppy/)
* [Create a Game: Breakout](https://billmill.org/static/canvastutorial/index.html)

### Web Animations

* [A Detailed Guide to CSS Animations and Transitions](https://medium.com/engineerbabu/a-detailed-guide-to-css-animations-and-transitions-b544502c089c?ref=devawesome) 📝 🎁

### Developer Tools

* [A Brief Introduction to Chrome Dev Tools](https://developers.google.com/web/tools/chrome-devtools/) 📝 🎁
* [Get Started with Debugging JavaScript in Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/javascript/) 📝 🎁
* [Debugging in Chrome](https://javascript.info/debugging-chrome) 📝 🎁

### Web Fonts

* [Quick to web fonts via @font-face](https://www.html5rocks.com/en/tutorials/webfonts/quick/)📝 🎁
* [A beginner's Guide to Choosing Web Fonts - Google](https://design.google/library/choosing-web-fonts-beginners-guide/) 📝 🎁
* [Understanding Web Fonts and Getting the Most Out of Them - CSS-Tricks](https://css-tricks.com/understanding-web-fonts-getting/) 📝 🎁
* [Get Started with the Google Fonts API](https://developers.google.com/fonts/docs/getting_started) 📝 🎁

### UI/UX Design

* [Learn UX](https://learnux.io) 📝 🎁
* [Design for Non-Designers](https://www.youtube.com/watch?v=ZbrzdMaumNk\&feature=youtu.be) 📹 🎁

## Advanced Level Front End Development

### Web Security

* [The Basics of Web Application Security](https://martinfowler.com/articles/web-security-basics.html) 📝 🎁
* [Web Security Basics](https://www.beyondsecurity.com/blog/web-security-basics) 📝 🎁
* [A Quick Introduction to Web Security](https://medium.freecodecamp.org/a-quick-introduction-to-web-security-f90beaf4dd41) 📝 🎁
* [Web Security on FrontEndMasters](https://frontendmasters.com/courses/web-security/) 📹 🎁
* [Browser Security Handbook](https://code.google.com/archive/p/browsersec/wikis/Main.wiki) 📝 🎁
* [Frontend Security](https://mikewest.org/2013/09/frontend-security-frontendconf-2013) 📹 🎁
* [HTTP Security Best Practice](https://httpsecurityreport.com/best_practice.html) 📝 🎁

### Data Mangement (GraphQL, Rest)

* [REST API Concepts and Examples](https://youtu.be/7YcW25PHnAA) 📹 🎁

### Serverless Architecture

* [Serverless Architecture Explained](https://www.youtube.com/watch?v=RzsaM6kL1FU) 📹 🎁

### Computer Science

* [Computer Science for All](https://www.cs.hmc.edu/csforall/) 📝 🎁

### State Management

* [Advanced State Management in React (feat. Redux and MobX)](https://frontendmasters.com/courses/react-state/) 📹 💰
* [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux) 📹 💰
* [Manage Application State with Mobx-state-tree](https://egghead.io/courses/manage-application-state-with-mobx-state-tree) 📹
* [Building React Applications with Idiomatic Redux](https://egghead.io/courses/building-react-applications-with-idiomatic-redux) 📹 💰
* [React js tutorial - How Redux Works](https://www.youtube.com/watch?v=1w-oQ-i1XB8\&list=PLoYCgNOIyGADILc3iUJzygCqC8Tt3bRXt) 📹 🎁
* [A Complete React Redux Tutorial for Beginners (2019)](https://daveceddia.com/redux-tutorial/) 📝 📹 🎁

### Web Typography

* [Quick guide to webfonts via @font-face](https://www.html5rocks.com/en/tutorials/webfonts/quick/) 📝 🎁
* [A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES](https://www.zachleat.com/web/comprehensive-webfonts/) 📝 🎁
* [Web fonts](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts) 📝 🎁
* [Responsive Typography](https://frontendmasters.com/courses/responsive-typography/) 📹 🎁

### Responsive and Mobile Design

* [Responsive Web Design Fundamentals](https://www.udacity.com/course/responsive-web-design-fundamentals--ud893) 📹 🎁
* [CSS Grids and Flexbox for Responsive Web Design](https://frontendmasters.com/courses/css-grids-flexbox/) 📹 💰
* [Responsive Web Design Podcast](https://responsivewebdesign.com/podcast/) 🎤 🎁

### Progressive Web App

* [Progressive Web App - Google](https://developers.google.com/web/progressive-web-apps/) 📝 🎁
* [Intro to Progressive Web Apps](https://www.udacity.com/course/intro-to-progressive-web-apps--ud811) 📹 🎁
* [Progressive Web Applications and Offline](https://frontendmasters.com/courses/progressive-web-apps/) 📹 💰
* [A Beginner's Guide To Progressive Web Apps](https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/) 📝 🎁
* [MDN - Progressive Web App Guide](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) 📝 🎁
* [4 important points to know about Progressive Web Apps (PWA)](https://medium.com/@deepusnath/4-points-to-keep-in-mind-before-introducing-progressive-web-apps-pwa-to-your-team-8dc66bcf6011) 📝 🎁
* [Your First PWA](https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/) 📝 🎁

### Web Performance

* [Website Performance Optimization](https://www.udacity.com/course/website-performance-optimization--ud884) 📹 🎁
* [Perf.rocks](https://perf.rocks/) 📝 🎁
* [High Performance Web Sites: Essential Knowledge for Front-End Engineers](https://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309/?&_encoding=UTF8\&tag=frontend-handbook-20\&linkCode=ur2\&linkId=e93ab3ea06b7e3e93ee0d868249d0e3f\&camp=1789\&creative=9325) 📚 💰
* [JavaScript Performance](https://frontendmasters.com/courses/web-performance/) 📹 💰

### Web Accessibility

* [Getting Started: Intro to Accessibility Concepts & Tools](http://wps.pearsoned.com/accessibility/207/53073/13586831.cw/index.html) 📝 🎁
* [Accessible to all](https://web.dev/accessible) 📝 🎁
* [Accessiblity.dev](https://accessibility.dev/)📝 🎁
* [Accessibility Guide](https://webaccessibility.guide/) 📝 🎁
* [Accessiblity Insights](https://accessibilityinsights.io/en/)📝 🎁
* [Web Accessibility - Google](https://developers.google.com/web/fundamentals/accessibility/) 📝 🎁
* [Web Accessibility Course by Google and Udacity](https://www.udacity.com/course/web-accessibility--ud891) 📹 🎁
* [Writing JavaScript with accessibility in mind](https://medium.com/@matuzo/writing-javascript-with-accessibility-in-mind-a1f6a5f467b9) 📝 🎁
* [WCAG Docs](https://www.w3.org/TR/WCAG21/)📝 🎁