The Ultimate Essential Roadmap To Become a Frontend Developer

frontend-roadmap.md

The Ultimate Essential Roadmap To Become a Frontend Developer

Content Creators

• Net Ninja (Small Episodic Tutorials)
• Traversy Media (Relatively Long Crash Courses)
• Programming with Mosh (Well Explained Crash Courses)
• Web Dev Simplified (Tips and Tricks)
• Kevin Powell (CSS)
• DesignCourse (UI/UX and Trends)
• Juxtopposed (Design)
• Matt Pocock (TypeScript)
• Hyperplexed (Fun Mini Projects)
• Chrome for Developers (News and Updates)

Reading Materials

• JavaScript Info (Beginner to Advanced Tutorials)
• web.dev (Google's Standard Guides)
• Dev Community (Articles and Mini Tutorials)

References

• MDN (Specs, Docs and Guidelines)
• W3Schools (Comprehensive Tutorials)
• HTTP Status Codes

Tools

• Can I Use
• Clippy
• CSS Triggers
• KeyCode
• JSON Placeholder
• Lorem Picsum
• gitignore.io
• Lighthouse
• PageSpeed Insights

Resources

• Google Fonts
• Icones

JavaScript as a Programming Language

• Fundamentals of Programming in JavaScript
  • Net Ninja: Modern JavaScript Tutorial
  • Variables and Data Types
  • Arithmetic Operations
  • String Manipulation
  • Conditions (if/else, switch, ternary, ...)
  • Loops (while, for, for of, for in, ...)
  • Arrays
  • Objects
  • Functions
• Object-oriented Programming (class, interface, ...)
  • Net Ninja: Object Oriented JavaScript
• ES6 Standard
  • Programming with Mosh: ES6 Tutorial: Learn Modern JavaScript in 1 Hour
• Map and Set
• Node.js Runtime (NOT Backend Development)
• npm

Developing Static Pages

• HTML

  • Traversy Media: HTML Crash Course For Absolute Beginners
  • General Structure (html, head, body, ...)
  • Attributes Introduction
  • Basic Tags (h1...h6, p, ul/ol/li, a, img, video, audio, ...)
  • Form-related Tags (form, label, input, textarea, button, ...)
  • Semantic Tags (main, header, footer, article, section, ...)
  • Tables

• CSS

  • Traversy Media: CSS Crash Course For Absolute Beginners
  • Selectors
    • CSS Diner
  • Color Values (hex, rgb, hsl, ...)
  • Background Properties
  • Typography Properties (font-family, font-size, line-height, ...)
  • Units (px, %, em, rem, ch, ...)
  • Box Model (margin, padding, border, ...)
  • Dimension Properties (width, height, aspect-ration, ...)
  • Flexbox
    • CSS Tricks: A Complete Guide to Flexbox
    • Flexbox Froggy
  • Grid
    • CSS Tricks: A Complete Guide to CSS Grid
    • Grid Garden
  • Specificity
  • Pseudo Classes (:hover, :focus, :focus-within, :focus-visible, ...)
  • Pseudo Elements (::before, ::after, ...)
  • Logical Properties (block, inline, start, end, ...)
  • Custom Properties (--my-property, ...)

JavaScript for Web

• DOM Manipulation
  • Web Dev Simplified: Learn DOM Manipulation In 18 Minutes
• DOM Traversal
  • Web Dev Simplified: Learn JavaScript DOM Traversal In 15 Minutes
• Events
  • Web Dev Simplified: Learn JavaScript Event Listeners In 18 Minutes
• Custom Attributes (data-*)

Advanced HTML and CSS

• Advanced HTML

  • Details
  • Modal/Dialog
  • Accessibility (a11y)

• Advanced CSS

  • Transforms
  • Transitions
  • Animations
  • Fitlers
  • Responsive
    • Kevin Powell: A practical guide to responsive web design
  • Positions
    • Kevin Powell: CSS position deep dive
  • Clip Path

Advanced JavaScript

• Asynchronous Programming (promise, async/await, ...)
  • Traversy Media: Async JS Crash Course - Callbacks, Promises, Async Await
  • Net Ninja: Asynchronous JavaScript (2020 version)
• API Connection (RESTful, HTTP, fetch, ...)
  • Web Dev Simplified: Learn Fetch API In 6 Minutes
• Storages (Cookies, Sessions, LocalStorage)
• Syntactic Sugars (Spread Operator, Null Coalescing Operator, ...)
• WEB APIs (Animaton API, Intersection Observer, Intl, ...)
• Internationalization (i18n)

Version Control

• Git and GitHub
  • Net Ninja: Git & GitHub Tutorial for Beginners

Basic Deployment

• GitHub Pages

Reinforcement

• 50 Projects In 50 Days
• Frontend Mentor
• Frontend Practice
• iCodeThis
• CSSBattle

Quality of Life

• Emmet
  • Kevin Powell: Use Emmet to up your HTML game
  • Kevin Powell: You can use Emmet with CSS!

JavaScript Under The Hood

• Traversy Media: JavaScript: Under The Hood
• Event Loop
• Microtasks and Macrotasks
• Call Stack
• Heap
• Lexical Environment
• Closure

TypeScript

• Net Ninja: TypeScript Crash Course
• Typing System
• Generics
• Configs
• Type Utilities

Linting

• ESLint
• Prettier
• Stylelint

Clean Code

• Conventions
• Best Practices
• SOLID Principles
• Refactoring Techniques
• Design Patterns

SASS (Optional)

• Nesting
• Variables
• Math
• Conditions
• Loops
• Mixins
• Functions

UI/UX Principles

• Colors
• Contrast
• Alignment
• Typography
• Visual Hierarchy
• Whitespace
• Accessibility

CI/CD

• GitHub Actions
• GitHub Workflows

React

• JSX
• Lifecycle
• Components
• States
• Hooks
• Routing
• State Management Libraries (Redux, Zustand, ...)

Backend Development

• Node.js and Express.js
• Database (MySQL, PostgreSQL, SQLite, ...)

Next.js

• CSR vs SSR vs SSG vs ISR
• Routing
• Caching

DevOps

• Nginx
  • How To Set Up Nginx Server Blocks
• Docker
• GitHub Self-hosted Runners

Super Advanced Web Development

• HTTP 203