实务学堂，探索全人教育下的资源受限高中生的前端编程教育。为资源贫乏的高中生提供技能、经验和联系、使他们能够进入软件技术职业。
本课程材料源自 CodeNation 和伯克利 WDD，是Web前端的入门课。每节课包括一个B站视频（几分钟），一个练习。一路下来，通过一个个好玩的小游戏项目，带大家在动手中，逐步掌握Web前端编程的基本技能，并爱上编程。
注意：幻灯片还在整理当中，链接暂时为空。
怎么在电脑上编写你的网站呢？我们需要一个编程的工具。
本节我们介绍一个目前最流行的网页编程工具：Visual Studio Code。它也叫 VS Code。当然，你也可以使用Sublime Text，它同样优秀。但VS Code更新一些。所以，推荐大家就从它开始吧。请访问它的官方网址，下载适用于你电脑的版本，然后安装它。
快捷键：输入CMD+K，CMD+S，会弹出“快捷键”编辑界面，在这里给上面的功能设置你喜欢的快捷键
我们首先装一些超级有用的扩展。点击扩展按钮，搜索、安装
英文单词
VS Code
本节学习什么是HTML编程及其标签语法
幻灯片，B站视频本节介绍如何在网页中加入超链接，并以此为例，说明什么是HTML的标签属性。
B站视频本节介绍如何在网页中加入图片，并比较图片标签和其它标签的区别。
B站视频编程中出现了问题怎么办？本节介绍三招：1）保持代码整洁；2）利用编程参考表；3）查找网络信息。最后，让我们来做一个练习吧。
B站视频第一个网页练习：Zip文件
想让你的网页漂亮起来吗？你需要学习CSS。本节介绍CSS的基本概念，然后利用这些知识，解开一个神秘的密码网页，最后为你喜欢的明星制作一张酷炫海报。
隐藏密码练习：Zip文件
明星海报练习：Zip文件
CSS类让我们可以将网页元素归类，然后很方便地设定每一类元素的外观。本节我们介绍CSS类，然后利用学到的知识，为一位酷哥整理他的衣橱。赶紧学习吧。
幻灯片，B站视频整理衣橱练习：Zip文件
DIV是帮助我们进行网页布局的神器，一定要掌握它哦。本节我们将利用DIV完成一个漂亮的狗书网站。赶紧学习吧。请访问下面的页面，获得练习代码。
狗书练习：Zip文件
B站视频网页要专业，留白特别重要。如何设计网页元素的留白呢？我们需要掌握盒子模型。本节我们将学习并练习盒子模型。赶紧学习吧。请访问下面的页面，获得练习代码。
盒子模型练习：Zip文件
B站视频Flexbox能够帮助我们灵活地对齐网页元素，并且适应各种大小的屏幕，非常厉害。本节我们学习Flexbox，然后为一家公司完成网页导航栏的设计。稍微透露一下，最后还有一个好玩的游戏等着你哦。赶紧学习吧。请访问下面的页面，获得练习代码。
导航栏练习：Zip文件
幻灯片，B站视频欧阳艳琴：我的第一个Web作品：B站视频，狗书网站
从本节开始，我们就开始正式学习Javascript编程了。
我们将首先学习JQuery。它是曾经最流行、功能非常强大的Javascript库。它非常简单实用。只需两句代码，就可以完成《打地鼠》游戏。让我们开始吧！
本节的知识点是，通过 $("button") 这个简单的语句，你就可以 选择网页上所有的按钮。太酷了吧。
幻灯片，B站视频英文单词：
JQuery打地鼠练习代码：Zip文件
如何选择一个网页上的特定的元素呢？我们可以用Class。本节我们将利用这个功能，玩一玩藏猫猫。然后，大家就可以写出自己的《打地鼠》游戏了！加油吧！
知识点： $(".cat"): 选择网页上所有class为cat的元素。
B站视频英语单词
除了藏猫猫，JQuery还有其他很多有意思的操作。本节我们学习toggle，slide，fade，实现更酷炫的网页相册动画。来吧！
B站视频英文单词：
本节我们练习上节课学习的酷炫动画效果。我们将完成一个小游戏，开车库门，玩Pokemon Go，还有开关灯。来吧！
B站视频作业 CN11：JQuery欢乐屋
起始代码：Zip文件
同学作品：周光明，JQuery欢乐屋
本节复习前面学过的JQuery酷炫动画效果。我们先听一首歌，然后写一个藏狗狗的小游戏。
B站视频英文单词：
本节学习JQuery两个更强大的功能：text和css函数，你可以用它们设定网页的内容和外观，然后完成一个漫画人物吃甜甜圈的小游戏。
B站视频英文单词：
作业 CN12：JQuery我要甜甜圈
起始代码：Zip文件
同学作品：崔永祥，我要甜甜圈
除了click（点击），浏览器还能响应你更多的动作，比如鼠标双击，移动。本节我们学习鼠标的 dblclick（双击），mouseenter（进入），mouseleave（离开），hover（悬停）等事件。我们会完成一个小游戏：当你的鼠标做出各种动作的时候，会出现各种酷炫的效果。
B站视频作业 CN13：JQuery会响应的盒子
起始代码：ZIP文件
同学作品：王鑫，会响应的盒子
英文单词
我们下面进入Javascript的学习。我们从变量开始。什么是变量呢？它是一个盒子，啥都可以装。我们来认识一下。
幻灯片，B站视频英文单词
变量怎么使用呢？非常简单。当你使用一个变量时，计算机会打开这个盒子，把它里面的东西拿出来，送给你想送给的人。
B站视频水果有类型。甜的，酸的。 变量也有类型。本节我们介绍两种最常用的变量类型：数字和文本。哦？！数学和语文？差不多。一起看看吧。
B站视频英文单词
浏览器我们太熟悉了，每天我都打开它上网。但它后面藏着一个巨大的控制台，在这里，你可以看到各种机密，做只有黑客才能做的事哦。让我们来认识认识它！
B站视频英文单词
浏览器可以当计算器使？！是的，而且比计算器更加强大。是的，下面我们来学习Javascript的加减乘除！
B站视频英文单词
我们现在已经解了Javascript的变量和基本操作。下面我们来学习如何读取用户输入。用户在网页上可以输入各种内容，比如，他的用户名、密码、评论，他想输入什么，就可以输入什么。让我们来看看怎么用程序得到用户的输入！
英文单词
B站视频好了，学了这么多，我们现在可以利用上面学过的所有知识，完成一个漫画人物对话的游戏了！让我们开始吧！
B站视频英文单词
作业 CN14：JS漫画对话，起始代码： Zip文件 ，同学作品：艾克
作业 CN15：JS评论留言，起始代码： https://yishuai.github.io/js/cn17.zip
作业 CN16：JS体重奥利奥转换器，起始代码： https://yishuai.github.io/js/cn15.zip
作业 CN17：JS用户登录，起始代码： https://yishuai.github.io/js/cn16.zip
作业 CN18：旅行清单，起始代码： https://yishuai.github.io/js/cn19.zip
本节我们通过三个作业来学习If-Else条件判断，逻辑操作符：|| &&
作业 CN19：期末考试，起始代码： https://yishuai.github.io/js/cn20.zip
作业 CN20：美图秀秀，起始代码： https://yishuai.github.io/js/cn21.zip
作业 CN21：科蚪俱乐部登录功能，起始代码： https://yishuai.github.io/js/cn22.zip
本节我们介绍函数。一个函数就是一个小小机器人，你可以一句话就调用它们，帮你做各种事，可方便了。让我们看看吧。
幻灯片，B站视频英文单词
函数应该对输入进行检查，而且，Javascript函数的输入非常灵活哦。相信我，它非常容易学。
B站视频英文单词
函数机器人完成你布置的工作后，可以把结果带回来给你哦。这就是函数的返回值。非常厉害的，一定要学会哦。
B站视频英文单词
当来了一个用户需求的时候，我们怎么拆解，分工，然后集成，测试呢？这可是我们在真正的公司里工作时每天要做的。来了解一下吧。
B站视频英文单词
下面我们来练习函数。您的学校需要一个网站来跟踪篮球比赛中的得分。让我们来做一个网站！下次出去比赛的时候，带上它！
B站视频起始代码：https://yishuai.github.io/js/cn14.zip
英文单词
数组，就像一个篮子，你可以往里面塞很多东西，然后操作起来非常方便。数组非常有用。我们网页上的很多东西，都是装在数组里的。
幻灯片，B站视频英文单词
怎么找到数组里面的某一项呢？我们可以用索引。什么是索引呢？
B站视频英文单词
通过用for循环遍历一个数组，我们就可以让计算机帮我们做很多的重复劳动，而自己在旁边休息啦。这可是最厉害的一招哦。快来学习吧。
B站视频英文单词
下面我们利用数组，完成一个游戏：让复仇者联盟集合。
B站视频英文单词
起始代码：https://yishuai.github.io/js/cn23.zip
同学作品：艾克，复仇者联盟
想不想看看数组在电脑里面是怎么存储的，for循环又是如何一步步操作的呢？让我们用Javascript Tutor和浏览器的开发者工具来黑客一下。这些工具很有用，一点要试试哦。
B站视频英文单词
除了推门，我们还可以把东西推进数组里。怎么推？用Push。让我们来看看吧。学会Push后，我们一起来开发一个年会嘉宾登记表。这可是非常有用的哦。加油！
B站视频英文单词
起始代码：https://yishuai.github.io/js/cn24.zip
同学作品：王台归，年会嘉宾登记表（popcode网站，需科学上网）
我们继续完成年会嘉宾登记表。把嘉宾都加入嘉宾数组后，我们可以用代码得到嘉宾的总人数，在网页上立刻显示出来。我们还可以把嘉宾的名字都列出来。
本节的作业是一个任务清单。一个优秀的同学是有任务清单的，是吧。而我们还要做我们专属的任务清单网站。加油！
B站视频英文单词
初始代码：https://yishuai.github.io/js/cn25.zip
同学作品：艾克，待办事项清单
到这里，我们的CodeNation第一部分内容就全部完成了。你开心吗？作业好玩吗？一定要完成作业哦。下面是一个更好玩的作业：我们要做一个我们自己的银行网站。
B站视频英文单词
初始代码： https://yishuai.github.io/js/cn27.zip
下面我们来讲一些高级一点的内容。本节我们来了解Try和Eval。Try能帮助我们处理代码中的故障，而Eval为我们提供了一种新的执行代码的方式。它们都非常有用。我们将结合我们前面练习过的篮球记分牌网站代码（艾克作品：https://mcqueen5258.github.io/2020works/CN25/）进行讲解。让我们来看看吧。
B站视频英文单词
利用Attr函数，我们能很方便地获得和设置HTML元素的属性，而this能够告诉我们事件发生在哪个元素身上。他们都非常有用。我们基于篮球记分牌网站（艾克作品：https://mcqueen5258.github.io/2020works/CN25/），来看看吧。
B站视频英文单词
模块化设计，能让我们的代码简洁、清晰。就像一个功能划分非常清楚的房子，每个房间的功能都非常清楚。让我们基于篮球记分牌网站（艾克作品：https://mcqueen5258.github.io/2020works/CN25/），来感受一下吧。
B站视频英文单词
除了用 for 遍历数组中的元素，我们可以用foreach，对数组中的每个元素应用一个函数。这个技巧非常有用！让我们用它来修改一下我们在前面完成的银行网站吧。
B站视频英文单词
我们将开发一个有动画的，用户能够在上面买票的影院购票小程序！
B站视频英文单词
初始代码：请访问下载 https://yishuai.github.io/js/cn28.zip
同学作品：艾克组
我们来做一个自己的个人职业网站吧，介绍一下自己的作品，相当于我们的名片哦。
B站视频英文单词
初始代码：请访问下载 https://yishuai.github.io/js/cn29.zip
如何用代码表示“热干面”呢？“对象”是特别好的办法。本节我们介绍如何创建Javascript热干面对象。
幻灯片，B站视频英文单词
FCC练习：创建一个基本的 JavaScript 对象
创建完Javascript热干面对象后，我们怎么取它的值，设它的值，或者添加新的属性呢？本节介绍Javascript的这些方法，真的特别简单哦。
B站视频英文单词
FCC练习：使用点符号来访问对象的属性
对象让我们把一个东西的所有属性都打包到一起（比如热干面），然后我们可以把很多相似的对象放到一个数组里（比如把热干面、苹果、啤酒放到一个篮子里），这样提起来就非常方便了哈。下面就让我们来学习Javascript对象数组吧。然后618购物节就要到了，我们程序员怎么能缺席呢！我们来完成一个面向对象的购物车。
B站视频英文单词
练习初始代码：请访问下载 https://yishuai.github.io/js/cn30.zip，根据其中readme.txt文件的说明，在本地完成练习。
互联网上有很多好玩的资源，我们的网页怎么才能访问它们呢？答案是：API。本节我们将学习什么是API，如何轻松创建一个我们自己的API。让我们开始吧。
幻灯片，B站视频英文单词
练习：请访问 https://mockable.io，创建账号，创建自己的第一个API。
本节我们介绍我们熟悉的两个网站的API：B站、豆瓣API。让我们开始吧。
B站视频本节我们介绍如何在网页中用Javascript向网站请求API，然后处理网站返回的结果，更新我们的网页。让我们开始吧。
B站视频英文单词
本节我们用两个小游戏来练习如何用Javascript请求网站API。这是两个很好玩的游戏：1）电影搜索网站；2）Pokeman小精灵搜索网站。让我们开始吧。
B站视频英文单词
练习代码： https://yishuai.github.io/js/cn40.zip，阅读两个目录下的 readme.txt文件，在本地完成练习。
同学作品： 艾克作品
本节我们将介绍如何通过导入和导出，让一个Javascript文件访问另一个Javascript文件的函数。掌握它们对我们学好React是非常关键的！让我们开始吧。
幻灯片，B站视频英文单词
练习代码： https://yishuai.github.io/js/cn41.zip，按照视频中介绍的方法，完成练习。
本节我们将学会安装node、然后启动我们的第一个React应用：三只小猫咪。为什么要学React呢？因为它是目前最受欢迎的前端开发框架。我保证你会喜欢它的。让我们来学习吧！
我们首先学习用函数 function 来定义组件。
幻灯片，B站视频英文单词
练习代码： https://yishuai.github.io/js/cn42.zip，根据视频中的介绍，在本地完成下面的练习：
本节我们将解析我们在上一节中成功启动的React应用，其中包括我们的第一个React模块。有了模块之后，我们就可能很方便地复制出无数的猫咪。还犹豫什么呢？开始学习吧！
B站视频英文单词
数据模型能够帮助我们定义一类对象，也能帮助我们和外界的交流（比如服务器的API请求）。本节我们将学习什么是数据模型，以及怎么在Javascript中用“类”来实现它。
幻灯片，B站视频英文单词
学习了类与数据模型的概念后，想不想练习一下呢？本节我们将练习建立关于”动物“和”体育活动“的两个类，还要练习关于”人“的数据模型。让我们开始吧！
B站视频英文单词
练习： https://yishuai.github.io/js/cn45.zip，根据其中js文件中的说明，在本地完成练习。
我们现在学习用类 Class 来定义 React 组件。它包括一个重要的函数Render（渲染），负责生成组件的HTML代码。让我们开始吧！
B站视频英文单词
练习： https://yishuai.github.io/js/cn46.zip，根据视频中的说明，在本地完成下面的练习：
本节学习如何在VS Code中调试React应用。我们要安装一个VS Code插件，然后配置launch.json文件，最后进行调试。本节内容对一个程序员来说是超级重要的。让我们开始吧！
B站视频英文单词
像函数一样，React 组件也有参数，叫 props。本节艾克同学将现身说法，讲述他的理解。熊治杰学长也给了我们很好的启示。让我们听听吧！
幻灯片，B站视频英文单词
练习： https://yishuai.github.io/js/cn48.zip，根据视频中的说明，在本地完成下面的练习：
本节复习React组件声明的两种方法：函数方法和类方法，然后完成一个好玩的购物车练习。
B站视频英文单词
练习： https://yishuai.github.io/js/cn48.zip，根据视频中的说明，在本地完成下面的练习：
回调函数让我们可以将函数作为参数传递，由此设计出更简洁、强大的程序，而箭头函数让回调函数的声明特别简单。
B站视频英文单词
练习： https://yishuai.github.io/js/cn50.zip，根据视频中的说明，在本地完成下面的练习：
利用 React 的组件数组功能，轻松实现大量相似组件的排列。
B站视频英文单词
练习： https://yishuai.github.io/js/cn49.zip，根据视频中的说明，在本地完成下面的练习：
在 React 中指定 DOM 元素的响应函数，可以用 {} 设置函数名，也可以用箭头函数，调用响应函数。
B站视频练习： https://yishuai.github.io/js/cn50.zip，根据视频中的说明，在本地完成下面的练习：
React Hooks 是一种加强版函数组件，让你不使用"类"，就能写出一个全功能的组件。本节学习使用 useState 给组件添加 state
练习： https://yishuai.github.io/js/cn51.zip，根据视频中的说明，在本地完成以下练习：
本节学习使用 useEffect 来追踪 DOM 的变化。每次网页上的 DOM 发生变化时，都会调用 useEffect 里指定的函数。因此，我们可以在这里实现各种响应的功能。
练习： https://yishuai.github.io/js/cn51.zip，根据视频中的说明，在本地完成以下练习：
本节学习使用 Refs 访问 DOM 节点或在 render 方法中创建的 React 元素。利用 Refs，我们可以很方便地访问和设置 DOM 里面的内容。
练习： https://yishuai.github.io/js/cn51.zip，根据视频中的说明，在本地完成以下练习：
本节介绍使用类 Class 为组件添加状态 State。包括内容：
练习： https://yishuai.github.io/js/cn52.zip，根据视频中的说明，在本地完成下面的练习：
通过 props 和 state，控制组件显示的内容，由此实现动态页面
练习： https://yishuai.github.io/js/cn53.zip，根据视频中的说明，在本地完成以下练习：
构建一个任务清单，可以添加、修改、统计未完成的任务数。主要练习 State
练习： https://yishuai.github.io/js/wdd1.zip，根据提示，在本地完成练习，实现以下功能：
构建一个 Tweet 客户端，可以访问服务器查询最新的 Tweet，并显示。主要练习 props
练习： https://yishuai.github.io/js/wdd2.zip，根据提示，在本地完成练习，实现以下功能：
一个完整的购物车项目，从设计各个组件开始，到完成各种用户交互。跟踪数据在组件之间的流动。
练习： https://yishuai.github.io/js/wdd3.zip，根据提示，在本地完成练习，实现以下功能：
发送网络请求，显示返回的结果。主要练习 Promise
练习： https://yishuai.github.io/js/wdd4.zip，根据提示，在本地完成练习，实现以下功能：
发送网络请求，显示返回的结果。主要练习 Promise
练习： https://yishuai.github.io/js/wdd5.zip，根据提示，在本地完成练习，实现以下功能：
按钮控制定时器启动、暂停、重置
练习： https://yishuai.github.io/js/wdd6.zip，根据提示，在本地完成练习，实现以下功能：
添加任务，选择任务，对当前任务启动定时器
练习： https://yishuai.github.io/js/wdd7.zip，根据提示，在本地完成练习，实现以下功能：
在 React 的单页应用中加入历史网页链接的效果
练习： https://yishuai.github.io/js/wdd8.zip，根据提示，在本地完成练习，实现以下功能：
这是一个类似 Jeopardy 的游戏，点击卡片，可以看到后面的答案。
练习： https://yishuai.github.io/js/cn54.zip，根据视频中的说明，在本地完成练习，实现以下功能：
这是一个类似 Kahoot 的游戏，包括两个部分
该练习非常精彩：响应用户事件，设置各种 State，实现整个页面的更新。
练习： https://yishuai.github.io/js/cn55.zip，根据视频中的说明，在本地完成以下练习：
本项目设计和实现一个在线游戏平台，上面提供多个游戏，支持两人对战
练习： https://yishuai.github.io/js/cn56.zip，根据视频中的说明，在本地完成以下练习：