前端 Web 开发，也称为客户端开发，是为用户可以直接查看和交互的 Web 应用程序创建用户界面的做法。前端开发是您获得第一份软件工程师工作的非常好的起点。本指南将引导您完成从头开始成为前端开发人员的一系列步骤。
前端开发人员究竟是做什么的？
前端开发人员只是永远编写 CSS，这是一种误解，还有更多内容。作为前端开发人员，您很可能会从事以下工作之一：
设计布局
造型
状态管理
处理和呈现异步数据
以下步骤将帮助您从头开始。
1. 学习 HTML
HTML（超文本标记语言）是任何网页最基本的构建块。它定义了 Web 内容的含义和结构。您不需要了解有关 HTML 或每个标签的每一个细节。以下是您应该关注的一些关键点：
HTML页面的基本结构
在 HTML 中添加和格式化文本
创建列表、表格和表单
嵌入链接、图像和视频
资源
通过 html.com学习 HTML的文章
Mosh Hamedani 的HTML 速成课程 youtube 视频
2. 学习 CSS
现在我们已经使用 HTML 将各种元素添加到我们的页面中，我们需要使用 CSS（层叠样式表）来设置它们的样式。CSS 描述了 HTML 元素应该如何显示。以下是一些重要的概念：
CSS 选择器（选择特定或一组 HTML 元素）
CSS 中的单位（绝对像素值、百分比、em+rem、vh+vw）
CSS 定位（静态、相对、绝对、固定、粘性）
CSS盒模型
CSS 弹性盒
CSS 网格
技巧和窍门
从网页中删除任何默认边距和填充
使用 Clamp 而不是媒体查询
使用相对单位而不是绝对单位使您的页面具有响应性
*{
填充：0;
边距：0；
box-sizing:border-box;
}
资源
通过 Web Dev Simplified学习 CSS youtube 播放列表
2.1 CSS 框架
这是一个可选步骤，但可以成为快速创建网站和 UI 的绝佳工具。CSS 框架为您提供了现成的模板/组件和类，您可以将这些模板/组件和类导入到您的代码库中，并在不编写任何 CSS 的情况下获得漂亮的响应式组件。
一些流行的选择（选择一个）是：
顺风CSS
引导程序5
物化
布尔玛
3. 学习 JavaScript
现在您可以使用 HTML 和 CSS 创建漂亮的网页。但是如何让它发挥作用呢？您实际上如何在单击按钮时提交表单或在某些事件上动态更新内容？答案是JavaScript。
JavaScript 是一种脚本语言，可用于编写客户端代码（在浏览器中运行的代码）和服务器端代码（使用 Node.js 和 Deno）。您可以只使用一种语言编写整个应用程序，从而使开发体验更加流畅并加快应用程序的速度。这就是 JavaScript 如此受欢迎的原因，并且是任何有抱负的开发人员都必须学习的原因。
基本 JavaScript
变量、数据类型、循环和函数
JavaScript 对象和“this”关键字
文档对象模型 (DOM)
var/let/const 关键字的区别
数组方法（foreach、map、filter、reduce 等）
先进理念
完成基础知识后，遵循 JavaScript 的高级概念将有助于使代码高效简洁，还有助于从 API 获取数据并进行渲染。这些是您应该熟悉的一些高级概念：
ES6特性，如箭头函数、模板文字、解构
回调和承诺
异步编程（async/await）
获取 API
资源
学习 JavaScript — freeCodeCamp为初学者提供的完整课程
来自interviewbit的JavaScript面试问题
4. JavaScript 框架
JavaScript 框架通过提供代码库、设置样板代码和提供构建 Web 应用程序的通用功能，使开发人员的生活更轻松。
当今最流行的框架是 React、Angular、Vue.js。不建议尝试学习所有内容。选择其中任何一个。React 和 Vue.js 相对容易学习，但功能较少；而 Angular 有很多功能，但学习曲线更陡峭。
React 是一个由 Facebook 维护的开源库。它的需求量很大，易于学习，拥有强大的社区（您甚至可以在 Stack Overflow 上找到最罕见问题的解决方案），并且拥有良好的文档。因此，它可能是一个不错的选择。以下文章可能会更清楚地说明哪种框架最适合您的要求。
Vue vs React vs Angular：你会选择什么框架？
这篇博客对三种最流行的 JavaScript 框架进行了广泛的比较：Vue、React 和 Angular，以防万一……
媒体网

资源
https://reactjs.org/docs/getting-started.html — 官方文档
Codevolution 的React 教程播放列表
学习 Angular — 完整教程课程
学习 Vue.js — 初学者完整课程
5. 学习 Git
迄今为止，世界上使用最广泛的现代版本控制系统是 Git。版本控制是每个 Web 开发人员都必须熟悉的一项重要技能。
Git 是一个命令行工具，但所有涉及 Git 的事情都围绕着中心——GitHub.com——开发人员存储他们的项目和与志同道合的人的网络。学习 git 后，您可以为 Github 上的开源项目做出贡献。通过为开源项目做出贡献，您将学到很多东西，这将有助于建立在线形象。
资源
由 freeCodeCamp 提供的Git 和 Github 速成课程
什么是 git 以及如何通过 simplilearn使用它
此时，您已准备好申请作为前端开发人员的第一份工作。以下步骤将帮助您学习一些高级概念，使您的个人资料脱颖而出。
6. 全局状态管理
React：上下文 API、Redux、MobX
Angular：共享服务，NgRx
Vue.js：Vuex
7.服务端渲染
反应：Next.js
Vue.js：Nuxt.js
角度通用（Angular）
8. 可选
学习部署和托管您的项目（Netlify、Github 页面、Heroku）。
学习TypeScript（为 JavaScript 带来一个“严格”的类型系统）。它使您的代码更健壮，更不容易出错。非常适合大型项目。
Firebase对于作为前端开发人员构建全栈应用程序非常有帮助，而无需对后端和数据库有太多了解，并且只需最少的服务器端代码。它还提供免费托管。
学习一些测试框架（比如 JavaScript 的 Jest 和 Mocha）。
建立一个投资组合网站来展示你的工作和项目。
恭喜！您现在是一名前端开发人员。