前端开发的主要职责是为用户创建可以直接查看和交互的Web应用程序。那么如何从零开始成为一名前端工程师呢？本帖将向大家介绍，成为一名前端工程师的学习路线。

前端工程师具体要做哪些工作呢？

如今前端技术的发展，前后端技术分离，导致前端工程师的工作远远不止写写 CSS 样式那么简单，作为一名前端工程师我们还要做更多的事情比如

     1. 设计布局

     2. 样式

     3. 状态管理

     4. 处理和渲染异步数据

          ...

那么要从头开始成为一名前端工程师我们具体要学习哪些内容呢？

1. HTML

HTML（超文本标记语言）是网页的基础构成部分。在学习 HTML 过程中要重点注意几点：

    1. HTML 页面的主要结构

    2. 如何在HTML中添加文本

    3. 如何创建列表，表和表单

    4. 如何嵌入链接、图片和视频

2. CSS

既然我们使用HTML将各种元素添加到我们的页面中，接下来我们需要使用CSS（级联样式表）让页面更加的美观。以下是学习 CSS 一些需要注意的重要概念：

    1. CSS选择器（选择特定的HTML元素）

    2. CSS中的单位（绝对像素值，百分比，em + rem，vh + vw）

    3. CSS定位（static, relative, absolute, fixed, sticky）

    4. CSS 盒子

    5. CSS FlexBox.

    6. CSS grids

3. JavaScript

到目前为止您已经可以使用HTML和CSS创建非常漂亮的网页，但是如何才能使页面具有交互性呢？答案是JavaScript。

JavaScript是一种脚本语言，可用于编写客户端代码（在浏览器中运行的代码）和服务器端代码（使用node.js和deno）。

基本的JavaScript

  1. 变量，数据类型，循环和函数

  2. JavaScript对象和 “this” 关键字

  3. 文档对象模型（DOM）

  4. var / let / const关键字之间的差异

  5. 数组方法（foreach, map, filter, reduce等）

高级概念

学完了基本知识后，我们要继续学习JavaScript的高级概念。这些概念将有助于我们编写更简洁和高效的代码，并且可以实现后端接口的调用和数据的渲染。

  1. ES6 箭头函数，模板文字，破坏性

  2. Callbacks and promises

  3. 异步编程（async/await）

  3. Fetch API

4. JavaScript Frameworks

JavaScript frameworks 通过提供庞大的 libraries 、建立样板代码、提供通用特性的能力使得前端开发人员在前端开发工作中更加的轻松起来。

如今最受欢迎的框架有React、Angular、Vue.js。建议不要尝试每一个都学习，选择其中一个就好。

5. Git

到目前为止，Git 是世界上使用的最广泛的版本控制工具，版本控制是每个Web开发人员必须熟悉的重要技能。

6. 全局状态管理

  1. React: Context API, Redux, MobX

  2. Angular: Shared service, NgRx

  3. Vue.js: Vuex

7. 服务端渲染 (Server-side Rendering)

  1. React: Next.js

  2. Vue.js: Nuxt.js

  3. Angular universal (Angular)

8. TypeScript

好了，学完这些，我们就可以成为一名前端工程师啦！