前端新手学习路线

在开始之前，我需要说明一下标题中的「新手」，它具有两层含义，一层是你压根没有接触过编程，另一层是你做过其它方面的软件开发，但想做一下前端。对于这两种情况来说，学起来的角度完全不同，速度也完全不同。这篇文章，核心目的是帮阻你梳理作为一名合格的前端开发工程师需要掌握的技能，以及如何开启自己的前端之路。

万事开头难

WARNING

第 1 步：VSCode + Chrome 工具使用，会调试网页

在做编程时需要找一套得力的开发工具，我推荐使用 VSCode， 浏览器我建议你选 Chrome，它俩是前端开发必备利器。万事开头难，学前端开发第一关就是能熟练使用 VSCode 和 Chrome，并能够写一个简单的页面在浏览器（Chrome）里预览。做好这一步，也是给自己建立信心的必备条件。

网页效果咋么做

WARNING

第 3 步：HTML 与 CSS 是前端的必经之路。

前端最简单的工作就是做各种效果的静态页面，这里主要学习 HTML + CSS，HTML 负责描绘整个网页的结构及显示的内容（比如图片、文字、视频），犹如一栋楼房中的地板、楼梯、门、灯；而 CSS 则负责网页的样式和布局，犹如一栋楼房的颜色、书桌的摆放位置。

动态渲染效果更佳

WARNING

第 3 步：需要搞懂编程语言 JavaScript 和 DOM。

网页中经常会出现各种奇特的效果，比如一个悬浮的气泡，按钮点击后出现的弹窗。而这些的基本实现离不开 DOM + JavaScript。可以把 DOM 看做是网页在内存中的一棵由节点组成的树，每个节点都会有不同的属性，通过 JavaScript 来动态调整这个树的样式。

浏览器环境

WARNING

第 4 步：浏览器工作环境

你所写的代码最终会被浏览器执行，不同的浏览器具有差异化，也有特定的工作环境。浏览器提供了很多属性可以使用，比如常用的 window、document、location 等。

构建工具

WARNING

第 5 步：构建工具使用 webpack

得益于 nodejs，前端工具真的是多，生态也非常繁荣。在学习前端时，需要深入去掌握一种构建工具，然后对其它构建工具的优缺点自己心知肚明就好。

前端在上线时都需要经过打包工具（webpack 为主力）处理，比如代码压缩。

WARNING

第 6 步：未完，待续