很多人刚开始学习前端的时候会看非常多的文章，找非常多的资料，但其实并不知道从哪里开始。
这里告诉大家如何分阶段学习前端，以及更加有效地利用资源。
新人前端学习的话可以分两大板块，一是HTML和CSS，二是Javascript、框架和设计模式。这里又把它们两个的学习步骤细分了，接下来就详细讲一下：
一、HTML和CSS部分
1、HTML和CSS基础知识
在前端开发中，一切都从HTML和CSS开始。HTML和CSS控制你在网页上看到的内容。当CSS处理样式和布局时，HTML指示内容，这些内容可以是文字，图片，视频等。
入门书籍推荐
《Head first HTML&CSS》
《CSS权威指南(第三版)》
《精通CSS》
在线课程学习：
HTML基础入门
CSS速成教程
HTML5基础入门
Bootstrap3.0入门学习
完成上面的教程后可以看一看CodeAcademy的建立网站这门课Create a Website - Structure, CSS, Boundaries and Bootstrap ，是使用HTML和CSS构建网站的入门级教程。
练习
在掌握基础概念后，就要把知识变现了，接下来就要做点有意思的事。
下面介绍推荐几个实验，帮助你进一步了解 HTML 布局，CSS 构建对象样式。
纯 CSS 打造网页版「大白」
编写组件，实验重点不是重新创建整个页面。
找了几个包含易于阅读的源代码的网站，选择几个关键组件，如导航栏或页脚进行编码可以帮助更好理解HTML和CSS。
AirBnB ：复制他们的页脚
PayPal ：复制他们的导航栏
Invision ：复制页面底部的注册部分
另外，对于任何网站都是可以看到它的HTML和CSS 只需右键单击页面或页面上的组件，单击“检查”，弹出面板的左侧是HTML，右侧是CSS。
2、HTML和CSS最佳实践
1)语义标记
HTML和CSS的最佳实践之一是编写语义标签。良好的Web语义意味着使用适当的HTML标记和有意义的CSS类名来传达结构意义。比如
header
标签定义文档的页眉(介绍信息)。
HTML5语义标签
语义化HTML：有含义的标记
What Makes For a Semantic Class Name?
2)CSS命名规范
具体内容可以参考 如何规范 CSS 的命名和书写？
3)CSS重置
在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加厚样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，也就是把浏览器提供的默认样式覆盖掉。
MeyerWeb是一种流行的重置。如果你想深入挖掘，还可以阅读 Create Your Own Simple Reset.css File。
4)跨浏览器兼容
跨浏览器支持意味着你的代码支持大多数最新的浏览器。某些CSS属性(如转换)需要供应商前缀才能在不同的浏览器中正常工作。需要在多个浏览器上测试网站，包括Chrome，Firefox和Safari等。
跨浏览器兼容的技巧可以看看这篇文章 跨浏览器兼容的重要性技巧
5)CSS预处理器和后处理器
CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件。两个主要的CSS预处理器是Sass和Less。
CSS后处理器在由预处理器手写或编译后对CSS应用更改。例如，像PostCSS这样的一些后处理器具有自动添加浏览器供应商前缀的插件。
6)网格系统与响应
网格系统提供了快速构造网页内容布局的方法，设计师可以根据预制结构进行布局，节省了大量的时间和精力。
Bootstrap，Skeleton和Foundation等网格框架提供了管理布局中行和列的样式表。
网格系统的主要目的之一是为网站添加响应能力。响应性意味着网站会根据窗口宽度调整大小。大家在入门学习前端的过程当中有遇见任何关于学习，行业方面的问题，都可以申请加入我的前端技术顾问秋秋裙，前面输入是600中间610后面151最后连起来就是。缺乏相关的基础教程也可以直接来找我要，我这里整理了最新的前端基础教程，学习前端的这个过程当中我也收集了很多前端学习手册，面试题，开发工具，PDF文档书籍教程，可以直接分享给你们。
练习
掌握了最佳实践后就要进行实际检验。接下来的两个实验的目标是练习编写干净的代码并观察最佳实践对可读性和可维护性的长期影响。
能够有效地重构代码是前端开发人员的一项重要技能。创建质量代码是一个迭代过程。CSS体系结构：重构您的CSS是重构代码的良好起点。
在重构代码时，有几个问题要弄清楚：
浏览代码时，你能够快速辨别结构和关系意义吗？
你是否不断重复使用相同的十六进制颜色代码？将它重构为Sass变量是否会更有意义？
你的代码在Safari上的工作方式与在Chrome上一样吗？
你能用像Skeleton这样的网格系统替换你的一些布局代码吗？
你经常使用 !important 标签吗？ 你怎么解决这个问题？
二、JavaScript部分
1、JavaScript基础知识
1)JavaScript
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。
Javascript基础(新版)
2)交互
现在你已经基本了解了JavaScript，下一步就是将它应用到Web上。要了解JavaScript如何与网站交互，首先必须了解文档对象模型(DOM) 。DOM 是 W3C(万维网联盟)的标准，它能够在所有浏览器上提供一种一致的方式，通过代码访问HTML的结构和内容。
在浏览器加载一个页面时，浏览器会解析HTML，并创建文档的一个内部模型，其中包含HTML标记的所有元素。
JavaScript可以与DOM交互(JavaScript使用DOM创建或删除元素等等)
JavaScript修改了DOM时，浏览器会随着动态更新页面。
JavaScript与DOM交互以改变和更新它。以下是我们选择HTML元素并更改其内容的示例：
var container = document.getElementByIdx_x(“container”);
container.innerHTML = 'New Content!';
有关常见JavaScript DOM交互的列表，请查看JavaScript函数和帮助
高性能JS-DOM
3)检查器
要调试JavaScript，我们使用浏览器内置的开发人员工具。大多数浏览器都提供了检查器面板，可以查看网页的来源。
Chrome开发人员工具
Firefox开发者工具
练习
基于 JavaScript 实现玫瑰花
基于 JavaScript 实现打地鼠游戏
基于 JavaScript 按键控制坦克移动
网页版别踩白块游戏
2、更多JavaScript部分
1)命令与陈述
JavaScript与DOM交互的方式有两种：命令式和声明式。一方面，声明式编程的重点是什么情况。另一方面，命令式编程关注的是什么以及如何。
2)Ajax
Ajax是一种允许网页使用JavaScript与服务器连接的技术。
PHP 之 Ajax 实例讲解
ajax(Ajax 开发)
the front page of the internet
3)jQuery
事实是，有很多DOM操作库提供API简化代码。最流行的DOM操作库之一是jQuery。
基于 jQuery 实现图片轮播
4)ES5与ES6
理解JavaScript的另一个重要概念是ECMAScript以及它与Javascript的关系。ES5和ES6是JavaScript使用的ECMAScript标准。
练习
基于 jQuery 实现图片轮播
网页版2048_HTML5
jQuery在购物车的使用
3、JavaScript框架
JavaScript框架列表：
Angular
React + Flux
Ember
Aurelia
Vue
Meteor
2)设计模式
JavaScript框架不会重新发明轮子。他们中的大多数都依赖于设计模式。
Decorator
Factory
Singleton
Revealing module
Facade
Observer
理解并能够实现其中一些设计模式不仅可以使你成为更好的工程师，还可以帮助你了解一些框架在幕后的工作。
3)AngularJS
AngularJS是一个JavaScript MVC，有时是MVVM框架。它由Google维护，并在2010年首次发布时风靡JavaScript社区。
4)React + Flux
React是一个用于构建用户界面的库。
Facebook设计了React和Flux来解决MVC及其大规模问题的一些缺点。看看他们着名的演示文稿Hacker Way：在Facebook重新思考Web应用程序开发。
三、综合练习
瀑布流加载图片墙
基于 HTML5 实现本地图片裁剪__实验楼 - 实验楼
基于HTML5 Canvas实现小游戏
基于 Canvas 实现放大镜效果
校花评比排名项目
Java和WebSocket开发网页聊天室
以上就是关于前端新人学习的内容。
作者：web小猿
链接：https://www.jianshu.com/p/065aca6a2e5a
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
