hi,小慕
课程

中国大学MOOC,为你提供一流的大学教育

hi,小mooc
Web前端开发
第8次开课
开课时间: 2022年02月25日 ~ 2022年06月30日
学时安排: 3-5小时每周
当前开课已结束 已有 21033 人参加
老师已关闭该学期,无法查看
课程详情
课程评价(1314)
spContent=Web前端开发是创建网页或APP界面呈现给用户的过程。Web前端开发技术主要包括HTML,CSS及JavaScript、JQuery以及衍生出来的各种技术、框架。本课程由高校与企业联合打造,百度前端技术学院做技术支持,将坚实的基础、实用的案例以及企业级的应用贯通交融,可以作为Web前端开发入门课程。 (注:课程未经授权不允许任何形式转载,谢谢!)
Web前端开发是创建网页或APP界面呈现给用户的过程。Web前端开发技术主要包括HTML,CSS及JavaScript、JQuery以及衍生出来的各种技术、框架。本课程由高校与企业联合打造,百度前端技术学院做技术支持,将坚实的基础、实用的案例以及企业级的应用贯通交融,可以作为Web前端开发入门课程。 (注:课程未经授权不允许任何形式转载,谢谢!)
—— 课程团队
课程概述

(注:课程视频及资料未经授权不允许任何形式转载,谢谢!)

Web系统就是基于网站形式的具有一定功能的系统,例如新浪、淘宝、携程等。这些系统中以网页形式呈现给用户的部分,就是前端。随着Web系统的普遍应用,包括移动端APP的快速发展,“Web前端开发已经成为近些年最为重要的技术之一,人才需求量巨大。本门课程将介绍Web系统前端开发的核心技术。

课程内容涵盖Web系统前端开发技术的HTML5CSS3JS、JQuery、Bootstrap等组成部分,其中HTML决定网页的结构,CSS决定网页的样式,JS决定网页的交互。课程采用其最新技术标准与应用。

课程以校企联合主讲的形式,两位主讲教师分别来自于北京林业大学与达内时代科技集团,更好地融合了学院派的理论与企业级的应用,让课程深入浅出的由基础过渡到实际应用。

课程由百度前端技术学院负责人提供技术支持,在课程最后将针对未来的学习路线与前端工程师需要具备技能与素质等问题进行讲解。

课程顾问团队包括三位教师,以及助理研究生一名,将对课程内容、教学、练习、答疑、考试、评价等环节进行全方位支持与服务。

        课程包括知识点、知识型案例、综合案例与企业实际案例,可支持两种主线进行学习,一种是以知识点为主,循序渐进的方式;一种案例式教学,课程中所有知识点均内嵌于案例中,可以由案例快速入门,带动知识点系统学习。在第二种方式下,也可以将部分知识点作为SPOC中,课下学习的部分。所有案例的源代码均可以在线下载。

        课程知识点按照难易程度,分为两个等级,支持两种不同基础的学习。例如零基础的同学,建议从“Web前端开发概论部分开始学习,有一定基础的同学,可以直接进入HTML部分学习,从而可以有足够学时延伸到JQueryHTML5部分。




授课目标
  1. 掌握Web前端开发相关概念、流程、工具、思想

  2. 掌握HTML5

  3. 掌握CSS3

  4. 掌握JavaScript

  5. 掌握常见前端库与框架

课程大纲

1. 概论

1-1 Web前端开发概述

1-2 网站与网页

1-3 Web前端开发技术

扩展(动画):浏览器如何渲染网页?服务器的作用?

本课程所有PPT请在这里下载

1. 概论 单元测试

2. HTML基础

2-1 HTML概述

2-2 HTML文件结构

2-3 HTML标签(I) h1~h6、p、br、pre、span、hr

2-4 HTML标签(II) a

2-5 HTML标签(III) img

2-6 HTML标签(IV) div、ul、ol 、table

2-7 HTML标签(V) form、input、select、textarea

Sublime Text的操作(基本环境)

Sublime Text的操作(HTML)

2-8 Web语义化 em strong dl dt dp

2. HTML基础 单元测验

2. HTML基础 单元作业

3. CSS样式

3-1 CSS概述

3-2 CSS添加方法

3-3 CSS选择器

3-4 CSS样式(I) 文字样式

3-5 CSS样式(II) 背景、超链接样式

3-6 CSS样式(III) 列表 表格样式

Sublime Text的基本操作(CSS)

3. CSS样式 单元作业

3. CSS样式 单元测验

4. CSS布局与定位

4-1 布局与定位概述

4-2 盒子模型(I)

4-3 盒子模型(II)

4-4 CSS定位机制概述

4-5 文档流定位

4-6 浮动定位

4-7 层定位

网格布局

弹性盒子布局

4. CSS定位与布局 单元作业

4. CSS定位与布局 单元测验

5. CSS3

5-1 圆角边框与阴影

5-2 文字与文本

5-3 2D变换

5-4 过渡与动画

5-5 3D变换

综合案例

5. CSS3 单元测验

6. JavaScript基础

6-1 概述与基础语法

6-2 变量

6-3 数据类型

6-4 运算符与表达式

6-5 函数

6-6 分支结构

6-7 循环结构

6-8 数组

6-9 数组API函数

6-10 DOM查找

6-11 DOM修改

6-12 DOM添加

6-13 BOM

综合案例:魔方

6. Javascript 单元测试

6 Javascript 单元作业

7. JQuery & HTML5 & Bootstrap

7-1 JQuery概述&工厂函数(扩展)

7-2 JQuery增删改查(扩展)

7-3 JQuery事件(扩展)

7-5 HTML5

7-4 响应式布局&Bootstrap

7. HTML5 单元测验

8. 课程综合案例

8-1 网页布局与初始化(整个案例源代码在这里下载)

8-2 网页顶部、导航栏

8-3 网页产品内容、搜索功能

8-4 页面服务、售后服务

8-5 网页底部、页面插件引用

8-6 返回顶部、吸顶灯功能

9. 企业前端最新技术需求与建议学习路线(前沿扩展)

企业前端最新技术需求与建议学习路线

展开全部
预备知识

计算机基础

证书要求

为积极响应国家低碳环保政策, 2021年秋季学期开始,中国大学MOOC平台将取消纸质版的认证证书,仅提供电子版的认证证书服务,证书申请方式和流程不变。

 

电子版认证证书支持查询验证,可通过扫描证书上的二维码进行有效性查询,或者访问 https://www.icourse163.org/verify,通过证书编号进行查询。学生可在“个人中心-证书-查看证书”页面自行下载、打印电子版认证证书。

 

完成课程教学内容学习和考核,成绩达到课程考核标准的学生(每门课程的考核标准不同,详见课程内的评分标准),具备申请认证证书资格,可在证书申请开放期间(以申请页面显示的时间为准),完成在线付费申请。

 

认证证书申请注意事项:

1. 根据国家相关法律法规要求,认证证书申请时要求进行实名认证,请保证所提交的实名认证信息真实完整有效。

2. 完成实名认证并支付后,系统将自动生成并发送电子版认证证书。电子版认证证书生成后不支持退费。


参考资料
  1. MDN文档https://developer.mozilla.org/zh-CN/

  2. 课程配套教材。《Web前端开发》.孙俏,祖明,王新阳.高等教育出版社.2021年8月.

    教材配套资源PPT等资源可扫码下载,知识点也以短视频方式呈现,可以扫码观看。



常见问题
  1. Q :  什么是Web前端开发?

    A :  “Web前端开发”起源于“网站设计”,早期Web技术下,静态网站较多,网站前端、后端界限模糊,网站设计主要指设计与制作网站中网页的过程。随着技术发展,很多系统由网站形式呈现,前端就是用户接触到的界面,后端就是对数据进行存取和处理的部分。这时就逐步细分出web前端开发了。

  2. Q :  没有学过编程,可以学习这门课程吗?

    A :  可以的。Web前端开发技术3个核心的构成是:HTML、CSS、JavaScript。前两个部分的程序设计不涉及结构化、面向对象程序设计思想,JavaScript部分则涉及到这些,所以HTML和CSS相对而言容易掌握。而JavaScript部分,没有程序设计基础的同学,需要更多练习与实践才能够掌握。

  3. Q :  这门课使用到的软件与环境?

    A :  本门课程主要用到的程序编辑器是VS Code和Sublime Text,可到对应官网下载。
            此外,课程还提供了在线编辑平台,域名是https://www.webcourse.club/。

北京林业大学
4 位授课老师
孙俏

孙俏

教授

王新阳

王新阳

副教授

付慧

付慧

副教授

推荐课程

【DeepSeek适用】小白玩转AI大模型应用开发

林粒粒

213人参加

小白玩转 Python 数据分析

林粒粒

78人参加
下载
下载

下载App