课程介绍

注意0：欲购买此课程，获取安全购买链接，索要正版授权学习平台账号，务必加咨询QQ：2536379620
注意1：由于编码原因，试听课程视频画面清晰度不如最终购买的视频。最终购买视频的画面清晰度可参见以下两张图。图1   图2
注意2：正版良心视频，购买后有机会和原作者直接短暂技术交流。

注意3：感觉课程太难？没有信心？还在犹豫自己学的会学不会？我们的师傅带徒弟模式（5倍下单）会给您信心。我们承诺， 商品详情，教学大纲，视频内容，所涉及技术，可获得原创作者老师微信或QQ和针对视频范围的精心指导。线上一对一师带徒辅导问答，针对视频内代码调试，使命必达，视频之外相关技术内容，行业内信息人脉，企业内推(如有)，原创作者老师会竭诚帮助。

以上所示价格，只能自行学习视频和获取少量解答。师傅带徒弟课程（5倍下单左右，可以先和客服联系，可获得老师的联系方法和针对视频范围的精心指导。线上一对一师带徒辅导问答，针对视频内代码调试，使命必达。）

带你零基础学习HTML和CSS基础知识,web小白也能轻松入门。

目标驱动教学，拒绝填鸭式学习，轻松成为炙手可热的web前端工程师

 

 

适用人群

适合期望学习前端的同学

课程目标

通过50个实战项目学习HTML和CSS以及原生JS

课程大纲

第1章 HTML5基础与实战

2小时47分钟16节

1-1HTML5-课程介绍[03:30]   免费试看
1-2了解上网的流程及相关知识[10:58]
1-3html和css工作的规则[07:14]
1-4HTML5-安装工具及创建html文件[11:03]
1-5HTML5-首标签和尾标签[07:53]
1-6HTML5-如何使用liveServer插件[05:54]
1-7HTML5-html的基本结构[08:15]
1-8HTML5-meta标签和搜索引擎[16:28]
1-9HTML5-基础标签[08:21]
1-10HTML5-链接和图片标签[09:28]
1-11HTML5-列表和表格标签[10:13]
1-12HTML5-form表单[26:14]
1-13HTML5-行标签和快标签的特性[12:48]
1-14HTML5-id和class属性[11:59]
1-15HTML5-相关的符号[07:40]
1-16HTML5-h5新标签的使用[09:26]

第2章 CSS3基础与实战

2小时57分钟15节

2-1CSS3-CSS3课程介绍[02:26]
2-2CSS3-样式三种书写方式[10:04]
2-3CSS3-CSS选择器[13:56]
2-4CSS3-介绍浏览器研发者工具[06:30]
2-5CSS3-字体样式[14:12]
2-6CSS3-颜色的三种体现方式[09:05]
2-7CSS3-背景和边框的使用[19:37]
2-8CSS3-盒子模型[20:46]
2-9CSS3-浮动和文本对齐[17:06]
2-10CSS3-a和button的样式设计[07:14]
2-11CSS3-制作两种导航[12:04]
2-12CSS3-行与块标签的属性改变[12:56]
2-13CSS3-定位[13:12]
2-14CSS3-实战demo注册表单[13:11]
2-15CSS3-补充视频[05:27]

第3章 HMTL5+CSS3实战项目1-米修在线静态页面

1小时33分钟6节

3-1项目介绍[03:30]
3-2创建项目及导航栏制作[14:51]
3-3首页展示及介绍制作[16:09]
3-4首页特点(字体图标)及底部制作[17:40]
3-5关于我们页面制作[22:16]
3-6关于我们页面制作[18:39]

第4章 HTML5+CSS3实战项目2-响应式布局

1小时36分钟5节

4-1什么事响应式网页设计[04:45]
4-2媒体查询的运用[22:06]
4-3em和rem单位[21:49]
4-4vh和vw单位[20:59]
4-5实现页面响应式设计[26:30]

第5章 HTML5+CSS3实战项目3-弹性布局

33分钟3节

5-1什么是弹性盒子布局[03:12]
5-2弹性布局的基础属性[12:57]
5-3弹性布局的对齐和排序[17:40]

第6章 HTML5+CSS3实战项目4-响应式设计米修在线

1小时34分钟7节

6-1项目介绍[03:15]
6-2导航栏制作[16:53]
6-3制作首页[11:57]
6-4制作第二页面[12:06]
6-5制作第三页面[14:46]
6-6制作联系我们页面[13:00]
6-7响应式页面设计[22:12]

第7章 CSS3进阶

1小时49分钟10节

7-1CSS目标选择器[15:11]
7-2伪类选择器[08:47]
7-3伪元素before和after[15:15]
7-4盒子阴影[09:49]
7-5文字阴影[07:01]
7-6CSS自定义属性(变量)[14:06]
7-7关键帧1[13:48]
7-8关键帧2[07:54]
7-9CSS过渡1[08:56]
7-10CSS过渡2[08:52]

第8章 CSS3样式实战6-三个样式案例

1小时56分钟8节

8-1项目介绍和结构[09:24]
8-2CSS样式渲染及页面滚动[11:43]
8-3页面动画制作[08:22]
8-4项目介绍[22:33]
8-5菜单样式制作[14:22]
8-6动画制作[06:51]
8-7切换效果[16:03]
8-8制作下拉菜单栏[27:34]

第9章 CSS布局进阶-网格布局

57分钟7节

9-1什么是网格布局[04:01]
9-2网格布局的列属性[13:18]
9-3网格布局的行属性[05:11]
9-4跨行和跨列[11:04]
9-5网格布局函数[05:37]
9-6定义网格模板[10:20]
9-7网格布局媒体查询[08:10]

第10章 HTML+CSS实战集合

5小时40分钟10节

10-1移动端实战布局项目[41:16]
10-2滑入滑出[49:06]
10-3视频背景[21:33]
10-4页面视差[19:11]
10-5登录页加载动画[39:04]
10-6折叠式侧边栏[29:04]
10-7模糊切换[33:15]
10-8页面分割效果[35:52]
10-9手风琴效果[39:10]
10-10录播图效果[33:24]

第11章 JavaScript基础与实战-基础

3小时24分钟17节

11-1Javascript-vscode配置[12:17]
11-2Javascript-console的使用[08:39]
11-3Javascript-三种容器关键字[14:57]
11-4Javascript-数据类型[10:40]
11-5Javascript-类型转换[11:50]
11-6JavaScript-数值运算和Math对象[06:45]
11-7JavaScript-字符串方法[12:44]
11-8JavaScript-模板字符串[09:27]
11-9JavaScript-数组方法[11:47]
11-10JavaScript-对象[08:36]
11-11JavaScript-日期[08:23]
11-12JavaScript-分支语句[23:08]
11-13JavaScript-Switch分支[06:45]
11-14JavaScript-循环[17:20]
11-15JavaScript-函数[16:51]
11-16JavaScript-window对象[15:30]
11-17JavaScript-变量作用域[08:40]

第12章 JavaScript基础与实战-DOM和事件和本地存储

3小时19分钟14节

12-1JavaScript-DOM介绍[16:51]
12-2JavaScript-获取单个元素对象[11:41]
12-3JavaScript-获取多个元素对象[13:23]
12-4JavaScript-获取节点[14:36]
12-5JavaScript-添加元素[07:49]
12-6JavaScript-替换和删除元素[14:00]
12-7JavaScript-事件监听和事件对象[11:13]
12-8JavaScript-鼠标事件[13:11]
12-9JavaScript-键盘事件[16:56]
12-10JavaScript-事件冒泡和事件代理[16:11]
12-11JavaScript-本地存储LStorage和JS[21:54]
12-12JavaScript-重构页面和添加任务[12:37]
12-13JavaScript-删除搜索元素[14:32]
12-14JavaScript-所有数据实现本地持久化[14:53]

第13章 20个实战项目彻底攻克JavaScript

1分钟1节

13-1项目成果展示[01:38]

第14章 JavaScript实战项目1-表单验证

56分钟6节

14-1项目介绍[02:05]
14-2项目html[06:03]
14-3项目CSS样式[15:33]
14-4表单验证[13:58]
14-5代码重构[08:48]
14-6长度和邮箱和密码验证[09:48]

第15章 JavaScript实战项目2-预定电影票

1小时12分钟6节

15-1项目介绍[02:30]
15-2项目HTML结构[09:11]
15-3项目CSS样式[19:08]
15-4座位选择和数据更新[16:45]
15-5LocalStorage本地存储[14:40]
15-6获取数据渲染样式[10:11]

第16章 JavaScript实战项目3-自定义视频播放器

40分钟4节

16-1项目介绍[02:04]
16-2项目HTML结构[08:08]
16-3项目CSS样式[08:41]
16-4播放停止暂停进度条[21:11]

第17章 JavaScript实战项目4-汇率计算器

49分钟5节

17-1项目介绍[02:21]
17-2项目html[06:23]
17-3项目CSS[13:30]
17-4fetch和json[11:14]
17-5获取数据更新汇率[16:13]

第18章 JavaScript实战项目5-DOM数组方法

1小时5分钟8节

18-1项目介绍[03:14]
18-2项目HTML结构[11:17]
18-3fetch获取数据[11:20]
18-4foreach[10:36]
18-5资金翻倍-map[06:40]
18-6财富榜排序[07:42]
18-7过滤查询百万富翁[05:50]
18-8计算总金额[08:22]

第19章 JavaScript实战项目6-折叠侧边栏

52分钟5节

19-1项目介绍[01:14]
19-2项目HTML[13:10]
19-3侧边菜单栏CSS[08:18]
19-4登录页和登录框CSS[17:00]
19-5菜单模态[13:01]

第20章 JavaScript实战项目7-SVG矢量图

1小时27分钟7节

20-1项目介绍[03:00]
20-2SVG绘制图形[18:25]
20-3项目主体CSS[15:08]
20-4模态框[10:04]
20-5设置显示字母函数[16:19]
20-6键盘事件监听[10:50]
20-7更新错误字母节点[13:54]

第21章 JavaScript实战项目8-API接口文档操作

1小时15分钟5节

21-1项目介绍[02:46]
21-2项目HTML[14:20]
21-3搜索功能[22:59]
21-4数据展示[22:29]
21-5随机展示数据[13:25]

第22章 JavaScript实战项目9-我的记账本

1小时15分钟7节

22-1项目介绍[03:33]
22-2项目HTML结构[08:04]
22-3项目CSS样式[19:04]
22-4设置历史记录[13:56]
22-5更新余额和收支[10:01]
22-6增加和删除交易记录[14:31]
22-7本地存储[06:45]

第23章 JavaScript实战项目10-音乐播放器

1小时6节

23-1项目介绍[02:29]
23-2项目HTML结构[07:54]
23-3项目CSS样式[12:36]
23-4歌曲信息动画[09:48]
23-5播放和暂停[10:57]
23-6进度条和歌曲切换[17:12]

第24章 JavaScript实战项目11-滚动懒加载数据

49分钟6节

24-1项目介绍[04:12]
24-2项目HTML结构[04:47]
24-3项目CSS样式[11:04]
24-4从接口API获得数据[11:31]
24-5显示加载动画滚动懒加载[09:59]
24-6数据搜索[07:53]

第25章 JavaScript实战项目12-打字游戏

54分钟6节

25-1项目介绍[02:27]
25-2项目HTML结构[08:19]
25-3项目CSS样式[13:31]
25-4单词匹配和更新得分[11:02]
25-5更新倒计时[09:33]
25-6难度设置[10:00]

第26章 JavaScript实战项目13-语音识别和文字识别

58分钟6节

26-1项目介绍[02:52]
26-2项目HTML结构[14:11]
26-3项目CSS样式[17:35]
26-4获取语音列表[10:04]
26-5文字转语音[07:09]
26-6切换语言[06:17]

第27章 JavaScript实战项目14-记忆卡片

1小时24分钟8节

27-1项目介绍[03:23]
27-2项目HTML结构[12:54]
27-3卡片CSS样式[11:01]
27-4卡片滑动和翻转样式[09:19]
27-5切换按钮和添加卡片表单样式[10:30]
27-6创建卡片和实现翻转[14:42]
27-7实现卡片上下切换[06:38]
27-8创建卡片和本地存储[15:41]

第28章 JavaScript实战项目15-歌词搜索

1小时1分钟6节

28-1项目介绍[04:18]
28-2项目HTML结构[09:30]
28-3表单查询结果样式[07:45]
28-4获取歌曲数据[08:44]
28-5显示查询结果和实现翻页[17:53]
28-6显示歌词[13:29]

第29章 JavaScript实战项目16-动画和定时器

28分钟4节

29-1项目介绍[01:43]
29-2项目HTML结构和圆CSS[11:50]
29-3外层原点样式及动画[04:28]
29-4JS触发动画效果[10:40]

第30章 JavaScript实战项目17-2D经典小游戏打砖块

1小时21分钟8节

30-1项目介绍[02:15]
30-2项目HTML和CSS[13:06]
30-3游戏界面制作计划[10:44]
30-4绘制挡板和球体以及得分[10:48]
30-5绘制砖块[13:17]
30-6挡板动画[14:43]
30-7球体动画和撞击砖块[10:24]
30-8更新得分和游戏重置[06:19]

第31章 JavaScript实战项目18-新年倒计时

34分钟4节

31-1项目介绍[01:15]
31-2项目HTML和CSS[10:39]
31-3更新倒计时[15:42]
31-4更新年份和加载动画[07:04]

第32章 JavaScript实战项目19-拖拽排序列表

1小时1分钟6节

32-1项目介绍[02:59]
32-2项目HTML结构和数据插入[12:55]
32-3打乱排序[08:08]
32-4项目CSS样式[12:01]
32-5Drag和Drop拖放[19:38]
32-6验证排序[06:11]

第33章 JavaScript实战项目20-语音猜数字

37分钟4节

33-1项目介绍[03:14]
33-2项目UI设计[08:27]
33-3语音识别[10:59]
33-4结果验证[15:11]