如何帮助前台web新人入门和提高？

很多人刚开始学习前台的时候会看非常多的文章，找非常多的资料，但其实并不知道从哪里开始。

这里告诉大家如何分阶段学习前台，以及更加有效地利使用资源。

新人前台学习的话能分两大模块，一是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等网格框架提供了管理布局中行和列的样式表。

网格系统的主要目的之一是为网站增加响应可以力。响应性意味着网站会根据窗口宽度调整大小。

练习

掌握了最佳实践后就要进行实际检验。接下来的两个试验的目标是练习编写干净的代码并观察最佳实践对可读性和可维护性的长期影响。

可以够有效地重构代码是前台开发人员的一项重要技可以。创立质量代码是一个迭代过程。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.getElementById(“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开发网页聊天室

以上就是关于前台新人学习的内容。

更多前台干货，请关注 我 哦~ 需要资料的私信评论，，，，更多前台干货，请关注 我 哦~ 需要资料的私信评论，，，，

更多前台干货，请关注 我 哦~ 需要资料的私信评论，，，，更多前台干货，请关注 我 哦~ 需要资料的私信评论，，，，