Web 前端开发之旅

学习路线

学习方法

• 带着目标学习
• practice, practice, practice
• 费曼学习法
• 《软件能》的“十步学习法”

入门

• 什么是前端
• 前端开发者所使用的技术
• 前端开发者是如何诞生的

1. 基础

• ⭐️ Visual Studio Code
  • 常用插件
• Chrome 浏览器
  • ⭐️ 调试工具 Chrome DevTools
• ⭐️ HTML
• ⭐️ CSS
• ⭐️ JavaScript 基础
• DOM
• HTTP
• 练习：写静态页面

2.进阶

• 练习：用原生 JS 写动态页面
• 后端：PHP/Java
• 数据库（MySQL）
• Ajax
• ES5, ES6
• Flux
• Redux

3.实战

• Coding style
• 工程化
  • 依赖管理
    • npm
    • yarn
  • 前端模块化
  • ⭐️ 前端构建工具
  • 编译工具
  • 单元测试
  • 自动化测试
  • 持续集成
  • nginx
• 框架/库
  • jQuery
  • Bootstrap
  • 三大框架
    • ⭐️ React
    • Vue
    • Angular
  • 其他
    • Mobx
    • saga
• CSS 预处理和框架
  • 预处理器：Sass
  • CSS-in-JS和Tailwind CSS
• ⭐️ TypeScript
• 现代前端架构
  • 单页应用（SPA）和多页应用（MPA）：了解何时使用SPA/MPA，了解服务端渲染（如Next.js或Nuxt.js）。
    • API通信：掌握RESTful API、GraphQL，以及如何使用Fetch或Axios与API通信。
• ⭐️ 移动端 web 开发
  • HTML5
  • CSS3
  • canvas
• 版本控制
• 性能优化
• 浏览器兼容问题

4.其他

• W3C、TC39 表针
• 浏览器内核、脚本引擎
• SEO
• NodeJS 开发
• 微信公众号开发
• React Native
• 小程序
• PWA

相关资源

学习指南

• MDN
• w3school
• freeCodeCamp（免费的互动练习和项目）
• Roadmap
  • front-end-handbook-2024
  • kamranahmedse/developer-roadmap
  • Front-end Development Roadmap | Code with Mosh
  • 前端技能汇总 Frontend Knowledge Structure
  • 零基础的前端开发初学者应如何系统地学习？
  • Web 前端怎样入门？

教程推荐

• 前端开发
  • Learn web development | MDN
  • 《Front-End Web Development(The Big Nerd Ranch Guide)》
• JavaScript
  • 廖雪峰的 JavaScript 教程
  • 阮一峰：ECMAScript 6 入门教程
  • 《JavaScript语言精粹》
  • 《JavaScript 高级程序设计》
  • 《深入理解ES6》
• DOM
  • 《JavaScript DOM编程艺术 （第2版）》
  • 《高性能 JavaScript》
• CSS
  • CSS | MDN
  • 《精通CSS（第2版）》
  • 《CSS设计指南》
  • 《CSS权威指南》
  • 《CSS3实用指南》

书籍

• 关于 JavaScript 的好书有哪些？
• 如果有人让你推荐前端技术书，请让他看这个列表：jobbole/awesome-web-dev-books