前台新手教程！如何快速入门web前台

最近收到少量的私信问我，自己想要学习前台，该如何学习？学习到什么程度才可以工作？我进入这个行业已经十一年了，面试过不少人，在企业里也带过不少新人和应届生。所以这篇文章我想分享少量初学者应该怎样学web，怎样入门的个人经验。

心态和个人的少量学习方法

先说心态问题，经常看到网上很多说前台容易，所以想来学习的。其实，目前随着前后台分离，前台也逐步趋向工程化，并不是嵌套在后台项目中写写htmlcss即可以的了，需要学习的东西也越来越多。所以希望大家能保持一直学习的心态和对前台的兴趣，在入门阶段最重要的就是努力，即便是最简单的代码也多敲多练习。

学习方法方面，我想和大家分享一下费曼学习法，希望可以提高大家的学习效率，目前我学习新知识，也在用这套方法。简单说，费曼学习法就4个步骤。

1. 概念：在确定了自己学习的主题后，去理解它的基本概念，尽量熟读并背诵，一个知识的官方概念，可以说是对它最简洁最严谨的总结。

2. 教给别人：把这个概念用自己的逻辑和话术讲出来或者者写下来

3. 回顾：回顾自己的逻辑能否通顺，假如不通顺再去搞清楚哪里出了问题，重新整理自己的逻辑，直到整个逻辑清晰

4. 简化：到了第四步可以说自己对这个知识的逻辑已经很清晰了，此时要做的是，把自己的逻辑用最简单的话讲出来，去除所有的专有名词，即便8岁的小孩也能听懂的程度。

前台学习路线

第一部分 HTML

这个阶段最主要的就是练习。用最快的时间把所有的HTML标签都上手敲一遍，不需要强制记忆，但肯定要认认真真敲上一到两遍。

这部分推荐两个网站：

1、w3school

2、菜鸟教程

第二部分 CSS

CSS为层叠样式表(英文全称：Cascading Style Sheets)，主要用于修饰静态网页，如文字大小，颜色等。

这部学习方法呢，建议先跟着教程里代码手敲一遍。

书籍的话，可以大概翻一下《CSS权威指南》，这本书可以让自己对CSS有更深层次的了解，等后面工作后，可以再回来细读。

第三部分 javascript

学习js之前，肯定要掌握HTML和CSS。

到这里也是最容易放弃的地方了，我建议可以把js学习也做一个简单拆分。

1. 学习基础语法

这里还是跟着网上教程多敲，假如碰到不了解的地方可以先记住先敲几遍。

2. 实践

实践部分就是找几个js小项目，跟着做一遍，当你做出来小项目肯定会获取成就感，想给自己的朋友秀一下自己的学习成果，当你能从代码中取得成就感，可以说到这里就已经算成功入门了。

3. 进一步学习

到这里我们即可以开始以实战或者者提高自己代码质量为目标了。

推荐几本js相关书籍

《JavaScript DOM编程艺术》

《javascript高级程序设计》

《现代JavaScript教程》

同时也可以在GitHub或者者其余渠道上找些项目练手。

第四部分 框架学习

有了js基础之后，即可以学习少量JS相关框架了。

这里建议大家可以从Vue入手，最近做的几个前后台分离项目都是Vue，而且最近Vue在国内的使用频率也越来越高，目前在前台市场github star数已经是第一位了。

最好的资料就是官方文档，前方指路-Vue官网：cn.vuejs.org/

我目前是在职前台开发，假如你现在也想学习前台开发技术，在入门学习前台的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前台学习交流3000人裙：前面：851 中间：231 最后：348。里面聚集了少量正在自学前台的初学者裙文件里面也有我做前台技术这段时间整理的少量前台学习手册，前台面试题，前台开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。

写在最后

对于准备入门的小伙伴可能会不知道应该看什么资料，我整理了少量前台学习相关的，主要适合想入门或者者想提升自己的同学，无论你是0基础还是刚刚入门的，都可以理解一下，里面包含0基础的学习路线，大厂面试指南等。

个人建议重点看的内容主要几个方面：

1、前台的基本技能、市场人才情况

2、Echarts框架、大厂常用的前台特技

3、对标“ATM（阿里、腾讯、字节）”的前台工程师必备技能

4、从小白到高薪前台工作者的发展路径

5、求职面试的技巧

6、里面的项目肯定要做！-利用Gitee Pages创立自己的网站、“前台炫技走马灯”项目源码包

最后，希望这篇文章能给大家带来帮助，也希望大家都能通过个人的努力取得自己想要的结果。