2021年最新版Web前端学习路线图-前端小白入门必读-推荐

2021年最新版Web前端学习路线图-前端小白入门必读-推荐

Hello，大家好，相信很多学习前端的小伙伴，会有很多的疑惑： 我要学习那些技术？ 我要到哪里去学习这些技术呢？ 学习这些技术的目的对就业有什么帮助呢？ 我学到什么程度可以胜任工作？ …

这里，给你们最全的解答。

1. HTML5 + CSS3

根据web前端发展史，建议大家先学习pc端页面开发。 包含： HTML5、CSS3、浮动、定位、盒子模型、高级技巧等等。 不用说，这是我们前端入门的最基本要求，目的是能完成页面的布局开发，这部分必须精通。 这部分知识比较简单，不要去买书看了（太浪费时间），直接看pink老师视频就够了哈。 https://www.bilibili.com/video/av80149248

学完之后，只要网上看到喜欢的页面，就可以模仿下来，意味着你掌握成功。

2. 移动端页面开发

我们先学习了pc端页面开发，但是现在移动端太常见了，所以我们也需要做移动端页面开发。 主要学习移动端常见布局：流失布局、flex布局、rem布局、响应式布局等。其中市场rem布局用的最多了，重点掌握。 网上相应的布局视频很多，可以重点学习。 最终起码把几个大厂的移动端首页写出来才可以。比如淘宝、京东、小米等。

3. JavaScript 系列

JavaScript是我们前端的核心，需要精通掌握，可以直接学习ES5，ES6就可以了。这样就可以让我们页面交互效果动态展示起来了。 包含： JavaScript 基础语法及 Web API 开发动态交互（⽹⻚特效）的⽹⻚、JavaScript ⾼级特性，如⾯向对象、闭包、事件循环等技术、 jQuery也要了解一些，现在市场很多老项目还是大量有jQuery的，你说不会jQuery，人家不相信你前端工作过。。。

学习渠道：

1. 最权威的JavaScript网站 MDN： https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics 当然还可以去菜鸟教程等。

2. 各种视频网站， 首推B站， 还有 慕课，腾讯课堂等。搜索相关关键字即可。

3. JavaScript 相关面试题可以去 掘金、牛客网、github 等网站。

4. 相信我，最好的还是百度。 学到js ，你应该要有自己的 github 或者码云的账号了，里面有大量资源可以让你去查阅学习。

推荐的书籍： 《JavaScript DOM 编程艺术 》、 《JavaScript高级程序设计》、 《你不知道的JavaScript 》、 《锋利的jQuery 》等， 建议直接网上搜电子书即可。

4. Ajax 和 git

前面我们写的所有页面都是静态的，也就是所有的数据都是假数据，实际开发的时候，数据都是从后台获取过来的，那么如何获取后台的相关数据呢？ 答案就是 ajax。

前端必备哦 通过 Ajax 实现与服务器的通信，获取服务器提供的数 据，然后动态渲染输出，实现动态⽹⻚的开发。

学习 git 版本管理⼯具，实现企业级多⼈协同开。 学到这里，最好有个项目练习， 这样可以更好的明白动态网站是如何开发的。 现在网站都是流行前后端分离，这个阶段我们能知道如何调用后端接口。

5. Node.js

相信学ajax 的时候，很多教程搭配php或者其他后台语言来学习，但是我更推荐ajax和node来学习，毕竟都属于我们前端内容，省去在学习另外一门语言的痛苦。

目的： 通过学习 Nodejs 和 MySQL 深⼊理解⽹站的本质，以及前端在整个⽹站开发中的⻆ ⾊，为在企业中前后端协同开发提供帮助。体会 Nodejs 在前端⼯程化开发中的重要作⽤。

学习推荐地址： 推荐一个博客： https://cnodejs.org/getstart

6. VUE

前端三大框架 你肯定听过 vue 、react 、 angular。 国内最火的框架是 vue，而且vue3.0 马上也要发布了，肯定还会火一把。 有了这些框架，我们开发页面更加快速和高效，性能维护有了极大提高。 目的是：掌握 MVVM、模块化、组件化、状态管理、路由等技术在实战项⽬的应⽤，丰富开发经 验、提升实战能⼒，为⾼薪就业提供保障。

Vue官网就非常全面： https://cn.vuejs.org/ 而且b站上面也非常多的视频教程。 学完开发一个pc端和移动端的网站练手。

7. React

如果说vue国内最火，那么国外react是最火的，而且 现在react在国内大厂使用非常普遍，也有越来越多人选择react。

8. 微信小程序

小程序也能增加我们就业方向，也需要我们学习。 学习并掌握⼩程序开发的相关知识，能够独⽴完成⼩程序的开发。通过学习跨平台⼩程 序技术⽅案，实现⼩程序的跨平台⽀持。 首推 uni-app 和 taro 来学。也是火的一塌糊涂。

最后一句话， 一个人自学很难，要么参加培训，要么拉个志同道合的人一起监督学习， 要是能找个师傅最美了。。。 加油吧，各位前端大神们~~~~