| 课程 | 前端开发基础 | |
| 课程代码 | ||
| 课程性质 | 专业限制选修 | |
| 学分 | 2 | |
| 教学周期 | 1 - 18 | |
| 周学时 | 2 | |
| 总学时 | 36 = 18 + 18 | |
| 年级专业 | 2024软件工程 | |
| 行政班级 | 1班 | 2班 |
| 教学班级 | 1班 | 2班 |
| 选修人数 | 44 | 45 |
| 实训机房 | 格物4- | 格物4- |
| 教学日 | ||
| 时间 | ||
| 档案编号 | 101-1 | 101-2 |
平时成绩 40%：作业、考勤和表现；表现由班级考勤、班级作业平均和个人积分组成
60%
作业
30%
考勤
10%
表现
期末成绩 60%
80%
项目
10%
报告
10%
答辩
加成 5%：为了鼓励而额外增加的成绩奖励；包括：优秀作业、全勤
5%
加成
作业应在规定的时间内，按照要求完成
个人作业独立完成，禁止抄袭；小组作业合理分工，共同完成
作业缺交、不及格、无效等累计达到或超过作业总数1/3，取消课程考试资格
按照教学管理规定，作业缺交的，有1次补交机会
存在抄袭情况的，双方当次作业记0分，取消补交机会
第16教学周统计作业情况
优秀作业（综合评分90+）有加成奖励
请假应课前提供辅导员签字且加盖学院公章的正规、纸质、无涂改假条
紧急情况下，允许先口头请假；正式假条应在下一个教学日提供，逾期不予采纳
社团、班级等第2课堂活动及其它活动，如果与第1课堂冲突的，不得违规请假占用第1课堂
缺勤、请假、早退等累计达到或超过总次数的1/3，取消课程考试资格
第16教学周统计考勤情况
全勤（100%出勤）有加成奖励
第二十八条 学生某课程旷课或请假的课时数累计达到或超过该门课程学时数三分之一的，不能参加该门课程考试，该门课程必须重修。
学生平时欠交作业,缺做实验的次数分别达到或超过总次数三分之一，或作业、实验报告不及格的，不能参加该门课程考试:必须补做、重做作业和实验，成绩及格后，方可参加该门课程的考试。
第六十七条 请假的规定具体如下:学生请病假或事假，须到学院(直属系)办公室填写请假呈批表，办理请假手续，病假要附医院证明。学生请假 1 天，由辅
导员审批:学生请假 2-3 天，学院 (直属系)办公室主任审批请假 4-10 天，由分管教学院长 (系主任) 审批，报学生处、教务处备案。请假超过 10
天以上的，提交分管学生工作校领导审批，并按上述程序备案。学生获得批假后，均需到任课教师处备案。
除了学校决定的需要学生请假参加的重大活动外，任何学生不得以参加活动为由请假,各管理部门不得以组织各种活动为由批准学生缺课参加活动。
| 教学周 | 内容 |
|---|---|
| 专题：集成开发环境 IDE
1. 编辑器： Vs Code 2. 浏览器： Chrome 专题：万维网 WWW 1. Web 2. Project - Html、CSS、JavaScript 3. CSS - syntax、usage、box model、feature 专题：标签 Tags 1. Navigation - <a>、<nav> 2. List - <ol> <ul> <dl> 关注： 1. 结构、样式和逻辑三分离 2. 没有规矩，不成方圆 3. 样式初始化 拓展： 1. Snipaste 2. <iframe> |
|
| 实操：
1. Hello world 2. 页面跳转 3 友情链接 4. 版权信息 作业：集成开发环境 |
|
| 专题：标签 Tags
1. Table - <table>、<tr>、<th>、<td> 2. Image - <img>、<figure> 3. Audio - <audio> 4. Video - <video> 关注： 1. 与时俱进 2. 懒加载 3. 网络安全 拓展： 1. border |
|
| 实操：
1. 线框表格、三线表格、斑马纹表格 2. 头像 3. 背景音乐 4. 视频开场秀 作业：网站设计 |
|
| 专题：表单 Form
1. Form - <form> 2. Input - <input> 3. Label - <label> 4. Textarea - <textarea> 5. Button - <button> 关注： 1. 团队合作 拓展： 1. <input> - file |
|
| 实操：
1. 用户注册 2. 用户登录 3. 留言板 作业：表单设计 |
|
| 专题：图文
1. Selector 2. Background 3. Float 4. Text - columns 关注： 1. 条条大路通罗马 2. 文化自信 3. 站着巨人的肩膀上 拓展： 1. Iconfont 2. GoogleFonts |
|
| 实操：
1. 背景图 2. 首字下沉 3. 图文混排 4. 打点溢出 5. 分栏* 作业：排版设计 |
|
| 专题：定位 Position
1. Relative 2. Absolute 3. Fixed 4. Sticky 关注： 1. 父相子绝 2. 文化自信 3. 站着巨人的肩膀上 |
|
| 实操：
1. 购物车 2. 头像 3. 返回顶部 4. 吸顶导航 作业：定位设计 |
|
| 专题：布局 Layout
1. Flex 2. Grid 3. CSS function 关注： 1. 响应式开发 2. 站着巨人的肩膀上 拓展： 1. Isotope |
|
| 实操：
1. 常见布局 2. 时间轴 3. 九宫格 4. 异构布局 5. 栈布局 6. 全站布局* 作业：布局设计 |
|
| 专题：动画 Animation
1. Transition 2. Animation 关注： 1. 解放思想、创意无限 2. 站着巨人的肩膀上 拓展： 1. Anime 2. ScrollReveal 3. GSAP |
|
| 实操：
1. :hover动画 2. :focus动画 3. :checked动画 4. 头像 5. 进度条 作业：动画设计 |
|
| 专题：变换 Transform
1. Translate 2. Rotate 3. Scale 4. Skew 5. CSS variable 关注： 1. 解放思想、创意无限 2. 站着巨人的肩膀上 拓展： 1. Vanilla |
|
| 实操：
1. 按钮 2. 呼吸灯 3. 卡片 4. 画廊* 5. 魔方* 作业：变换设计 |
|
| 专题：JavaScript
1. JavaScript 2. DOM 3. BOM |
|
| 结业：
答辩：小组答辩 讲评：项目讲评 关注：学无止境 其它：完善项目；提交项目和实验报告 |
考核内容
. 开发设计个人简历/个人网站；内容自定
. 建议使用真实资料和信息，后期会挂到网上，作为求职的电子简历
考核方式
. 小组作业；答辩验收
. 每组4-6人；分组名单
. 答辩时长 5-10分钟
. 请提前调试好项目和PPT等答辩材料
答辩过程
. 组长：介绍小组成员和分工
. 讲述人：就PPT介绍项目开发过程
. 示范人：示范项目，介绍功能、创新点
. 答辩人：抽取随机问题并回答，其他小组成员可以补充，但不能代为回答
资料提交
. 只交1份，由组长完成
. 提交项目：如果没有代码仓库，项目整体压缩后提交；使用阿拉伯数字，按组号命名，如第1组.rar；如果有代码仓库，请在实验报告中说明
. 提交小组实验报告：按照 实验模板 要求，导出为PDF再提交，使用阿拉伯数字，按组号命名，如第1组.pdf
. 电子版：实验项目和实验报告统一提交到学习通对应作业
. 纸质版：实验报告双面打印后，侧边打钉，由学委检查、按组号整理后提交到格物 4-208 留档
注意事项
. 小组成绩即为个人成绩
. 禁止抄袭；一经发现，小组成绩记0分
. 期末考核验收，相关材料，包括作业、实验项目和实验报告没有补交机会
. 资料缺失或未按要求提交，视为无效，相应部分的成绩为0
建议携带个人笔记本电脑参加授课
教学相关的任何建议，可以随时反馈
课后有答疑需求的同学，正课时间可以移步格物4-208