WEB前端开发快速入门教程

目前web产品交互越来越复杂，用户使用体验和网站前端性能优化这些都得靠web前端工程师去做，web前端工程师是设计加开发的综合体，web前端工程师是在开发人员中最直接面向产品，面向用户的设计人员，一个开发团队的成果是要靠web前端工程师去展现，因为用户不会去关心后台的处理有多么强大 ；在设计人员中web前端工程师是直接面向开发人员的设计人员，向开发人员以一种计算机语言的方式传递其设计理念，web前端工程师在整个团队中是很关键的。

所以一名合格的web前端工程师必须得掌握HTML、CSS和JavaScript。只懂其中一个或两个还不行，你必须对这三门语言都很熟悉。也不是说必须对这三门语言都非常精通，但你至少要能够运用它们完成大多数任务，而无需地频繁地寻求别人的帮助。

下面介绍下需要的一些基础知识

开发环境

编辑器：Phpstorm 或者sublime

浏览器：chrome（F12开启审查模式，可以看到任何一个网页的元素）或者火狐（需要安装插件firebug），当然右键还可以查看任何一个网站的源代码。

推荐阅读

HTML、CSS、JavaScript、PHP、 MySQL 的学习顺序是什么？

推荐模板网站

http://sc.chinaz.com/moban/

食用方式：先过一遍下面教程里的全部内容，然后找个好看的模板，学习index.html里的语句具体是怎么用的。一般模板都会涉及到jqeury和bootstrap，有些地方看不懂的话也没关系。

注意：提高基本功还是要靠做下面的作业，套模板只是一种实践和快速生产的方式。

作业

简易：做出登陆界面



登陆样例

较难：做出类似百度搜索界面的纯前端页面



搜索界面样例

Html

划掉的可以先不用看 其他都扫过一遍 之后就可以一边查一边写

http://www.w3cschool.cn/html/



W3Cschool Html

推
c875
荐收藏

html 速查词典 http://www.w3cschool.cn/html/dict

Css

http://www.w3cschool.cn/css/

css都稍微看下

不需要看太仔细

推荐收藏

css 速查词典|css API中文手册|css参考文档  http://www.w3cschool.cn/css/dict

CSS动画实例参考手册 http://www.w3cschool.cn/moresource/cssreference/index.html

Bootstrap

http://www.w3cschool.cn/bootstrap/

bootstrap看完css后可以看了，试试看各个控件怎么用

推荐收藏

常用的Bootstrap资源网站  http://123.w3cschool.cn/bootstrap_resources

JS

http://www.w3cschool.cn/javascript/

js也是都要看的 这个语言很强大

推荐收藏

Javascript开发资源 http://123.w3cschool.cn/javascript_resource

jquery

http://www.w3cschool.cn/jquery/

内容不多 但是这是前端的核心

推荐收藏

免费Jquery插件合集 http://123.w3cschool.cn/freejquery

前端学习资源汇总

http://123.w3cschool.cn/plk2fi

前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-资源汇总，方便大家学习查阅参考。