font-end-developer-learning-roadmap.md

前端开发学习路线

目录

• 计算机基础
  • 网络
  • 算法与编程
  • 浏览器工作原理
• 前端基础
  • HTML
  • CSS
  • Images
  • JavaScript
  • Client JavaScript

计算机基础

网络

HTTP

• 《图解HTTP》

抓包工具

• Inspect network activity

CORS

• HTTP Access Control (CORS)

Websockets

• MDN The WebSocket API (WebSockets)
• An Introduction to Websockets

参考：

• https://frontendmasters.com/guides/learning-roadmap/http/

算法与编程

基础数据结构与算法

• https://github.com/trekhleb/javascript-algorithms

编程

• Clean Code
• codewars

Object-Oriented Programming

• Object-oriented JavaScript for beginners

Asynchronous Programming

• Asynchronous JavaScript
• Asynchronous Programming
• Event loop: microtasks and macrotasks
• Microtasks vs Macrotasks in JavaScript. Deep dive into the Event Loop mechanism
• Using microtasks in JavaScript with queueMicrotask()
• In depth: Microtasks and the JavaScript runtime environment

浏览器工作原理

• How Browsers Work: Behind the scenes of modern web browsers

参考

• https://frontendmasters.com/guides/learning-roadmap/js-oop/
• https://frontendmasters.com/guides/learning-roadmap/js-async/
• https://frontendmasters.com/guides/learning-roadmap/js-fp/
• https://frontendmasters.com/guides/learning-roadmap/js-fp/

前端基础

HTML

• MDN: HTML

参考

• https://frontendmasters.com/guides/learning-roadmap/html/

CSS

• 《CSS权威指南》

参考

• https://frontendmasters.com/guides/learning-roadmap/css-fundamentals/
• https://frontendmasters.com/guides/learning-roadmap/css-fonts-and-icons/
• https://frontendmasters.com/guides/learning-roadmap/css-layout/
• https://frontendmasters.com/guides/learning-roadmap/css-media-queries/
• https://frontendmasters.com/guides/learning-roadmap/css-transitions-transforms-animations/
• https://frontendmasters.com/guides/learning-roadmap/css-practices/

Images

• https://frontendmasters.com/guides/learning-roadmap/web-images/

JavaScript

• 《JS权威指南》
• 《professional javascript for web developers 4th edition》

参考

• https://frontendmasters.com/guides/learning-roadmap/javascript-fundamentals/
• https://frontendmasters.com/guides/learning-roadmap/javascript-regular-expressions/
• https://frontendmasters.com/guides/learning-roadmap/javascript-modules-scripts/

Client JavaScript

• DOM, BOM, CSSOM
• JavaScript Web Platform APIs