课程主页

本课程以前端开发工程师为愿景，旨在培养学生的web前端开发能力，前端开发行业日新月异、发展迅速，因此在学习基础知识的同时开阔视野、学会学习才是重中之重，为达此目的，利用github开源此课程。

• 巩固基础
• 开阔视野
• 学会学习

希望可以更好地激发学习兴趣、更好地熟悉开发流程、更好地适应未来岗位需要。

课程愿景

我们的目标是经过一系列前端方面课程的学习，能逐渐胜任前端开发工程师的工作要求，因此在认识课程之前，我们先来看一则招聘简章。

来自于上海鲸科信息科技有限公司的前端开发工程师招聘：

• 职位年薪：13W起，上不封顶
• 招聘人数：若干
• 职位职责：
  • 如果你热爱尖端 Web 技术，如果你是一个追求美感的细节控，Strikingly会为你提供一个大施拳脚的空间。
  • 在HTML, CSS, JavaScript 之上，你会使用 HAML、LESS、CoffeeScript、React+Flux、Angular.js来设计、开发和实现前端功能。
  • 同时你也可以尽情发挥创造的热情，用美感和细节打造极致的用户体验。
• 职位描述：
  • 参与公司项目中的Web前端功能设计、开发和实现
  • 使用 HTML5、CSS3、OOP JavaScript、Angular.js、Knockout.js 等最尖端 Web 技术开发 PC/Mobile 端应用
  • 探索应用前端领域的新技术与新架构
  • 与后端开发人员一起研讨技术实现方案，制定服务接口
  • 与 UI 设计人员、后端开发人员等配合，高质量完成 Web 前端开发工作
  • 快速学习成长，并迅速适应创业团队氛围
• 职位要求：
  • 对网站有优秀的设计感
  • 对UI/UX有深入理解
  • 熟悉 HTML5/CSS3 的标准并跨浏览器和平台的兼容性有深入理解
  • 精通object-oriented JavaScript, jQuery, DOM manipulation
  • 能按照产品模型或框架有效进行 HTML/CSS/JavaScript 开发
  • 能迅速熟悉新的前段数据库和架构
  • 理解 Web 标准, 熟悉 Git
  • 相关专业本科或以上学历，或者同等专业经验
  • 熟练的英语沟通能力
• 加分项：
  • 熟悉如何优化前端代码，使其更有效率并确保兼容性
  • 熟悉任意 MV* 框架（Angular.js/Knockout.js/ Backbone/Ember等）
  • 熟悉任何一门后端语言经验（Node.js/Ruby/Python/Php等）
  • 移动 Web 开发经验
  • 深刻理解 Web 标准, 熟练解决主流浏览器及不同版本的兼容性问题（IE、Chrome、Firefox)

我们可以看到，企业对岗位的需求非常明确，这个就是我么未来一年半的学习目标。我们将会利用《界面设计》、《前端开发》、《交互开发》、《交互开发进阶》等几门课，逐步的走进前端开发的殿堂。

利用《界面设计》帮您成为细节控，获得优秀网页的设计感，深入理解UI、UX。

利用《前端开发》帮您学习html+css， 熟悉 HTML5/CSS3 的标准并跨浏览器和平台的兼容性有深入理解， 能按照产品模型或框架有效进行 HTML/CSS/JavaScript 开发。

利用《交互开发》帮您学习原生javascript语言，逐步掌握object-oriented JavaScript, DOM manipulation，并同时学习jQuery，助力的您的交互开发。

利用《交互开发进阶》帮您熟悉移动web开发，了解Node.js、Angular.js、响应式设计等。

课程简介

《前端开发》的主要目标是让您学会使用html+css实现符合web标准、兼容主流浏览器的前端页面。

课程主要内容包括：

• web标准和浏览器
• html5基础语法、 html5基础标签
• css3的基础语法、css3实现样式与布局
• 浏览器兼容性处理

课程讲义

2017级讲义

1. 课程概述
2. Web概述
3. HTML基础
4. HTML链接
5. HTML列表
6. HTML节点元素、分组元素
7. CSS初步
8. CSS选择器
9. CSS盒模型
10. CSS边框
11. CSS背景
12. 浮动与定位
13. 阶段案例
14. 表单
15. CSS3高级属性

2016级讲义

1. 课程概述
2. web概述
3. HTML概述
4. HTML元素--html5元素周期表
5. HTML属性
6. HTML文档元数据和脚本元素
7. HTML节点元素
8. HTML文本元素
9. HTML图像元素
10. HTML链接
11. HTML列表
12. HTML表格--table实验
13. CSS初步
14. CSS选择器
15. CSS背景
16. CSS边框--border实验--border实验02
17. CSS盒模型
18. 表单
19. 综合案例1
20. 综合案例2
21. 综合案例2-服务部分
22. 综合案例2-案例部分
23. Audio元素

#######################

1. 课程概述
2. JS使用方式
3. JS语言基础
4. JS运算符和表达式
5. JS语言基础练习课
6. JS数组
7. JS时间
8. JS函数
9. 作用域与闭包
10. 事件
11. 事件对象
12. 事件练习课
13. 事件练习课2
14. 面向对象编程
15. 面向对象编程2
16. DOM详解
17. DOM详解2-Element对象
18. BOM详解

课程资源

0. 自制在线html编辑器。
1. 著名常用web学习网站w3school，入门必备。
2. html标签参考手册, html 参考手册官方英文, html5元素周期表
3. css3手册在线版，css3手册下载，css手册本地版
4. 史上最性感的编辑器-sublimetext, 安装步骤 , sublime text常用插件集成版 百度网盘下载, 学习资源。
5. GithubDesktop安装，首先安装.net Framework 4.5, 其次解压缩安装Github Desktop百度网盘下载。
6. Github Desktop使用教程, 廖雪峰Git教程
7. 网站制作视频教程， 请大家帮忙整理网络系列学习教程。
8. 采色软件colorspro软件下载，截屏软件FSCapture网页下载，网盘下载，密码：7lpr。
9. 飞速编码的极客工具，手指爽、眼睛爽的开发工具HBuilder。
10. 一个不错的截图、编辑软件picpick,支持截取整个网页、取色、量尺等。
11. 简洁、美观的命令行神奇cmder官方网站, 本课资源下载
12. 一个不错的布局学习资源《学习CSS布局》！！
13. colreDraw2017以及colreDraw注册机下载下载 密码：f4cf
14. CSS3||HTML5资源教程链接
15. DedeCMS官网,DedeCMS新手视频教程,DedeCMS模板，个别会员模板 提取码：aknc

学友链接

软件161

1	2	3	4	5
01姚宇飞	02朱学成	03岑灏	04朱晨煜	05宋治民
06潘雪	07钱伟杰	08姜凯	09陆文涛	10朱雨婷
11吕涵之	12沈丹青	13钱都	15杜任杰
16叶信哲	17蒋轶聪	18张虓敏	19陈黎铭	20何桂清
21余银超	22劳锦锞	23周渠成	24徐炜昊
26盛绍斌	27王海波	28郑涛	29郑可琪	30潘云锋
31陈汇	33蔡浩然	34冯盛鹏	35张南
36黄小翠	37曾思思	38李雄俊	39苏彬彬	40黄鑫鑫
42姜智孟	44白炳钿	45胡利明	46张益桐	47许桃美

移动161

1	2	3	4	5
01朱浩然	02张振栋	03傅禄翔	04严建淮	05徐凯楠
06李康康	07陈克行	08韩浩浩	09邬远峰	10徐晗
11施希杰	12章驰恒	13夏彬慧	14张浩东	15潘承彬
16袁健苗	17王挺	18周伊翔	19陈波	20邵家栋
21屠鑫波	22包捷	23屠林锋	24杨熔倪	25娄文依
26王志豪	27郑檬涛	28丁磊	29陈如谊	31兰庆锋
32王锟	33朱善鸿	34陈耀泽	35黄书琛	36季天浩
37王成铠	38娄明磊	39张桦	40杨钦沨	41吴义凯
42鄢滟麟	43卢孙仲	44郑文汉	45杨志谦	46王昭锦

历届学友

软件151

01徐浩鹏 02李明豪 04尹飞燕 05全凯俊 06马驰傲 07张铸涛 08许丹妮 09陈浩 10杨登欢

12任军 13章宇凯 14潘佳琦 15裘家威 16李玲巧 17郑天阳 18范莎莎 19王永琪 21白逢喜

22夏远征 23李传访 24曾丽丽 25陈王超 26林群栋 27王瑶 28王浩 29叶圣辉 30阮盛威

31徐道聪 32高启中 34姚文辉 35倪浩 36鲁好德 37张天一 38李彦东 39刘晓辉 41徐鹏

软件152

01余家宝 02郑柯柯 03单超艺 04沈智婷 05赵芳燕 06周陈 07戴王辉 08方搏 09陈猛

10周冰婕 11陈章文 12胡森方 13廖定旺 14沈锋 16唐宁 18张家林 20卫银宇 21王翔宇

22瞿骁皓 23江俊杰 24郑爱萍 25郑大强 27黄荣基 29谢秀提 30毛杰 31王志斌 32吴昊

33赵凯峰 34张奎骁 35郑钟楠 36陈兴博 37杨虹 38刘毅梅 39王丽娜 40童伟键 41伍吉康

课程活动

1. 注册github账号，新建用户名.github.io仓库，确保可以在线浏览。
2. fork课程官方主页, 欢迎watch、star。修改readme.md文件，然后Pull Request回主项目，欢迎大家提交各种更改。
3. 请在Issues里的作业贴提交作业，作业贴会定时关闭(一般一周左右关闭，关闭之后不能再提交作业）。 欢迎大家在Issues里就课程进行讨论、提问。
4. 作业贴将于下一次课上课之前关闭，请大家在课间完成作业提交，请大家保持作业批改记录。
5. 请大家规范Issues发帖行为，官方发布分为【作业贴】、【免考贴】、【悬赏贴】、【资源帖】、【讨论帖】等。同学发帖分为【求助帖】、【分享帖】、【讨论帖】等。请大家发帖之前选择分类命名Issue，文明用语，规范行为，请大家踊跃发言、可适量灌水，共同创造轻松愉快、严谨进步的网络学习行为。
6. 课程开展“我学，我能”知识分享主题活动，请大家预先学习某个知识点，然后把学习的结果分享给大家。

成绩列表

1. 总评成绩=平时成绩0.3+期中成绩0.2+期末成绩0.5
2. 请大家踊跃参加免考活动，免考之后，期末考试成绩为100分左右，没有获得免考的同学，可以获得相应的平时成绩奖励。
3. 平时成绩由作业积分之和，再加上github上获得积分组成。
4. 成绩列表软件161 成绩列表移动161

加分细则

1. 每次作业视工作量分值不等，从5分到10分，每次作业贴会准时关闭，不再接受补交。
2. 每次有意义的Pull Request加10分，欢迎大家提交Pull Request。
3. 每次有意义Issues讨论加5分，欢迎大家创建Issues，回答Issues。
4. 请大家密切关注各【悬赏贴】、【免考贴】，会有分值不等的海量分数相送。
5. 待续

加分快讯

软件161

1. 11吕涵之、18张虓敏、31陈汇在完成文字页面大小作业中表现优秀，平时分各加5分。
2. 02朱学成、27王海波、30潘云锋第一次作业未交。平时分各减5分。
3. 11吕涵之、15杜任杰、16叶信哲、17蒋轶聪在换肤效果作业中表现优秀，平时分各加5分。
4. 18张虓敏、19陈黎铭、31陈汇、37曾思思、38李雄俊在换肤效果作业中表现优秀，平时分各加5分。
5. 02朱学成、09陆文涛、24徐炜昊、27王海波、28郑涛、30潘云锋第二次作业未交，平时分各减5分。
6. 11吕涵之、18张虓敏在随机效果背景作业中表现优秀，平时分各加5分。
7. 02朱学成、22劳锦锞 、27王海波、30潘云锋第三次作业未交，平时分各减5分。
8. 10朱雨婷、11吕涵之、17蒋轶聪、18张虓敏在完成单元格变色作业中表现优秀，平时分各加5分。
9. 23周渠成、31陈汇、39苏彬彬在完成单元格变色作业中表现优秀，平时分各加5分。
10. 02朱学成、05宋治民、24徐炜昊、27王海波、30潘云锋第四次作业未交，平时分各减5分
11. 10朱雨婷、11吕涵之、12沈丹青、18张虓敏在完成抽奖小程序作业中表现优秀，平时分各加5分。
12. 26盛绍斌、29郑可琪、31陈汇、36苏彬彬在完成抽奖小程序作业中表现优秀，平时分各加5分。
13. 37曾思思、42姜智孟、46张益桐、47许桃美在完成抽奖小程序作业中表现优秀，平时分各加5分。
14. 02朱学成、03岑灏 、04朱晨煜、05宋治民、08姜凯第五次作业未交，平时分各减5分。
15. 09陆文涛、15杜任杰、27王海波、30潘云锋、45胡利明第五次作业未交，平时分各减5分。
16. 10朱雨婷、11吕涵之、18张虓敏、13钱都在完成模拟时钟作业中表现优秀，平时分各加5分。
17. 29郑可琪、20何桂清在完成模拟时钟作业中表现优秀，平时分各加5分。
18. 02朱学成、03岑灏 、04朱晨煜、05宋治民、07钱伟杰第六次作业未交，平时分各减5分。
19. 08姜凯、09陆文涛、15杜任杰、23周渠成、30潘云锋、45胡利明第六次作业未交，平时分各减5分。
20. 31陈汇做数组概述、定义、创建的分享，平时分加20分。
21. 38李雄俊做数组操作的分享，平时分加20分。
22. 11吕涵之做Date对象使用的分享，平时分加20分。
23. 05宋治民、12沈丹青、31陈汇、36黄小翠课堂回答问题，平时分各加5分。
24. 17蒋轶聪建立DOM的addEventListener函数陷阱讨论帖，平时分加5分。
25. 12沈丹青、17蒋轶聪、18张虓敏、31陈汇、36黄小翠、37曾思思、38李雄俊课堂表现好，平时分各加5分。
26. 12沈丹青课堂分享鼠标事件，平时分加20分。
27. 18张虓敏课堂分享键盘事件、解决鼠标滚轮事件的问题，平时分加30分。
28. 31陈汇解决放大镜效果问题，平时分加5分。

移动161

1. 07陈克行、10徐晗、19陈波、24杨熔倪、27王志豪在首堂课中表现优秀，平时分各加20分。
2. 32王锟、33朱善鸿、37王成铠、42鄢滟麟、43卢孙仲在首堂课中表现优秀，平时分各加20分。
3. 45杨志谦平时分加16分。
4. 04严建淮、07陈克行、11施希杰、29丁磊、30陈如谊第一次作业未交，平时分各减5分。
5. 05徐凯楠、08韩浩浩、36季天浩平时分各加10分。
6. 37王成铠、43卢孙仲通过做教程、试讲课等形式进行知识分享，平时分各加20分。
7. 20邵家栋在抽奖页面中荣获一等奖，平时分加20分。
8. 13夏彬慧、19陈波在抽奖页面中荣获二等奖，平时分各加10分。
9. 32王锟、37王成铠、41吴义凯在抽奖页面中荣获三等奖，平时分各加5分。
10. 15潘承彬、18周伊翔、32王锟、38娄明类课堂上回答不出问题，平时分各减10分。
11. 18周伊翔、30陈如谊、32王锟、36季天浩第二次作业未交，平时分各减5分。
12. 42鄢滟麟、15潘承彬通过做教程、试讲课等形式进行知识分享，平时分各加20分。
13. 2张振栋、22包捷、31兰庆锋、19陈波、05徐凯楠回答问题，平时分各加10分。
14. 20邵家栋、24杨熔倪进行知识分享和交流，平成分各加20分。

历史纪录

软件161

1. 01姚宇飞 代我讲解个github desktop软件的使用，平时成绩加10分。
2. 12沈丹青 发表有意义的Issues，引领潮流，平时成绩加10分。
3. 11吕涵之、31陈汇参与Issues讨论，平时成绩各加5分。
4. 20何桂清发表发表有意义的Issues，平时成绩加10分。
5. 19陈黎铭参与帖子讨论，平时成绩加5分。
6. 18张虓敏发表发表有意义的Issues，平时成绩加10分。
7. 19陈黎铭、31陈汇参与帖子讨论，平时成绩加5分。
8. 11吕涵之整理sublime text和emmet的使用教程，平时成绩加40分。
9. 11吕涵之回答帖子，平时成绩5分。
10. 12沈丹青建立分享帖Issues，平时成绩加20分。
11. 18张虓敏、31陈汇、36黄小翠分享sublime text使用教程平时成绩加20分。
12. 11吕涵之勤奋学习、观察学习，建立问题贴Issues,平时成绩加10分。
13. 31陈汇回答帖子，平时成绩加5分。
14. 31陈汇建立问题贴Issues，平时成绩加10分。
15. 11吕涵之、18张虓敏在知识分享活动中，通过做教程、试讲课等形式进行知识分享，平时成绩加30分！
16. 11吕涵之就background-size进行讨论，平时成绩加5分。
17. 18张虓敏、31陈汇频繁参与悬赏贴，平时成绩各加60分。
18. 38李雄俊期中考试表现出色，免考，免考，请再接再厉，其他同学也加油呀！
19. 11吕涵之参与讨论，平时成绩加10分。
20. 02朱学成、30潘云峰、40黄鑫鑫旷课平时成绩各扣50分。
21. 11吕涵之频繁参与分享帖、求助帖、讨论帖、悬赏贴等，平时成绩加50分。
22. 18张虓敏频繁参与分享帖、求助帖、讨论帖、悬赏贴等，平时成绩加40分。
23. 31陈汇频繁参与分享帖、求助帖、讨论帖、悬赏贴等，平时成绩加30分。
24. 28郑涛参与悬赏贴，平时成绩加10分。
25. 17蒋轶聪参与讨论，平时成绩加10分。
26. 11吕涵之、18张虓敏、31陈汇三个同学免考。
27. 38李雄俊帮助进行平时成绩登记，平时成绩加20分。
28. 12沈丹青参与课程资源分享，平时成绩加20分。
29. 37曾思思和47许桃美参加悬赏贴，平时成绩加20分。

移动161

1. 10徐晗 发表有意义的Issues，引领潮流，平时成绩加10分。
2. 42鄢滟麟 发表【求助帖】Issues，平时成绩加10分。
3. 10徐晗 发表有意义的Issues，讨论base，平时成绩加10分。
4. 42鄢滟麟回答帖子，平时成绩加5分。
5. 10徐晗在知识分享活动中，通过做教程、试讲课等形式进行知识分享，引领潮流，免考免考，祝贺！
6. 42鄢滟麟在知识分享活动中，通过做教程、试讲课等形式进行知识分享，讲的非常好，平时成绩加30分。
7. 43卢孙仲发表有意义的帖子Issues，讨论背景相关属性的使用，平时成绩加10分。
8. 46王昭锦、23屠林锋、10徐晗、42鄢滟麟就background-size进行讨论，平时成绩各加5分。
9. 10徐晗发表有意义的帖子Issues，讨论列表居中问题，平时成绩加10分。
10. 42鄢滟麟就列表居中问题进行讨论，平时成绩各加5分。
11. 29丁磊、38号娄明磊缺席课程，平时成绩扣30分。
12. 02张振栋、03傅禄祥课堂表现不好，屡次提醒不注意，平时成绩扣80分。
13. 34陈耀泽、42鄢滟麟期中考试表现出色，免考，免考，请再接再厉，其他同学也加油呀！
14. 43卢孙仲就git分支和网页浏览新建分享帖，并进行知识分享，平时成绩加50分。
15. 10徐晗参与讨论，平时成绩加10分。
16. 10徐晗多次参与讨论贴、悬赏贴，平时成绩加60分。
17. 42鄢滟麟多次参与讨论帖、悬赏贴、免考贴，平时成绩加70分。
18. 43卢孙仲多次参与讨论帖、悬赏贴、免考贴等，平时成绩加60分。
19. 19陈波参与求助帖，平时成绩加10分。
20. 23屠林锋多次参与求助帖、讨论帖、悬赏贴、免考贴等，平时成绩加40分。
21. 46王昭锦参与求助帖，平时成绩加10分。
22. 38娄明磊多次参与求助帖、讨论帖，平时成绩加30分。
23. 24杨熔倪多次参与求助帖、讨论帖、悬赏贴，平时成绩加30分。
24. 31兰庆锋、33朱善鸿参与免考贴，平时成绩各加20分。
25. 45杨志谦多次参与求助帖、讨论帖、悬赏贴等，平时成绩加30分。
26. 21屠鑫波多次参与悬赏贴，平时成绩加30分。
27. 20邵家栋多次参与悬赏贴，平时成绩加30分。
28. 13夏彬慧、14张浩东平时成绩10分。
29. 37王成铠多次参与求助帖、讨论贴、悬赏贴，平时成绩加30分。
30. 02张振栋参考分享，平时成绩加20分。
31. 45杨志谦多次参与课程讨论，平时成绩加30分。
32. 21屠鑫波、23屠林峰等多次参与课程讨论，平时成绩加30分。
33. 20邵家栋参与课程讨论，平时成绩加20分。

软件151

1. 24曾丽丽 成功提交更改，获得悬赏分数20分，鼓掌庆贺吧。
2. 27王瑶 发起很有价值的Issues，平时成绩加5分。
3. 09陈浩分享取色软件colorspro，喜欢的移步下载。平时成绩加5分，鼓掌庆贺！！
4. 24曾丽丽Issuse里提问问题颇有深度， 31徐道聪Github使用提出问题，平时成绩各加5分。
5. 27号王瑶在悬赏贴提交信息，平时成绩加5分。
6. 31徐道聪Github使用提出两个问题,问题，平时成绩各加5分。
7. 27号王瑶Issues提交问题，平时成绩加10分。
8. 27号王瑶王老师讲得很好，免考！！
9. 继续呀，海量分数等你拿。

软件152

1. 37杨虹提问问题，平时成绩加5分，同学们动起来，go! go!
2. 36陈兴博创建资源分享帖，平时成绩加5分，这就对了，yeah！
3. 24郑爱萍提问问题, 平时成绩加5分。大家一起来盖楼！！
4. 03单超艺、10周冰婕创建分享帖，平时成绩各加5分。
5. 30毛杰就Github Desktop使用问题进行提问，平时成绩加5分，Fighting，少年！
6. 10周冰婕参与Issues讨论，回答基本正确，平时成绩加5分，大家积极讨论吧。
7. 10周冰婕创建Pull Request成功，领导悬赏分20分，平时成绩加20分。大家加油。
8. 01余家宝创建提问，平时成绩加5分，03单超艺创建Issues，平时成绩加5分。
9. 34张奎骁、06周陈在悬赏贴发帖，平时成绩个加10分。
10. 27黄荣基在Issues提问问题，平时成绩加5分。
11. 09陈猛在Issues提问问题，平时成绩加5分。
12. 23江俊杰江老师讲解的非常好，免考！！
13. come on!!!!

知识分享

本活动自愿参与，请同学预先学习某个知识点，然后上课的时候当老师把学习的成果讲解给大家，目的有二，一是鼓励自学，二是锻炼胆量。

软件161

1. 吕涵之 ✔️
2. 张虓敏 ✔️

移动161

1. 徐晗 ✔️
2. 鄢滟麟 ✔️
3. 卢孙仲 ✔️

历届学友

软件151

1. 王瑶
2. 马驰傲
3. 张天一
4. 王浩
5. 白逢喜
6. 李明豪
7. 徐道聪
8. 王永琪
9. 徐浩鹏
10. 姚文辉
11. 潘佳琦
12. 倪浩
13. 鲁好德
14. 许丹妮
15. 叶圣辉
16. 张铸涛
17. 等你

软件152

1. 江俊杰
2. 王志斌
3. 陈猛
4. 余家宝
5. 吴昊
6. 赵凯峰
7. 张奎骁
8. 郑柯柯
9. 陈兴博
10. 谢秀提
11. 方搏
12. 陈章文
13. 周陈
14. 周冰婕
15. 单超艺
16. 郑爱萍
17. 王丽娜
18. 杨虹
19. 黄荣基
20. 张家林
21. 沈锋
22. 等你