教村里孩子编程的一个月:他们的第一个网站上线了

上周六,村里的5个孩子围在我的电脑前,看着他们做的网站上线。

"老师,我们的网站真的可以让全世界的人看到吗?"

"是的,只要有网络,全世界都能访问。"

孩子们欢呼起来。

这是我教他们编程一个月后的成果。

起因:一个偶然的机会

一个月前,村里的小学校长找到我。

"听说你是程序员,能不能教孩子们一些电脑知识?"

我说:"可以啊,教什么?"

他说:"就教一些基础的,让他们知道电脑不只是用来打游戏的。"

我想了想,说:"那我教他们做网站吧。"

校长惊讶:"做网站?他们才小学五年级,能学会吗?"

我说:"试试看。"

第一课:什么是网站

时间: 周六下午2点
地点: 村小学电脑室
学生: 5个孩子(10-12岁)

破冰:你们用过什么网站?

我问:"你们平时上网吗?"

孩子们纷纷举手:

• "我玩4399小游戏"
• "我看抖音"
• "我用百度搜作业答案"

我说:"很好,这些都是网站。今天,我们要学习怎么做一个网站。"

演示:一个简单的网页

我打开记事本,写了几行代码:

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>你好,世界!</h1>
    <p>这是我做的第一个网页。</p>
</body>
</html>

保存为index.html,双击打开。

孩子们惊呼:"哇!真的变成网页了!"

实践:做自己的网页

我让每个孩子都试一遍。

他们的第一个网页:

• 小明:《我的家乡》
• 小红:《我喜欢的动物》
• 小刚:《我的梦想》
• 小丽:《我的家人》
• 小强:《我喜欢的游戏》

虽然很简单,但他们很兴奋。

第二课:让网页更漂亮

内容: CSS样式

问题:网页太丑了

小明说:"老师,我的网页好丑,能不能让它好看一点?"

我说:"当然可以,我们用CSS来美化它。"

演示:添加颜色和样式

<style>
    body {
        background-color: #f0f0f0;
        font-family: Arial;
    }
    h1 {
        color: blue;
        text-align: center;
    }
    p {
        color: #333;
        line-height: 1.6;
    }
</style>

孩子们看到效果后,眼睛都亮了。

实践:美化自己的网页

我给他们一些任务:

• 改变背景颜色
• 改变文字颜色
• 改变文字大小
• 添加边框

他们玩得不亦乐乎,各种颜色都试了一遍。

第三课:让网页动起来

内容: JavaScript交互

演示:点击按钮

<button onclick="alert('你好!')">点我</button>

小强点了一下,弹出对话框,他兴奋地喊:"老师,它会说话!"

实践:做一个计算器

我教他们做一个简单的加法计算器:

<input type="number" id="num1">
+
<input type="number" id="num2">
<button onclick="calculate()">计算</button>
<p id="result"></p>

<script>
function calculate() {
    var a = document.getElementById('num1').value;
    var b = document.getElementById('num2').value;
    var sum = parseInt(a) + parseInt(b);
    document.getElementById('result').innerHTML = '结果:' + sum;
}
</script>

孩子们做出来后,互相测试,玩得很开心。

第四课:团队项目

任务: 做一个介绍村子的网站

分工

我让他们分工合作:

• 小明:首页(介绍村子)
• 小红:美食页(介绍特色美食)
• 小刚:景点页(介绍旅游景点)
• 小丽:人物页(介绍村里的人)
• 小强:联系页(联系方式)

协作

他们开始讨论:

• "首页要放什么图片?"
• "美食页要介绍哪些菜?"
• "景点页要写什么?"

我看着他们讨论,很欣慰。

遇到的问题

问题1:图片太大

• 解决:教他们压缩图片

问题2:页面跳转不对

• 解决:检查链接路径

问题3:样式不统一

• 解决:统一CSS文件

问题4:内容太少

• 解决:去村里拍照、采访

成果:网站上线

一个月后,网站做好了。

网站内容:

• 首页:村子介绍、照片
• 美食页:10道特色菜
• 景点页:5个景点
• 人物页:5个村民故事
• 联系页:地图、联系方式

技术栈:

• HTML
• CSS
• JavaScript
• 图片优化

部署:

• 使用GitHub Pages
• 免费托管
• 全球访问

域名:

• xxx村.com(我帮他们买的)

上线那天

孩子们围在电脑前,看着网站一点点加载出来。

"成功了!"

他们欢呼、击掌、拥抱。

小明说:"老师,我要把网址发给我爸爸,他在广东打工。"

小红说:"我要发给我的同学,让他们看看我们村。"

孩子们的变化

一个月的编程课,孩子们有了很大变化:

1. 从玩游戏到做游戏

以前:

• 只会玩游戏
• 不知道游戏怎么做的

现在:

• 知道游戏是代码做的
• 想自己做游戏

小强说:"老师,下次能教我们做游戏吗?"

2. 从被动学习到主动探索

以前:

• 老师教什么学什么
• 不会主动问问题

现在:

• 主动搜索教程
• 主动尝试新功能
• 主动解决问题

小明说:"老师,我在网上学会了做轮播图。"

3. 从独自学习到团队协作

以前:

• 各做各的
• 不会合作

现在:

• 互相帮助
• 分工合作
• 共同完成项目

4. 从自卑到自信

以前:

• 觉得自己是农村孩子
• 觉得比不上城里孩子

现在:

• 觉得自己也能做网站
• 觉得自己也能学编程
• 觉得自己也有未来

小丽说:"老师,我以后也想当程序员。"

家长的反馈

家长1(小明妈妈)

"以前孩子只知道玩手机,现在知道学习了。虽然我不懂编程,但我看他很认真,我很高兴。"

家长2(小红爸爸)

"我在广东打工,看到孩子做的网站,很感动。没想到农村孩子也能学这个。"

家长3(小刚奶奶)

"孙子说要当程序员,我不知道是什么,但看他开心就好。"

我的收获

教孩子编程,我也有很多收获:

1. 重新理解编程

以前:

• 编程是工作
• 编程是赚钱工具

现在:

• 编程是创造
• 编程是表达
• 编程是改变世界的工具

2. 学会简化

以前:

• 讲得很复杂
• 用很多术语

现在:

• 讲得很简单
• 用生活化的例子

例如:

• HTML是骨架
• CSS是衣服
• JavaScript是动作

3. 找到意义

以前:

• 写代码只是为了完成任务
• 不觉得有什么意义

现在:

• 写代码可以改变孩子的未来
• 写代码可以缩小城乡差距
• 写代码可以创造价值

未来计划

短期(3个月)

继续教学:

• 每周六下午
• 教更多内容
• 做更多项目

扩大规模:

• 招更多学生
• 培养助教
• 建立社群

中期(6个月)

开发课程:

• 录制视频教程
• 编写教材
• 开发练习平台

推广模式:

• 分享到其他村
• 培训其他老师
• 建立网络

长期(1年)

建立基金:

• 资助农村孩子学编程
• 提供设备和网络
• 提供奖学金

影响更多人:

• 让更多农村孩子学编程
• 让更多人关注农村教育
• 缩小城乡数字鸿沟

写给程序员的话

如果你也想教孩子编程,我的建议是:

1. 从简单开始

不要:

• 一开始就教算法
• 一开始就教数据结构
• 讲太多理论

要:

• 从做网页开始
• 从看得见的效果开始
• 让他们有成就感

2. 用生活化的例子

不要:

• 用专业术语
• 讲抽象概念

要:

• 用生活中的例子
• 用他们能理解的语言

3. 鼓励创造

不要:

• 只教语法
• 只做练习题

要:

• 让他们做自己想做的
• 鼓励创造
• 展示成果

4. 持续陪伴

不要:

• 教完就不管
• 不回答问题

要:

• 持续陪伴
• 及时答疑
• 鼓励坚持

最后的话

教村里孩子编程的一个月,是我最有意义的一个月。

我看到:

• 孩子们的眼睛在发光
• 孩子们的自信在增长
• 孩子们的未来在改变

我相信:

• 编程可以改变命运
• 教育可以缩小差距
• 每个孩子都有无限可能

如果你也想做点什么,欢迎关注我。

如果你有教学经验,欢迎留言分享。

我是乡野码圣,S302省道的程序员。

这是我教村里孩子编程的故事。

互动话题

留言告诉我:

2. 你会教孩子编程吗?
4. 你觉得农村孩子学编程有用吗?
6. 你有什么教学建议?

我会认真回复每一条留言。

关注公众号【乡野码圣】
回复"教学"获取教学资料
回复"编程"看编程教程
回复"公益"了解更多信息