包含大量前端开发资源的终极路线图💥💥

您想要 PDF 格式的交互式路线图吗？

我已经为你准备好了一切。这是你最终需要的。
最好的资源和最好的路线图。如果你想知道如何开始前端开发，你绝对需要它。这篇文章涵盖了前端开发的方方面面。

很抱歉打扰您，但不要忘记使用令人惊叹的daily.dev扩展，这对于忙碌的开发人员来说很重要，因为它提供了最新的新闻和重要资源。

开始吧🙌

HTML

• 学习基本
• 表单和验证
• 可访问性
• SEO基础知识
• 惯例和最佳实践

（免费资源）

1. W3学校
2. 学习 HTML
3. 从零开始学习 HTML/CSS 的免费 UDEMY 课程
4. 从零开始学习 HTML 和 CSS - FreeCodeCamp
5. 2 小时掌握 HTML - FreeCodeCamp
6. 教程点 - HTML

Web 组件

• HTML模板
• 自定义元素
• 影子 DOM

（免费资源）

1. W3Css 模板
2. HTML5 升级
3. 使用 Shadow DOM
4. 使用自定义元素

版本控制系统

• git 的基本使用
  • 终端
  • GUI 客户端（SourceTree、Fork、GitKraken）
• 回购托管服务
  • Github
  • Bitbucket
  • GitLab

（免费资源）

1. GIT手册
2. GIT 备忘单（提供所有语言版本）
3. Github学习实验室
4. Bitbucket - 文档
5. GitLab - 文档
6. GitLab - 学习轨迹
7. GitHub 学习免费书籍
8. HTTP - 简介

CSS

• 学习基础知识
• 响应式设计和媒体查询
• 制作布局
  • 浮点数
  • 定位
  • 展示盒
  • 模型 CSS
  • 网格
  • 弹性框

CSS预处理器

• 萨斯
• PostCSS
• 较少的

CSS 架构

• 边界元法
• OOCS
• 斯玛特-麦克斯

CSS框架

• CSS First 框架
  • 引导程序
  • 物化 CSS
  • 布尔玛
• 基于JS的框架
  • 反应带
  • 材质 UI
  • Tailwind CSS
  • Chakra 用户界面

现代 CSS

• 样式化组件
• CSS 模块
• 样式化的 JSX
• 情感
• 镭
• 魅力四射

（CSS 免费资源）

1. W3Schools CSS
2. FreeCodeCamp - CSS 课程
3. CSS 简介 - 本系列将在一小时内教会您 CSS
4. Bulma - OpenBase 提供的教程
5. Scrimba - Bootstrap 4
6. 材质 CSS：文档
7. SoloLearn - CSS（以及所有主要语言）
8. CSS 备忘单
9. CSS 网格 - 备忘单
10. CSS Flexbox - 备忘单
11. Chakra 用户界面
12. SASS 教程
13. CSS-Tricks - 为您提供最佳理解的教程

JavaScript

• 语法和基本结构
• 学习 DOM 操作
• 学习 fetch API / Ajax (XHR)
• ES6+ 和模块化 Javascript
• 了解概念、提升、事件冒泡、范围、原型、影子 DOM、严格……

JS框架

• React.js
  • 鲁克斯
  • MobX
• Vue.js
  • VueX
• 角度
  • RxJS
  • 神经受体

类型检查器

• 打字稿
• 流动

渐进式 Web 应用 (PWA)

• 贮存
• Web套接字
• 服务人员
• 地点
• 通知
• 设备方向
• 付款
• 证书
• 加速移动页面 (AMP)

表现

• PRPL 模式
• RAIL 模型
• 表现
• 指标
• 使用灯塔
• 使用 DevTools

服务器端渲染（SSR）

• React.js
  • Next.js
  • After.js
• 角度
  • 普遍的
• Vue.js
  • Nuxt.js

（JS 资源）

1. 猫的 JS
2. 为期 30 天的编程挑战，你将使用原生 JavaScript 构建 30 件事物
3. Watch and Code 的优秀老师免费发布了他们的 JavaScript 入门课程。
4. 初学者的 JavaScript 练习
5. 一个简短的交互式网站，其中有向新程序员介绍 JavaScript 基本概念的练习。
6. Epic React 速成课程
7. React 文档
8. Vue.js - 最佳 NET NINJA 播放列表
9. Vue.js 速成课程
10. Angular - 文档
11. Github——更多学习资源
12. 使用 DevTools
13. 闭包是一种函数，即使在外部函数返回之后，它仍然可以访问其外部函数范围（为了更好地理解，请参阅博客内部的内容）。
14. 学习 PWAS
15. 使用 WEBPACK
16. Typerscript - 官方手册

阅读更多 ->为开发人员提供独特而酷炫的工具包

GraphQL

• 阿波罗
• 接力现代

静态站点生成器

• Next.js
• GatsbyJS
• Vuepress
• 杰基尔
• 雨果

移动应用程序

• 反应原生
• 原生脚本
• 扑
• 爱奥尼

桌面应用程序

• 电子
• 卡洛
• 质子原生

包管理器

• npm
• 纱

测试你的应用

• 笑话
• React 测试库
• 柏
• 酶

构建工具

• 代码检查器和格式化程序
  • Prettier
  • ESLint
  • 标准JS

模块捆绑器

• Webpack
• 汇总
• 包裹

网络安全知识

• HTTPS
• 跨域资源共享 (CORS)
• 内容安全政策
• OWASP安全风险

（资源 ）

1. GraphQL 的全栈教程
2. 使用 Next.js 和 React 构建静态和服务器端渲染应用程序的免费视频课程
3. Gatsby - 教程
4. 4小时《了不起的盖茨比》训练营
5. 15分钟学会WebPack
6. 学习 webpack - FreeCodeCamp 视频讲座
7. 代码检查和格式化
8. 学习标准 JS
9. 学习 - 包裹
10. Parcel——更简单的 webpack
11. 学习 HTTPS
12. CORS - 完整教程
13. NPM - 教程点
14. NodeFreeSchool
15. Yarn - 文档
16. 学习纱线
17. Jest - 文档
18. Electron 教程
19. React Native - 文档
20. Flutter - 文档
21. 超棒的 Flutter - 对于初学者来说可能有点难，但不妨看看“视频系列”版块、“博客”版块以及“模板”下的应用。一旦你开始 Flutter 之旅，你就会用到其他版块！
22. React Native - Github repo 资源

如果您还有什么要补充的，请在下面评论，😀

您想要 PDF 格式的交互式路线图吗？

如果是的话，那就订阅我的博客吧。我会通过电子邮件向您发送互动路线图，以及一些额外内容。

谢谢阅读。😎