目录介绍：

• 1、关于前端开发的20篇文档与指南
• 2、web前端需要掌握的哪些知识
• 3、20个真实的web开发项目集合，一起来看看!(二)

关于前端开发的20篇文档与指南

英文原文：Another

20

Docs

and

Guides

for

Front-End

Developers

相信在

2015

年很多这个行业的人都会有这样的两种感受：

真的不知所措，这个行业到底有多少东西需要去学习；

渴望更多，并迫不及待的为接下来的学习寻求一些思想方向。

第一个来自于我们的个人感受，而第二个则是纯粹的必要性了。所以本文整理一些有用的信息，希望可以帮助相关领域的前端开发人员。

1.

I

want

to

use

基于

Can

I

use

的数据和功能，这款应用给予你选择一组前端开发特性的能力，并会读取出一个全球性用户能够使用它的百分比。

2.

Regulex

JavaScript

正则表达式的可视化工具，在线输入表达式后，动态生成表达式图片。非常不错的一个可视化

Web

在线正则表达式设计工具。

3.

Mastering

the

:nth-child

一个单页网站，帮助你理解如何去使用各种有用但又复杂的基于选择器组合的

nth-child。

4.

HTML

5

视频事件和

API

这个页面展示了新的

HTML

5

视频元素、媒体

API

和媒体事件。播放、暂停、搜索整个视频、改变音量、静音、改变播放速度（包括进入负值），查看视频和潜在事件与属性上的效果。

5.

Excess

XSS

这可能是所有开发者都应该熟悉的一个话题，并且这可能是一个很好的着手点。它是一个跨站点脚本编制综合教程。

6.

RSCSS

意思为Reasonable

Standard

for

CSS

Stylesheet

Structure（CSS

样式表结构合理的标准），记录一些针对大项目的

Sass/CSS

编写技巧和技术。

7.

CodeFightClub

一个由

Andrew

Hathaway

建立的项目，目的是帮助其他开发者学习如何用最好、最有效以及首选的方法编写代码。

8.

Sass

Guidelines

Hugo

Giraudel

写的

Sass

Guidelines

目前已经被翻译成其他六种语言。

9.

Flexbugs

如果你的目的是使用

flexbox

构建一个网站，而事情却并没有像你所期望的那样进行，你可以在这里找到解决方案。

10.

A

Front

End

Engineers

Manifesto（一个前端工程师的宣言）

没什么深入的东西，只是一些简单的事情提示，所有的前端开发者应该考虑将其结合到开发过程和工作流中。

11.

ES5

中的

ECMAScript

6

等价物

ES6

特性转换到

ES5-compatible

代码的一个很好的参考。

12.

Flexbox

Adventures

来自开发者

Chris

Wright

对

Flexbox

深入、实际看法。

13.

BEM

一个全面推广和培养

BEM

CSS

使用方法的网站。

14.

Sass

Compatibility

记录不同

Sass

引擎之间的不兼容性问题。

15.

HTMLelement.info

一个整洁、逻辑、易使用的指南规范，在不同的

HTML

元素上获得信息。

16.

JSLint

Error

Explanations

你可能跟随过很多

JavaScript

最佳实践，却并不明白所有这些技术背后的原因。本站旨在揭露

JSLint、JSHint、和

ESLint

工具里错误和警告。

web前端需要掌握的哪些知识

一个合格的web前端需要掌握哪些技术？

最基础的自然是JavaScript，HTML和css这三种语言。

首先了解下它们到底是什么。

HTML是用户看到的网页的骨架，比如你会发现当前页面分为左中右三个部分，其中还填充了不同的文字和图片；每个子部分还会继续细分，比如当前页面的中间部分下方有输入框等等。

CSS是网页展示的细节控制，比如你会发现有的文字是红底白色，有的子部分占了页面的二分之一宽，有的只占六分之一，有些部分需要用户进行某些操作（如点击，滑动）才会出现等等，这些就是有CSS来控制。

JavaScript是负责捕捉用户在浏览器上的操作，并与后端服务器进行数据交换的脚本语言。当用户在前端进行点击，输入等操作的时候，会触动绑定了该动作的JavaScript脚本，然后JavaScript收集数据，调用后端的api接口，再将后端返回的数据交给HTML和CSS渲染出来。

一个网页的HTML代码和CSS代码是可以直接在浏览器中查看的，你可以直接按F12，就能看到下图右侧的模块，左右侧红框就是代码与实际页面的对应关系。因此如果你看到某个网站的布局很不错，不妨点击F12，进行学习。

前端框架

然而，实际应用中，已经很少有正规的项目组直接用上述三种语言进行web 前端开发了，而是使用很多封装了这三种语言的框架，比如

Vue.js

，angular，react native等等。它们是来自谷歌和Facebook的大神项目组，基于自己的经验，封装了原生前端语言，实现了更多更复杂更酷炫的功能。因此，可以说，学会使用这些框架，能达到事半功倍的效果。

比如用了vue，它是自底向上增量开发的设计，其核心只关心图层，而且还可以与其他库或已存项目融合，学习门槛极其友好；另一方面，vue可以驱动单文件组件和vue生态系统支持的库开发的复杂单页应用。有了这个生态系统，可以说，vue是处在一个不断壮大，不断完善的欣欣向荣的状态。

网络通信协议

由于前后端分离的趋势，前端还需要了解很多网络通信协议的知识，这里不局限于http协议，因为据我的经验，有时候我们还会用到websocket等协议。因此，前端需要简单了解不同协议的特点以及使用方式，但是好消息是不用像学习计算机网络课程一样对每种协议的原理都了解的特别透彻，只要学会如何用前端语言发送这种协议的请求就够了。

20个真实的web开发项目集合，一起来看看!(二)

项目六：Java工具库自主研发项目

所含知识点：DOM库，事件库，AJAX库，原型和继承库，MVVM核心库，基于SPA的路由库。

项目七：jQuery经典交互特效开发

所含知识点：时间轴特效，tab页面切换效果，网页定位导航特效，滑动门特效，焦点图轮播特效，导航条菜单效果，瀑布流特效，弹出层效果，倒计时效果，抽奖效果。

项目八：PHP+MySQL后端基础项目

所含知识点：PHP，MySQL，HTTP(s)协议详解，Ajax进阶、跨域与Defered，Apache与Nginx 环境搭建与配置，接口的定义，Mock数据，Restful，前后端联调，前端安全(XSS,CSRF,JSON注入)。

项目九：前端工程化与模块化应用项目

所含知识点：Gulp，Webpack，NPM，Git/SVN，CommonJS，AMD，CMD，ES6模块化。

项目十：PC端全栈开发项目

所含知识点：大首页、列表页与详情页展示与交互特效、搜索、登录与注册、购物车、jQueryUI 与 jQuery EasyUI、Bootstrap(ACE)、Highcharts/Echarts、ArtTemplate、Velocity、Smarty、云平台系统前端。

以上就是环球青藤小编关于20个真实的web开发项目集合的相关内容分享，希望对各位小伙伴们有所帮助，想要了解更多相关知识，请关注本平台哦!