前端是主要处理页面样式及其与用户交互的一个方向，相对于后端学习，前端学习是一个可视化的过程，因为前端的实践常常是打下代码就可以直接在页面上看出来效果。同时，前端学习入门相对简单，一天的简单阅读 HTML 文档就可以做出一个好看的网页，这对激励下一步学习是很有帮助的。以我经历来看，先学习 web 前端，在实践中逐渐理解浏览器的运作机理（因为前端学习一般是不会让人感到枯燥的），然后对于后端和前端进一步学习都可以起一个引导作用。
关于本文
本文适用于前端小白，给小白们构建了一条比较合适的学习路线，每个学习节点末尾都给了一个 TASK ，可以根据 TASK 来进行实践，这样对于能力是最好的锻炼。
前端学习不建议学完一个再学下一个，因为很多内容都是层层关联的。所以学了一部分 HTML 后建议可以马上先学习 CSS ，然后可以并行学习 Javascript，这样可以学习三者结合，更能理解前端运作方式。
学习网站
前端学习网站当然强推万能的 MDN：https://developer.mozilla.org/zh-CN/docs/Web
但是感觉 MDN 的中文不太那么让人能读懂，所以初学者可以看菜鸟教程：https://www.runoob.com/
学习资料
我在网络上放了一些学习书籍，想要深入系统地学习前端可以下载来看一看，对于初学者建议用上面学习网站学习。
《JavaScript基础教程》：https://wws.lanzoui.com/ixZfSl6dprc 密码:1ubs
《JavaScript高级程序设计》：https://wws.lanzoui.com/iGpV3l6dpch 密码:1pg9
《HTML5与CSS3基础教程》：https://wws.lanzoui.com/iKWd7l6lzcf 密码:9bdf
编写软件
推荐使用 JetBrains 出品的 webstorm。
这里是官网下载地址：https://www.jetbrains.com/webstorm/download/download-thanks.html?platform=windows
从 HTML 开始
HTML 是一种标记语言，算不上编程语言，大概就跟 Markdown 类似，是用来标识排版的语法，所以也非常简单。
HTML 是 web 前端的基础，基本上学会几个html标签就能够编写基本的网页结构了。
譬如下面是一个网页的主要 HTML 内容：
<div>
<p>
这是一行字。
</p>
<p>
这是另一行字。
</p>
<button>
这是一个按钮
</button>
</div>上面显示效果如下
这是一行字。
这是另一行字。
结构非常简单，而且只需记住几个常用标签，基本上就能用于任何以后的前端结构。
HTML 推荐初学者在菜鸟教程上学习，这里是链接：https://www.runoob.com/html/html-tutorial.html
用 CSS 来修饰一下
CSS 就是用来美化界面的，而且语法同样简单，基本上属于是这样一个结构：
你要美化的那个元素：你要的样式
如下，只需要这样写，就能让 HTML 的文字变为红色。
p {
color: red;
}美化后示例如下。
这是一行字。
这是另一行字。
语法是不是很简单？学会 CSS之后就能实现更多更为炫酷的效果，甚至直接用 CSS 做 3D 动画都没有问题。
可以看看这个链接 https://tangdingga1.github.io/first-Step-Of-My-Programmer-life/bilibili.html 里的实例，纯粹用 HTML 和 CSS 写了一个 B 站首页，当然意味着没有其他功能，只是一个好看的页面，不过这也足够展现出 CSS 的能力了。
CSS 也很推荐在菜鸟教程上学习：https://www.runoob.com/css/css-tutorial.html
**TASK：**学了 CSS 可以尝试做一个你觉得好看的页面吧！可以试着做一个百度首页（不要求实现搜索和动态功能，只要长得一样就行）。
JavaScript 是万能的脚本
当你点击按钮后会发生什么？譬如在一个网页的注册界面，你点击提交按钮后会发生什么？
一般期望的应该是点击按钮后就提醒你注册成功。
我们来捋一捋这个过程：
- 首先 HTML 来写出这个按钮结构，这样我们就可以看到这个按钮。
- 用 CSS 来美化按钮，让它看着比较舒服。
- 用 某种方式 来让按钮按下后弹出通知。
这 某种方式 就是靠 JavaScript（简称 JS） 来实现的。JS 是一种依赖于浏览器的脚本语言，它和 C语言，JAVA等都是高级程序设计语言，这意味着 JS 可以实现很多其他语言同样能实现的功能。同时由于它是脚本语言，不需要想其他语言那样复杂的编译环境什么的配置**，只要你有浏览器，JS 就能运行**！
相对前面提到的两者， JS 要难一点，但是也是比较简单的一门语言。它不需要 C语言之类的语言那样开始需要引入一堆库和函数。如下，只需要短短一行就能在浏览器弹出一个提示框：
alert("我是提示框！");效果如下：
同样很简单地能用一行代码显示一个输入框：
prompt('请输入您的年龄','默认还没出生');效果如下：
JS 和网页各种元素能够很好地配合，它能对网页进行各种操作。譬如我们经常用到的各种网页抢票脚本什么的都是用 JS 写的。其原理都是用 JS 来操作 HTML 元素和 CSS 内容。
这里有个简单示例：JS 操作 HTML 元素，点击下面按钮，即可使其上方文字变为绿色。
这是一行字。
这是另一行字。
document.getElementById('button-id').addEventListener('click',function(){
document.getElementById('text-id').style.color = 'green';
});学会 JS 还能动态地修改页面，还能实现性能的提升。比如 懒加载：加载一个网页时并不一次性把所有内容加载完，而是你滑到什么地方就加载什么地方的东西，这样可以减少流量消耗和服务器负担（比如有的人就点进网页一瞬间就退出了，却加载完了整个页面，这岂不是很亏流量？）。
JS 也同样推荐在菜鸟教程上学习：https://www.runoob.com/js/js-tutorial.html
不过这时候你也该会用 MDN 学习了：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
TASK： 学完 JS 可以尝试写一个动态网页了，要求能够进行交互，比如按下一个按钮就能删除页面上某个段落。
是时候用上懒人的框架了(deprecated)
在把原生 JS 学会后（不要一开始就学框架，否则对理解 JS 没有任何帮助），就可以使用各种框架了，比如经典的 JQuery 框架，框架就是别人编写的一系列的工具，可以帮助我们快速开发界面，而不需要以前那么复杂地处理各种逻辑。
框架使用非常简单，比原生 JS 简单多了，所以这时候你就可以放松一段时间了，但是也不要太高兴，因为后面你将接触到更加复杂的框架，甚至可以通过 NodeJS 框架来实现后端功能。
推荐先学习 JQuery 框架，在菜鸟教程：https://www.runoob.com/jquery/jquery-tutorial.html
或者 JQuery 官方文档学习。
TASK： 学完这些后你可以尝试编写一个网页账户的注册登录界面（不需要编写后端数据库），最好有很多动态交互内容，比如检测敏感词，确认密码是否正确的功能。
或者还可以尝试做一个能定位到当前日期的日历了（不要求显示农历日期和节日，只要可以翻页查看下个月日期和星期几什么的功能就好）。
更复杂的框架——参加复杂的应用开发
前面的内容都是在 web 页面规模较小的时候，一个人完全可以照顾到各个方面的开发。但是一旦参与大规模开发，纯原生或轻量级的框架完全不足以满足复杂的需求。
所以需要学习一些结构性规模性的框架，推荐学习 VUE 或者 React 框架，他们都是各大公司开发时用的比较多的框架，学到这里就可以慢慢靠近对企业开发的对接。到这里了希望阅读博客的你能够学会自己找学习资料而不是我给你放链接了。
不过对于国内的开发环境来说，vue相对来说更加适用，而且其官方文档也写的非常不错：https://cn.vuejs.org/guide/introduction.html
**TASK：**学习了这里的东西，你可以尝试着自己写一个模仿 淘宝 官网的网页了，尽量学会实现其网页上的各种效果，而且写出了这样一个项目，是对你个人前端开发整体能力的体现，在找工作时也是很有帮助的。
前端？不！后端！
当你不满足于前端开发，想要做一些后端工作或者你甚至想做全栈工程师（指兼顾各方面开发的人员），那么你就不得不学习一门后端语言，比如 PHP（全世界最好的语言！！！） ，JAVA，C，Python，Go之类的。
但是如果你不想专门学一门后端语言，那么可以使用强大的 NodeJS 框架了，不过相对来说，Node的操作相对复杂一点，不过它的功能是非常强大的，还有无数开箱即用的npm包，对于想要深入实践前后端协同开发的这是必然需要学习的。
**TASK：**学习完后端内容（不论你学的是一门后端语言还是 NodeJS ），你就可以试着开发一个博客系统了。注意：你需要开发的不只是静态的博客页面，而是整个系统。要能够实现编辑博客，自动发布博客，评论博文之类的功能。你可以从 Hexo 或者 Wordexpress 里参考一下一个博客系统需要的前后端功能。
前端开发其他应用
用你前端学习的内容完全可以学习自己开发一个微信小程序了，因为小程序的基本结构也是HTML + CSS + JS 的，可以自己阅读微信官方文档学习开发。
进行鸿蒙应用开发也是可以的，因为鸿蒙应用支持 Java 和 JS 开发两种方式。你也可以通过阅读官方开发文档来进行开发，如果你同时也是华为手机那就更棒了。
继续精进
前端是一个发展迅速的方向，它的各种框架各种内容都在随时间变得越来越复杂，越来越丰富。所以学习前端开发要时刻紧跟前沿技术，始终保持学会最前沿最常用的框架内容，同时要丰富计算机网络、浏览器对象的各种知识，在不断学习中成为一名优秀的前端开发者。