极客学院前端练习题

大前端作业索引

此内容是参考Github上 这个位置 的信息的总结，前端学习的作业是在 课程13 中按照作业的要求上传到Github上开源的，如果涉及侵权请及时联系我，我会移除此信息，详细的内容请参考上面的连接。

目录

• 任务 1: 学会基本的HTML(5)标签骨架以及基本服务器概念
• 任务 2: 学会HTML5新增元素及CSS核心技术
• 任务 3: 学会CSS常用布局技巧以及绘制特殊图形和动画
• 任务 4: 掌握HTML+CSS的基本核心技巧
• 任务 5: JavaScript入门和基础
• 任务 6: 掌握JavaScript DOM、BOM、事件和高级技巧
• 任务 7: 掌握jQuery使用和深入JavaScript
• 任务 8: 了解面向对象编程以及PHP+MySql入门
• 任务 9: 学习NodeJS(含EcmaScript6)和移动端开发
• 任务 10: 掌握前端工业化框架
• 任务 11: 掌握CSS在工程中的变化
• 任务 12: 掌握JavaScript常用设计模式
• 任务 13: 熟悉版本操作工具Git、SVN等以及AngularJS、Cordova
• 任务 14: 熟悉网络安全以及React、ReactNative
• 任务 15: Linux基础以及JS开发PC软件
• 任务 16: 学习HTML5游戏开发准备进入毕业设计与答辩

任务 1: 学会基本的HTML(5)标签骨架以及基本服务器概念

1.开发基础百度首页

要求：

• 学会配置开发环境
• 学会使用基本的HTML结构搭建骨架
• 基本符合视觉上的要求
• 让整块在页面大致垂直居中
• 页面的点击全部为真实点击
• 并不要求CSS

2.开发课程表

要求：

• HTML&HTML5标签及表格table的使用；
• 代码结构的处理
• HTML5语义的使用
• 提前学习，使用了css进行美化。

任务 2: 学会HTML5新增元素及CSS核心技术

1.制作一个由5个100*100DIV组成的十字架

要求：

• 制作一个由5个100*100DIV组成的十字架（如 :heavy_plus_sign: ），
• 中间放一张icon（自己喜欢的64*64的小图片）在DIV里垂直水平居中，
• 十字架页面垂直居中水平居中,每一个DIV要有边框阴影尽量的让其漂亮。
• 可在此 寻找对应的图片。

2.制作青岛家教网注册页面

要求：

• 青岛家教网注册页面是一个N年前非常传统的老式页面，很陈旧，需要大家用自己新学过的HTML&HTML5&CSS&CSS3的知识，一些新的表单元素，重新实现和改良这个页面，达到熟悉表单元素的目的（传统input和H5的混用达到全部熟悉的目的）。
• 具体要制作的页面，入口在 http://www.qdjj.net/member/register_1.asp （不需要做），先填写一些资料后进入下一个页面 http://www.qdjj.net/member/register_2.asp 就是我们需要制作的。

3.让百度首页样式完全与官网样式完全一致

要求：

• 试着使用HTML5元素改良百度首页且样式尽可能完全与官网完全一致（仅要求谷歌浏览器）。
• 本题难点在于百度首页顶部菜单鼠标悬浮下拉菜单的效果，当前阶段未学JS, 可以参考使用伪类:hover尽可能去实现，但不做太多要求。

4.实战盒子模型与弹性盒模型。

要求：

• 正常盒子与怪异盒子对比
• 弹性盒子水平分栏，垂直分栏，排序(flex)，cloumn分栏
• 旧版弹性盒子居中布局
• 美观程度

任务 3: 学会CSS常用布局技巧以及绘制特殊图形和动画

1.CSS3开发3D魔方

要求：

• 使用CSS3开发炫酷的3D魔方效果。详情看老师讲解视频。

2.CSS&CSS3开发简笔画并让简笔画像动画片一样动起来

要求：

• CSS&CSS3开发简笔画并让简笔画像动画片一样动起来。
• 测试浏览器需要支持H5及CSS3, 默认必须至少支持Chrome（想拿高分请支持firefox）。

3.让百度首页适配IE等所有浏览器

CSS Hack技能是衡量一个前端工程师经验和技能功底的重要知识点之一，也是前端比较痛苦的一个技能点。因此这个作业，我们需要寻找CSS Hack并反馈到一个单独的百度首页HTML页面上（上次百度首页作业基础上），让你的百度首页适配IE以及市面上的主流浏览器（IE8+系列、Google Chrome、Firefox）。

要求：

• CSS Hack应用
• 浏览器兼容性处理(兼容Webkit内核的Chrome、Moz内核的Firefox和IE 8、9以上即可，实现了IE6、7等其它为加分项)

4.理解并完成双飞翼布局

要求：

• 理解并完成双飞翼布局(CSS浮动、定位、布局、自适应等)。

任务 4: 掌握HTML+CSS的基本核心技巧

1.开发新版极客学院首页

要求：

• 注意对极客学院首页整体的还原度，本任务还没学习JS，对于一些JS的特效不做要求，主要考察HTML和CSS
• 注意代码结构的合理性，界面的美观性
• 注意引用的资源是否规范

2.利用Bootstrap开发后台登陆页面和首页

要求：

• 利用Bootstrap开发一个后台管理系统的后台登陆页面和后台首页
• 熟悉对Bootstrap响应式框架的使用；

3.响应式的百度首页

用一个页面，把百度首页pc版和移动版通过media query技术做响应式适配，达到熟悉media query实现响应式布局的目的；可利用真实手机或者Google Chrome的模拟器，进行调试和测验。

要求：

• media query技术做响应式适配
• 利用真实手机或者Google Chrome的模拟器，进行调试和测验

4.完成初级前端面试题

本作业为开放性作业，不对页面作特别要求，HTML页面（建议，作为一名前端）、图片、word都可以。主要是总结的面试题。让大家对于前端面试和前端基本岗位要求有个基本的了解。

要求：

• 使用markdown完成。

任务 5: JavaScript入门和基础

1.将0~100分学员以10分为界，分为十段，然后计算出该生为数字几等生

将0-100分学员分已10为分界,10分为一段，然后计算出该生为数字几等生，如98分为90-100为1等生，65分为60-70为4等生。

要求：

• Switch或者ifelse等的使用
• 根据传入的值，进行运算和返回

2.用JS开发简易计算器

用JS开发简易计算器，输入 x 、y 以及操作符可以计算出数值，如函数计算器输入 4，5，* 可以返回20，输入3 ，8，+可以等于11。

3.JS找到数组中出现次数最多的字母，并给出个数和每一个所在的位置

找到对象{“a“，”x“，”b“，”d“，”m“，”a“，”k，“m”，“p”，“j”，“a”}出现最多的字母并给出个数和每一个所在的顺序。

要求：

• 做成HTML界面的形式，也可以在浏览器console打印出来

任务 6: 掌握JavaScript DOM、BOM、事件和高级技巧

1.开发完整计算器

开发带HTML页面可操作的完整计算器，根据用户的按钮操作给出正确的计算结果，至少要适配到IE8+、Chrome。

要求：

• 绑定事件务必兼容IE8+、 FireFox、Chrome

2.hao123换肤功能-开发一个顶部带可选颜色换肤的hao123网站

要求：

• 开发一个顶部带可选颜色的hao123网站
• 点击这些颜色可换肤改变网站主题，能记住用户本次点击的换肤操作，下次进入网站可直接应用到上次主题
• 可切换颜色包括顶部banner以及背景颜色等等

任务 7: 掌握jQuery使用和深入JavaScript

1.完成百度首页登陆之后完整版。

利用Jquery完成百度右侧下拉, 并注册账号登陆完成全部页面切换效果。包括换肤和下面的切换Tab.

2.极客学院官网二级菜单页面-课程库页面

利用学过的JavaScript、JQuery知识和前面学过的HTML、CSS完成极客学院二级菜单页面-[课程库]页面，并完成全部动态效果，尽量增加动画效果。

要求：

• 浏览器需兼容FireFox、Chrome、ie8+
• 课程库页面入口： http://www.jikexueyuan.com/course/

3.Jquery完成百度图片瀑布流布局。

要求：

• 利用Jquery完成百度图片完整瀑布流布局。

任务 8: 了解面向对象编程以及PHP+MySql入门

1.开发手机版本的百度新闻。

开发带后台的H5版本百度新闻，并用之前开发的bootstrap后台完善作为新闻的后台系统，并能用基础的PHP+MYSQL开发跑通后台。

要求：

• 加入meta标签开发移动端H5页面
• 搭建mysql+php开发环境，交作业的时候记得带上sql脚本+php代码
• 配合ajax 技能点: (1)后台是否可以正常的增删改查;(2)前台是否可以完整调用请求接口;(3)完成页面的渲染结果是否在手机端展示正常

任务 9: 学习NodeJS(含EcmaScript6)和移动端开发

1.开发Nodejs版本的百度新闻系统。

配置好开发环境，把之前的前端百度新闻界面拉过来，后台改成Nodejs版本，可以做成Express渲染模板形式亦可以做成rest格API形式搭载mysql,记得导出sql脚本文件。

要求：

• 安装Express或者rest框架或者Nodejs
• 利用Ajax配合请求。

任务 10: 掌握前端工业化框架

1.利用Gulp或者FIS重组百度首页

利用Gulp或者FIS重新组织你的百度首页样式和JS，然后达到工程化可编译状态。

要求：

• 安装Gulp或者FIS
• 按照框架要求编译百度首页达到性能最优状态。
• 通过本作业了解一种构建工具使用的基本原理即可（不同企业构建工具可能不一样，但原理基本一样），并学会独立查文档去学习新知识。

任务 11: 掌握CSS在工程中的变化

1.利用less或者sass改善极客学院首页CSS

要求：

• 编写Gulp或FIS脚本对Sass或者Less进行编译
• 符合性能优化标准进行压缩合并以及充分利用Less或Sass优势少写代码
• 可查看官方API进行更多的运用

2.利用less或sass编写公交站牌

要求：

• 利用less或sass编写代码制作出一个公交站牌的效果。

任务 12: 掌握JavaScript常用设计模式

1.用设计模式改善百度js代码

用简单的设计模式改写百度代码并加入注释用了什么设计模式，为什么这样写，这样写的好处。

2.总结高级前端开发工程师面试题和思维脑图

百度一下高级前端工程师面试题并总结到页面上对这些面试题有深入的理解。如果有时间可以自己利用xmind总结前端开发思维脑图。

任务 13: 熟悉版本操作工具Git、SVN等以及AngularJS、Cordova

1.搭建自己的GitHub仓库

搭建自己的GitHub仓库并将所有作业按照目录规范全部提交到Git

任务 14: 熟悉网络安全以及React、ReactNative

1.完善百度新闻PHP或Node版本安全性漏洞

要求：

• 完善百度新闻安全性漏洞，并新建文件readme.txt写好注释修改了哪些安全漏洞，写在了哪里有什么样的作用。

任务 15: Linux基础以及JS开发PC软件

1.编写管理nodejs百度新闻后台shell脚本

要求：

• 编写shell脚本管理你的nodejs百度新闻后台，配合pm2启动监测CPU占用重启PM2等
• 若Nodejs的CPU进程大于95%,则重启node服务

任务 16: 学习HTML5游戏开发准备进入毕业设计与答辩

1.开发一款小游戏

要求：

• 利用Cocos2d-JS开发一款小游戏用chrome模拟是否顺畅运行。