实务学堂前端开发进阶教程，源自伯克利大学Web设计与开发（WDD）课程，是前端工程师的网页设计和实现入门课。每个视频几分钟，一路下来，通过一个个好玩的项目，带大家在动手中，逐步掌握Web前端编程的基本知识和技能，最后走上职业道路。
什么是前端，什么是后端？在网站设计中，HTML，CSS，Javascript分别承担什么工作呢？通过入门课程的学习，大家都有一定的认识了吧。从今天起，我们就要进入更专业一点的网站开发了。
B站视频好不容易写好了一个网站，怎么把它部署和发布在互联网上，让全世界的人都能访问到呢？本节我们以阿里云的Clouder认证课程《网站建设——部署与发布》为例，学习一下如何将一个本地已经设计好的静态网站发布到互联网。
B站视频英文单词：
现代网页包括很多语义标签。什么是“语义”？就是这些标签会更清楚地告诉浏览器：这是这个网页的页头、文章、节、页脚、导航栏。本节我们将深入理解head，section，header和其它一些语义标签，并将它们应用到一个民宿网站的HTML框架中！我们还将介绍两个设计和开发网页的秘诀，以及如何管理你的文件。让我们开始吧。
请下载 https://yishuai.github.io/wdd/wdd-lab1.zip，按照视频和Zip里的PDF文件，在本地练习。如有疑问，请参考Solution目录下的参考答案。
参考作品：Airbnb民宿网站
同学作品：艾克
英文单词
FCC
CSS选择器可选择HTML元素，设定样式；伪选择器可和网站互动，也帮助我们理解网页元素的父子关系。本节我们学习它们，然后玩一个超好玩的CSS选择器游戏，并完成一个练习。
英文单词
本游戏中，我们将练习各种CSS选择器和伪选择器。请下载 https://yishuai.github.io/wdd/wdd-game1.zip，用浏览器打开目录下的index.html，在本地练习。
游戏的英文版：Flukeout
FCC CSS选择器
本节我们利用上节课上学到的内容，完成一个租车网站主页的CSS动态效果设计，然后通过一个网格来进一步提高我们的CSS选择器技巧。经过这些练习，你将具有一流的CSS选择器设计能力。
本练习将使我们更加熟悉CSS选择器和伪选择器，以及如何将其组合以构建专业的网页样式效果。请下载 https://yishuai.github.io/wdd/wdd-lab2.zip，参考Zip里的PDF文件，在本地练习。如有疑问，请参考Solution目录下的参考答案。
同学作品：艾克
参考作品：Hertz租车
英文单词
FCC CSS样式
本练习将使我们更加熟悉CSS选择器和伪选择器。请下载 https://yishuai.github.io/wdd/wdd-hw2.zip，打开目录中的PDF文件，或readme目录下的index.html，按文件说明在本地练习。
英文单词
本节我们将学习一些只有顶级设计师才理解并运用的CSS高级技巧，包括阴影、边框、圆角、边、渐变。这些技巧将令你脱颖而出，请一定掌握。
本节我们学习CSS盒子模型的高级技巧，这些技巧将令你的CSS设计更加简洁高效。
英文单词：
本节开始，我们学习网页的布局。网页布局是一种艺术。我们首先学习网页元素的两种默认布局方法：Block和Inline。理解它们是掌握后面将介绍的高级技巧的关键。
本节我们学习网页元素的四种定位方式：静态、相对、绝对和固定。掌握了它们，你就能够自由地在网页上布局你的元素了。
如何将元素水平和垂直居中呢？学过本节后，这个问题再不会让你头疼了。让我们来学习吧！
英文单词：
本节我们练习一个社交网站常见的图片分享主页的CSS布局。该练习将使我们更加熟悉CSS选择器、伪选择器和盒子模型。请下载 https://yishuai.github.io/wdd/wdd-hw4.zip，按其中PDF说明，在本地练习
同学作品：艾克
本节我们将学到的CSS定位技术应用到两组练习中。一组是宜家说明书的定位；一组是网页元素的定位。经过这些练习，你将具有一流的CSS定位能力。
本练习将完成一个宜家说明书的网页定位工作。请下载 https://yishuai.github.io/wdd/wdd-lab5.zip，请参考Zip里的PDF文件，在本地练习。如有疑问，请参考Solution目录下的参考答案。
本练习包括7个小问题，练习Header，Sidebar等各种网页元素的定位。请下载 https://yishuai.github.io/wdd/wdd-hw5.zip，按其中PDF说明，在本地练习。
本节学习目前最流行的网页元素布局方式：Flexbox。我们将介绍一个非常好玩的Flex编程游戏，然后将其应用于两个好玩的练习，一个是Flexbox网页布局技巧，一个是网站仪表盘。经过本节学习，你将具有一流的Flexbox布局能力。
请下载 https://yishuai.github.io/wdd/wdd-demo6.zip，按代码中的说明，在本地练习
请下载 https://yishuai.github.io/wdd/wdd-lab6.zip，请参考Zip里的PDF文件，在本地练习。如有疑问，请参考Solution目录下的参考答案。
请下载https://yishuai.github.io/wdd/wdd-hw6.zip，按其中PDF说明，在本地练习
用户注意力是最宝贵的资源，而用户交互是科学。本节学习如何布局网页，通过留白，引导用户注意力，让用户获得最佳体验，网站获得最佳呈现效果。本节将让你具有一流设计师的眼光和设计思维。
本节我们学习网页元素的媒介查询。你将理解如何设置CSS规则，让你的网页在不同的设备上都有出色的显示。
本节我们学习如何通过关键帧动画，赋予网页动画效果，让你的网站生动起来。我们然后将完成两组有趣的动画作品：一组网页起始动画，和一个会蹦的篮球。
本练习中，我们将用CSS动画实现一个外星飞船在网页上的漫游。请下载 https://yishuai.github.io/wdd/wdd-demo7.zip，按starter代码中的说明，在本地练习。如有疑问，请参考sol目录中的答案。
本实验中，我们将用CSS动画实现四个酷炫的网页启动页面动画效果。请下载 https://yishuai.github.io/wdd/wdd-lab7.zip，按其中PDF说明，在本地练习。注意目录中的Gif动画，显示了练习的最后效果。如有疑问，请参考Solution目录下的参考答案。
本练习中，我们将用CSS动画实现一套会动的按钮和一个不断弹跳、自带阴影的篮球。 请下载https://yishuai.github.io/wdd/wdd-hw7.zip，按其中PDF说明，在本地练习。注意目录中的两个mov视频，显示了练习的最后效果。
同学作品：篮球，艾克
本节我们首先复习JS的基础语法，然后重点学习如何给一个网页元素添加事件响应函数。本节后，你就可以将网页变成动态网页，实现酷炫效果了。马上就开始学习吧。
本练习中，会出现一张图片。当你点击此图片时，会弹出一个警告：“啊，我被点了”。请下载 https://yishuai.github.io/wdd/wdd-demo8.zip，按代码中的说明，在本地练习
本练习中，你将可以在网页上画画。你还可以通过网页上的一个滑动条，来控制你画刷的颜色。请下载 https://yishuai.github.io/wdd/wdd-lab9.zip，按其中PDF说明，在starter目录下练习。注意目录中的Gif动画，显示了练习的最后效果。如有疑问，请参考Solution目录下的参考答案。
本练习中，你将实现一套按钮，点击它们的时候，网页的背景会变色；你还将实现一套走马灯似的图片效果，点击小图的时候，会放大显示这张图片。 请下载https://yishuai.github.io/wdd/wdd-hw8.zip，按其中PDF说明，在本地练习。注意目录中的 Mov 视频和 Gif 动画，显示了练习的最后效果。
经过CodeNation部分近十节课的JQuery学习，大家已经掌握了JQuery的各种技巧，现在，是时候学习如何用JQuery完成较完整的网站项目了。本节我们将体验、分析一位伯克利大学同学的图片网站作品中由JQuery实现的功能。请首先访问 https://brandonlchow.github.io/shibas_of_instagram ，查看网站效果，然后访问 https://github.com/brandonlchow/brandonlchow.github.io ，点击“Code（代码）”按钮，然后选择“Download Zip（下载Zip文件）"，下载代码后，对代码进行阅读、理解和修改尝试。
本节我们继续学习用JQuery完成完整网站项目。我们将体验、分析上一节认识的这位伯克利大学同学的个人职业网站，该网站中的动态效果也是完全由JQuery实现的。请首先访问 https://brandonlchow.github.io ，查看网站效果，然后访问 https://github.com/brandonlchow/brandonlchow.github.io ，点击“Code（代码）”按钮，然后选择“Download Zip（下载Zip文件）"，下载代码，学习分析。
经过了两个项目的洗礼，本节总结我们学到的JQuery知识，准备下一步扬帆起航。
本节我们将首先练习实现一个走马灯式滑动图片展示特效，然后完成一个虚拟试衣间网站的设计。激动吧？马上就开始学习吧。请访问 https://yishuai.github.io/wdd/ 下载相应的练习材料。
本练习中，你将增强前面练习中实现的社会网络个人照片展示网格，在上面添加滑动显示功能。请下载 https://yishuai.github.io/wdd/wdd-lab10.zip，按其中PDF说明，在starter目录下练习。注意目录中的两个视频，显示了练习的中间过程和最后效果。如有疑问，请参考Solution目录下的参考答案。
本练习中，你将实现一个虚拟试衣间的网站，为你的偶像尝试各种服装。请下载https://yishuai.github.io/wdd/wdd-hw9.zip，按其中PDF说明，在本地练习。注意目录中的视频，显示了练习的最后效果。
同学作品：艾克
本节系统地学习For循环，并进行练习。
本节系统地学习While循环，包括While和Do-While，比较它们的不同，并进行练习。
本节系统地学习数组，包括其属性、方法、循环。
本节介绍各种有趣的Javascript库，包括粒子动画、jQuery UI、Isotop排序和过滤、Waypoints滚动、Quill文本编辑器、彩纸雨、Plyr媒体播放器、GreensockJS动画平台、SnapSVG、Scrollmagic 鼠标滚轮动画、three.js 3D模型、matter.js 2D物理仿真引擎、PixiJS 2D WebGL 渲染引擎
本练习中，你将实现一个音乐DJ台，让DJ们可以操作键盘，尽情挥洒，制作自己的音乐。请下载https://yishuai.github.io/wdd/wdd-hw10.zip，按其中PDF说明，在本地练习。注意目录中的视频，显示了练习的最后效果。
本节我们回顾几个大家在学习中感觉容易混淆的地方，包括：Block/Inline/Inline Block， 居中的四种方法，行号设置，浮动，图标，选择器优先级。请下载https://yishuai.github.io/wdd/wdd-zhijie.zip，用浏览器打开，按视频中演示的，在本地练习。
本练习中，你将实现一个具有选择过滤功能的图片网站。请下载https://yishuai.github.io/wdd/wdd-hw11.zip，按其中PDF说明，在本地练习。