2020年Web 前端怎样入门？最新Web前端入门的学习路线

 

 2022年最新Web前端入门的自学路线

> 新手入门前端，需要学习的基础内容有很多，如下。

一、HTML、CSS基础、JavaScript语法基础。学完基础后，可以仿照电商网站（例如京东、小米）做首页的布局。

二、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。相信我，JS语法，永远是面试中最重要的部分。

三、jQuery、Ajax等。jQuery没有过时，它仍然是前端基础的一部分。

四、ES6语法。这部分属于JS新增的语法，面试必问。其中，关于 promise、async 等内容要尤其关注。

五、HTML5和CSS3。要熟悉其中的新特性。

六、canvas。面试时，有的公司不一定会问canvas，靠运气。如果时间不够，这部分的内容可以先不学。但如果你会，绝对属于加分项。

七、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。

八、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。

九、Node.js。属于加分项，如果时间不够，可以先不学，但至少要知道 node 环境的配置。

十、自动化工具：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。

十一、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。

十二、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外，前端常见的IDE有两个：WebStorm 和 Visual Studio Code。WebStorm 什么都好，可就是太卡顿；VS Code就相对轻量很多。个人总结一下：用VS Code 的人越来越多，用 WebStorm 的人越来越少。

十三、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。

## 推荐的前端图文教程

我这里有前端进阶架构vip学习资料，包含内容有：HTML、css3、JavaScript、Vue，移动端web开发，Ajax、jQuery、canvas、等多个知识点。需要获取这些内容的朋友可以点击 [“前端”](https://docs.qq.com/doc/DYm9VT2h3ZUp0V29l) 两个字领取


​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

非常详细和贴心，你值得star。这个前端教程主要有三个作用：

1.  网上的大部分入门教程，都不太适合初学者，本项目争取照顾到每一位入门者的同理心。
1.  帮助前端同学提供一个精品学习路线和资源，提高学习效率，少走很多弯路。
1.  可以当做前端字典，随时翻阅，查漏补缺。

## 推荐的书籍

-   《你不知道的JavaScript》

上面这套书有上、中、下三本，你都可以读一读。如果时间不够，那就先读第一本。

-   《网络是怎样连接的》

程序员面试的时候，经常会被问的一个问题是：“在浏览器的地址栏输入url，按下回车后，发生了什么？”

为了弄清楚这个问题，看上面这本书，足够了。如果你想入门计算机网络，这本书也是必读的。评价非常高。

关于这个问题，也可以看下面这篇文章：浏览器输入 URL 后发生了什么？

-   《CSS世界》

关于 CSS 的书籍，首先推荐这本书，我身边的大佬们都说这本书好。虽然我不是大牛，但我也觉得这本书很好。

如果 js 熟练，说明你是有技术深度的前端；如果 css 熟练，说明你是有经验的前端。

框架对入门越来越不友好了，功能越来越多了，各种东西层出不穷，如果你要学框架的话，咱就从vue开始吧，为什么用vue？中文社区完善呀，而且学习曲线不是很陡峭，而且公司里常用呀

学习vue之前，你得了解下前端的一个大杀器：node.js

先安装好node.js然后搞懂这几个事情

1.  node和npm是什么，他们可以用来做什么
1.  npm init命令有什么作用
1.  node_modules和package.json有什么作用？

-   推荐读物：不推荐读书=0=，多看文档，前端框架变化太快了
-   这里就没有大纲了，把官方文档的基础部分看完就好了，其他的不用看，vuex和vue-router相关看到就跳过吧，暂时对你来说不需要
-   带着这几个问题去学习

1.  使用vue-cli生成的项目，目录结构是怎么样的？其中的每个文件夹和每个文件的作用是什么？（vue-cli是有官方教程的，按照官方教程来生成项目！！！）
1.  什么是双向绑定？
1.  mvvm框架是什么意思？
1.  实现一个todolist，网上demo很多，找一个一步步来就好了，关键是要理解mvvm框架的意义，为什么要使用mvvm框架
1.  关于框架这一块我写的不太详细，有空再补充吧，我感觉这里一开始主要卡着的点应该就是关于项目的复杂结构（对新手而言），不清楚那么多文件是干什么的

## vuex和vue-router

-   做好了todolist之后，你需要了解两个东西，也是工程化非常重要的两个东西
-   vuex&&vue-router
-
-   同样，这两个教程只看基础部分，然后解答下面这些问题

1.  vuex和vue-router分别是什么？
1.  vuex和vue-router分别能做什么？
1.  vuex和vue-router的诞生是为了解决什么问题？
1.  什么情况下需要使用vuex，什么情况下需要使用vue-router？

-   解决了这些问题之后，你需要实战，这里推荐一个github上对vuex，vue-router入门比较友善的项目：https://github.com/bailicangdu/vue2-happyfri
-   实战要点：

1.  先看懂项目中vuex和vue-router的用法（第一步不是看懂项目，而是看vuex和vue-router怎么用）
1.  自己新搭建一个项目，配置好vuex和vue-router到能使用的地步
1.  看懂项目
1.  自己实现，实现的时候就不要看源码了，想不明白的地方可以回来看

好了如果进行到这里，你大概也就入门了吧23333，这个时候你也就能利用前端的知识解决问题了，但是离一个前端还是有很长的路要走的~~比如上面说的基础打牢和能力进阶

## 项目推荐

1.vue完成的饿了吗前后台webapp

https://link.zhihu.com/?target=https%3A//github.com/bailicangdu/node-elm/blob/master/API.md

2.一个vue完成的QQ音乐

https://link.zhihu.com/?target=https%3A//github.com/timelessover/vue-QQmusic

基本上上面项目都能自己做出来之后，前端也就彻底入门了，补充基础知识之后，找找工作实习也没啥大问题（但是很多人卡死在vue门口=。=），加油吧朋友们

========干货结束分割线======

关键其实还是驱动力，如果项目驱动能给你足够的动力的话，那就不停的找项目做吧，走完上面的流程，再看看书的话，找个学校的工作室帮老师做项目就好了（应该到工作室的门槛了）~

如果驱动力不够的话，那就关注我呗~ 我之后会发些之前从入门前端到现在遇到的一些事情，希望对你们有些帮助~

如果有不懂的可以来问我~说不定你骨骼清奇，一下子就打通任督二脉，直接入门了呢

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：

1.  点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
1.  私信后台回复【前端】有惊喜！
1.  同时可以期待后续文章ing