从零到英雄：前端开发人员路线图

值得了解的事情

基础知识

中间的

先进的

总结

感谢阅读

面对如此众多的语言、框架和库，初学者常常会不知如何开启开发之旅。本文旨在揭开这一神秘面纱，并为您提供成为卓越前端开发人员的完美路线图。

让我们开始吧...

值得了解的事情

这些技能不是必需的，但它们肯定会对您的旅程有所帮助。

1. 互联网是如何运作的？
2. 什么是HTTP？
3. 浏览器如何工作？

基础知识

现在让我们从基础开始。

1. HTML
   HTML是前端 Web 开发的基础。我注意到，很多初学者都试图学习所有HTML标签。其实，你不需要了解所有标签，目前，只需了解以下内容即可：

   1. HTML文档结构
   2. 目前html，诸如head、、、、、、、、title等基本标签就足够body了form。inputph(1-6)

2. CSS
   一旦你学会了HTML，你就能创建一个网站，但它看起来肯定不够专业。现在是时候用CSS为它增添活力了。对于初学者来说，你可以只关注基础知识：

   1. 基本CSS 选择器选择元素是开始使用CSS 的
      垫脚石。
      

      html {}   /* tag selector */
      
      .class {} /* class selector */
      
      #id {}    /* id selector */
      

   2. 盒子模型
      CSS使用盒子模型来组织所有元素的不同部分。

      

   3. 定位和其他基本属性
      定位有助于定位元素，甚至将元素从网站流中移除。您还应该学习一些其他基本属性，例如color、background-color，当然还有构成盒子模型的属性。

3. JavaScript当然，您也
   希望您的网站具有交互性。JavaScript 就是您所需的工具。您目前需要了解的内容如下：

   1. 使用JavaScript进行基本编程
      JavaScript可能有点令人生畏（至少对我来说是这样），因为它具有异步特性。您需要了解代码的执行方式，因为与同步语言不同，首先出现的代码可能不会首先执行。
      

      // example
      setTimeout(() => console.log("EXECUTED LAST"), 0)
      console.log("EXECUTED FIRST")
      

   2. 创建和处置 事件监听器
      创建事件监听器允许您在事件发生时触发回调。
      

      function fn() {}
      
      // Creation
      element.addEventListener("<event-name>", fn)
      
      // Removal
      element.removeEventListener("<event-name>", fn)
      

   3. DOM 操作
      
      DOM 操作是 提升网站交互性的关键技能。配合事件监听器，DOM操作允许你在事件发生时修改网站的任何部分。

中间的

完成基础课程本身就是一项壮举。恭喜！你不再是初学者了。现在你已经掌握了学习中级内容所需的技能。

1. HTML
   我们不是刚刚在“基础知识”部分讲过这个吗？是也不是。我们只讲解了HTML的基础知识，其实还有更多高级内容可以帮助你进行开发。

   1. 语义HTML乍一看，你可能会觉得到处使用div是个好主意，但它会显著降低你在搜索引擎上的排名。你应该学习基本的语义标签：
      • section：该section标签用于将内容分组到不同的部分。
      • header：该header标签用于定义文档的标题
      • nav：该nav元素定义一组导航链接。
      • footer：就像header，footer标签用于定义文档的页脚
      • aside：该aside元素定义了除主要内容（放置在侧边栏中）之外的一些内容。
      • main：该main元素指定文档的主要内容

   2. Meta标签Meta
      标签允许您向您的网站注入附加信息：

      

2. CSS

   现在是时候学习更高级的CSS 了

   1. 媒体查询我们无法预知用户会使用什么设备访问您的网站。媒体查询允许您定义网站在任何设备上的显示效果。

   2. 更多CSS属性
      到现在为止，你应该能够理解一些更高级的属性了。 请查看variables、clip-path和text-ellipsis其他一些属性。

      您可以阅读本文以了解有关这些主题的更多信息

   3. 高级CSS 选择器
      CSS允许您高度精细地进行选择。如果您的网站嵌套很深，那么这个主题值得研究。例如，input[type=text].invalid只选择与无效text类关联的输入。

3. JavaScript

   现在是时候学习一个框架了
   

   你可能会不知所措，因为有太多框架可供选择。别担心，随便选一个就好。不过，我们推荐你使用React、Vue或Angular，因为它们很受欢迎。如果你遇到任何问题，都能在Stack Overflow上轻松找到解决方案。你需要学习的关键内容包括：
   - 框架基础知识（显而易见）
   -状态管理
   -路由

4. Git

   无论何时，在大型项目中维护应用程序的不同版本都是一项繁琐的任务。我们很幸运有这样的软件Git来帮我们解决这个问题。

   要了解Git你可以参考这篇文章

   

5. REST API

   当您处理任何实际应用程序时，您都需要来自其他服务器的数据，API提供端点以在您的应用程序和 Web 上托管的各种服务之间共享数据。

中级部分就这些了。呼！

但我们还有高级部分要讲🙃

先进的

现在我们已到达旅程的最后一段。

1. 渐进式网页应用

   PWA（渐进式 Web 应用程序）是具有附加功能的Web 应用程序，例如可安装（像任何本机应用程序一样）、缓存、后台同步等。

   有关PWA 的更多信息，请查看这篇文章。

2. GraphQL

   GraphQL是Facebook为需要大量请求的应用程序开发的REST API的替代方案。它通过在请求中明确提及所需的数据来减少请求数量。

   GraphQL通过REST API使用POST请求进行操作，因此对REST API的深入了解肯定会有所帮助。

3. 跨平台应用程序与 Web 技术

   随着Tauri和Electron.js等框架的出现，你现在可以轻松地将网站转换为跨平台应用程序。但这并非适合所有人，因为并非所有 Web 开发人员都对开发原生应用程序充满兴趣，但也有一些人对此着迷。

   目前，Electron.js已成为事实上的标准，并开发了一些大型应用程序，如WhatsApp Desktop和VS Code，但在我看来，Tauri（新手）很快就会超越Electron.js，因为它的优化程度更高。

   有关Electron.js的更多信息，请查看这篇文章。

总结

好了，这就是一份帮助你成为优秀前端开发者的路线图。希望它能在你的旅程中助你一臂之力，最终成为一名优秀的前端开发者:)

我是不是漏掉了什么？快在下面的评论区分享你的想法吧👇

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。