Frontend Resources [ALL OF THEM FREE]

📚 Other roadmaps or fonts of inspiration

Developer Roadmap

Roadmap to becoming a web developer in 2020. Frontend, Backend and DevOps.

Technology Radar

List of tools that you should learn, ordered by most important to least.

🌝 Guide to becoming a self-taught software developer

❗ Doing X in Y

The videos of “Doing X in Y seconds / minutes” are just to have a quick basic knowledge about what that technology is about.

🚀 Basic

• Clean code
• Clean code cheat sheet
• BEM in 6 minutes
• CSS BEM architecture
• Taking the BEM Naming Convention a Step Further
• More Transparent UI Code with Namespaces
• BEM naming convention tutorial
• You Probably Need BEM CSS in Your Life
• Naming Conventions From Uncle Bob's Clean Code Philosophy

💅 CSS

• CSS properties
• CSS Full Course - Includes Flexbox and CSS Grid Tutorials [1h 30m]
• Layout
  • Floats
  • Positioning
    • Learn CSS position in 9 minutes
  • Display
    • Understanding the CSS Display property
    • Usage of display property
    • Learn CSS Display Property in 4 minutes
  • Box Model
    • Learn box model in 8 minutes
  • CSS Grid
    • The joy of CSS Grid
    • CSS Grid Layout Crash Course
    • CSS Grid Tutorial | CSS Grid Crash Course
    • Learn CSS Grid in 20 minutes
    • Responsive Masonry layouts Using CSS Grid | CSS3 Grid 🔝
    • CSS Grid vs Flexbox
  • Flexbox
    • A complete guide to flexbox 🔝
    • Flexbox in 100 seconds
    • Learn flexbox in 15 minutes
    • Learn Flex-box layout in 15 minutes
    • Flexboxfroggy (game) 🔝
    • CSS Flexbox course
    • Flexy Box
    • Flexbox playground
  • Shadows
  • Styling radio buttons
  • Responsive and media queries
    • Using CSS media queries
• SASS / SCSS
  • SASS Basics
  • Learn Sass In 20 Minutes | Sass Crash Course
  • Advanced SCSS
• Practical exercices
  • Sticky Navigation Menu With Smooth Scrolling 🔝
    • Video
    • Demo
  • Making a calculator
• Frameworks
  • Bootstrap | CSS + JS (JQuery)
  • Bulma | CSS framework only
• Interesting YouTube channels
  • Praveen Bisht
  • Fireship

🎨 Mockups

• Figma
  • The no BS 2 Hour UI Design Course

📖 JSON

• Learn JSON in 10 minutes

🛠️ JavaScript

• Learn Javascript - Full Course for Beginners [3h]
• Async
  • JavaScript Promise in 100 seconds
  • Promises in 10 minutes
  • Async JS Crash Course - Callbacks, Promises, Async Await
  • JavaScript Async Await

📦 Redux

• Getting started with Redux
• 12 Things NOT To Do When Building React Apps With Redux

👑 React

• React Tutorial For Beginners
• React Code Splitting
  • Docs
  • Code Splitting with React and React Router v4
• 9 Tips for Building Awesome Reusable React Components
• 5 Recommended Tools for Optimizing Performance in ReactJS

📱 React Native

• React Native Tutorial for Beginners - Crash Course 2020
• Expo
  • Expo explained in 2 minutes
• Animations
  • React Native Animation Series
• Interesting YouTube channels
  • William Candillon
  • React Native UI Kit 🔝
• Fun
  • Creating games with React Native

TypeScript

• React Typescript Tutorial - Why and How (get started now!)
• React TypeScript: Basics and Best Practices

Testing libraries

• e2e
  • cypress 🔝
• unit
  • Jest

📁 Other fonts

• FreeCodeCamp 🔝