6 个月内成为前端开发人员的 4 项技能(路线图)

2025-05-24

6 个月内成为前端开发人员的 4 项技能(路线图)

让我给你一个简单的🚦路线图,让你知道你在哪里,以及下一步应该去哪里

🔑关键概念

每个网站都有两部分。前端后端

前端是您在浏览器中看到并与之交互部分。所有视觉方面

后端是前端提供动力的部分。它位于幕后,主要负责存储数据和数据库并将其提供给前端

🌐工作

因此,Web 开发工作可分为三类。

  • 前端开发
  • 后端开发
  • 和全栈开发(涉及前端和后端开发

👨‍💻前端开发

前端开发人员使用HTML、CSSJavaScript来构建前端。那么,我们来谈谈HTMLCSSJavaScript
路线图图片由 shahan ahmed 提供

HTML是超文本标记语言的缩写。我们使用 HTML 来定义网页的构成要素。

CSS是层叠样式表的缩写,我们使用 CSS 来设计网页样式,使其变得美观。

JavaScript用于向网页添加功能。

🔻这是一个真实的例子

假设我们要构建一个类似Instagram 的应用程序。对于每篇帖子,我们应该有一个这样的布局👇。

Instagram 图片.png

因此,首先我们使用HTML来定义此布局的所有构建块。

这些构建块是什么?

一张图片、一些文本或用户名、另一块包含消息的文本,以及一些用于点赞、评论分享的图标。

HTML 和 CSS

我们使用HTML将这些构建块添加到我们的网页中。然后我们使用CSS赋予它视觉效果。

例如,我们使用CSS使字体加粗。我们可以将图像变成圆形,可以添加一些填充,可以更改图标的颜色并定义鼠标悬停在图标上时的外观。

所以,CSS 的核心在于静态元素或视觉效果。使用CSS,我们也可以创建精美的动画。

JavaScript

如今,大多数网页都是交互式的。它们会响应我们的点击和滚动等操作。这时JavaScript就派上用场了。使用 JavaScript,我们可以为网页添加功能或行为。例如,我们可以为某篇文章点赞。

所以JavaScript是一种编程语言,而HTMLCSS不是。也就是说,我们不能用它们来告诉计算机该做什么。我们用它们来定义网页的构成要素并设置其样式。

您在互联网上看到的每个网页都是用这三种语言构建的。

因此您学习和理解这些语言及其特性越好,您在前端开发方面就越优秀

🚦6个月内成为前端开发人员


因此,您的前端开发之旅从HTMLCSS开始。

我想说如果你每天花 3-5 个小时 学习和编码,你应该能够在大约一个半月的时间内对这两种语言有合理的理解。

一旦你学习了这些语言,那么你就需要学习JavaScript

我想说学习 JavaScript 可能还需要花费你六周(1.5 个月)的时间。

当然,你不可能在短短六周内就成为JavaScript 专家。但你会对它有相当的理解,并且在参与不同的项目过程中会学到更多。

因此,前三个月都是关于基本面的事情。

🛠框架

现在,网站建设通常包含一系列重复性任务。这时前端框架就派上用场了。

框架或库附带大量代码,您可以在我们的网站中重复使用。

所以,它们帮助我们更快地完成工作。这就是为什么现在很多公司都使用React、AngularVue等流行框架的原因。

现在,您无需学习所有这些即可开始。不同的公司针对不同的项目使用不同的工具。当您从一个项目转到另一个项目时,您可能需要了解其他工具。

⚛React

如果你是初学者,那就专注于React吧。因为它是这个领域最流行的工具。一旦你学会了 React,你就可以根据需要学习其他工具。

对于React来说你可能需要一到两个月的时间

💫版本控制系统

好的,下一步是什么?

版本控制系统。我们使用版本控制系统来追踪项目历史,并与他人协作。

📌Git

市面上有很多版本控制系统,例如Git、Subversion、Mercurial等等。但Git这个领域最流行的 工具,超过 70% 的软件开发团队都在使用它。这就是为什么你几乎在所有职位描述中都能看到它。

你可能还需要两周的时间来学习Git

📝结论

所以,这些是每个前端开发人员必须具备的技能。你几乎会在每一份职位描述中看到这份清单

现在,只需关注这四项技能或四个步骤。记住,少即是多。

不要试图快速学习太多东西。你不会学到任何东西。你只会浪费时间

好的,这就是你的路线图
完整的前端开发路线图图片由 shahan 编程完成

☕_给我买杯咖啡
https://www.buymeacoffee.com/codewithshahan

🧷推荐

如果您对前端开发和编程 技巧感兴趣,请随时访问我🔗YouTube频道

👓特别

您是否想学习编程,而又不想浪费时间学习大量不必要的理论或无聊的待办应用程序教程以及完美结合的清晰简洁的课程?

这是一位拥有二十年编程经验的专业编码讲师,他让我的编程之旅变得更加轻松:👉 Mosh Hamedani

注:我与他的网站没有任何关联

该路线图源自他的“终极 HTML5 CSS3 课程”。

🛹 您可以通过以下方式与我联系:
Twitter ▶ https://twitter.com/codewithshahan
Github ▶ https://github.com/codewithshahan
Instagram ▶ https://instagram.com/codewithshahan

欢迎随时发表评论💁‍♂️
祝您编码愉快:)

文章来源:https://dev.to/codewithshahan/4-skills-to-become-a-front-end-developer-in-6-months-road-map-ldi
PREV
使用 CSS 动画飞行直升机(分步指南)
NEXT
10 个免费前端开发人员证书