2022适合零基础的 Web 前端学习路线

 0、开发环境的搭建

1、掌握前端基础功

按顺序学习 HTML、CSS、JavaScript，它们分别是网页的骨架、衣服、动作。

学习前端的网站有很多，可以在下面两个网站配合学习。

WEB前端开发工具+安装教程https://jq.qq.com/?_wv=1027&k=6vfSFKaS

W3Schools

MDN Web Docs

编程是一门实践科学，实践得多了就记住了、懂了，写代码的时候忘记了就现查。

2、理解 HTTP 协议

URL 由什么组成，什么是端口，域名、路径、参数、锚点。

一个 HTTP 请求和响应的过程，里面都有什么内容。

3、 掌握 DOM 编程

学习 DOM 操作、DOM 事件。

初学者要先把基本功打好，后续学习理解 React、Vue 也会更加得心应手。

4、 初窥网络编程

如何从服务器获取数据？如何提交数据给服务器？

什么是 Cookie？如何合理使用 localStorage 存储数据？

5、 掌握移动端与响应式

搞清楚 viewport、缩放、分辨率、媒体查询、触摸事件等等。搞清楚 vh、vw、rem 这些尺寸单位。

6、 选学数据结构与算法

很多人建议新手要学习数据结构和算法，我建议是感兴趣可以先去看看是怎么回事。

至于什么时候学呢？嗯……大概是入门之后面试之前。

7、 实战练习

趁热打铁做一些实战的项目，先从简单的开始

1. 逐个页面像素级模仿热门 App 的页面显示（HTML + CSS）

2. 写一个 Chrome 浏览器插件，显示本地天气信息（HTML + CSS + JavaScript）

3. 写一个可以离线保存数据的笔记网页（HTML + CSS + JavaScript）

4. 利用 Hexo + GitHub Page 做个人网站，并按自己想法修改网站主题（HTML + CSS + JavaScript）

WEB前端新手练习项目+视频资料https://jq.qq.com/?_wv=1027&k=6vfSFKaS

下一步

这时候进阶再去学习 React、Vue 这些框架，直接看官方文档，后续我也会分享一些不错的实战项目。

最后几个建议

持续写学习笔记，发布到个人网站。

养成看英文原版文档的习惯。

记录你的产品 idea，成为你心里的种子。

项目发布到 GitHub 上，这就是你的作品集。

我自己也是大学开始学习的web前端开发的，一开始也是从简单的html。css开始学起，到后来的js， 各种框架等等，现在也是工作5年了，大学和工作期间都收集了很多学习笔记和资料，分享给真正学习的友友们，都是自己整理的不嫌弃的可点击下方插件获取：