Day 0: 开篇准备 – 开发环境搭建与课程导航

🎯 本节目标

了解课程定位和学习路径
搭建完整的开发环境
掌握基本的开发工具使用
创建你的第一个网页
了解学习方法和资源

📚 课程定位与适合人群

这门课适合谁？

✅ 非常适合：

零基础，想学编程的办公人员
想转行做前端开发的小白
学生党，想掌握一门实用技能
自由职业者，想拓展技能树
对编程感兴趣，想入门试试

⚠️ 不太适合：

有丰富编程经验的大佬
只想快速赚钱，不愿学习的人
三分钟热度，缺乏毅力的人

学完能做什么？

基础能力：

✅ 独立开发静态网站
✅ 实现网页交互效果
✅ 连接API获取数据
✅ 发布自己的作品

进阶能力（Day 31-40）：

✅ 开发全栈应用
✅ 设计RESTful API
✅ 连接数据库
✅ 部署到云服务器

真实案例：学完后你可以做

个人简历网站
待办事项应用
天气查询工具
简单的博客系统
甚至接单做外包！

课程特色

零基础友好：从” Hello World “到全栈开发
实战导向：30+项目，边做边学
循序渐进：每个知识点都有铺垫
语言生动：拒绝枯燥，有趣易懂
保姆级教程：环境搭建、每行代码都有解释

🛠️ 开发环境搭建

工具清单

在开始之前，你需要准备：

电脑：Windows、Mac、Linux都可以
浏览器：Chrome推荐（必装）
编辑器：VS Code（必装）
运行环境：Node.js（Day 31后需要）

步骤1：安装VS Code（必装）

VS Code是微软开发的免费代码编辑器，功能强大、插件丰富。

为什么选择VS Code？

✅ 免费、开源
✅ 跨平台（Windows/Mac/Linux）
✅ 智能提示、代码补全
✅ 内置终端
✅ 插件生态丰富
✅ 轻量级但强大

安装步骤：

访问官网：https://code.visualstudio.com/
下载对应系统的安装包
双击安装，一路”下一步”
安装完成后打开VS Code

验证安装：
打开VS Code，看到欢迎页面，恭喜！安装成功 ✅

推荐插件（在VS Code左侧Extensions面板搜索安装）：

必装插件：
1. Chinese (Simplified) Language Pack - 中文界面
2. Live Server - 实时预览网页
3. Auto Rename Tag - 自动重命名HTML标签
4. Bracket Pair Colorizer - 括号高亮
5. Prettier - 代码格式化
6. ESLint - 代码检查
7. GitLens - Git增强（Day 37需要）

可选插件：
- Material Icon Theme - 文件图标
- One Dark Pro - 护眼主题
- Code Spell Checker - 拼写检查

安装插件步骤：

点击VS Code左侧的方块图标（Extensions）
搜索插件名称
点击”Install”安装
安装完成后点击”Reload”重启

步骤2：安装现代浏览器

推荐使用Google Chrome，开发者工具最强大。

下载地址：https://www.google.com/chrome/

为什么推荐Chrome？

✅ 最强大的开发者工具（F12）
✅ 快速、稳定
✅ 插件丰富
✅ 更新及时

其他选择：

Edge（基于Chromium，也不错）
Firefox（开发者工具也很强大）
Safari（Mac用户，调试iOS必备）

验证安装：
打开浏览器，按F12，看到开发者工具，恭喜！✅

步骤3：准备学习环境

创建项目文件夹：

# 在你的电脑上创建一个文件夹
学习项目/
├── Day-01-编程思维/
├── Day-02-变量与数据/
├── Day-03-条件判断/
├── ...

在VS Code中打开项目：

打开VS Code
文件 → 打开文件夹
选择”学习项目”文件夹
右侧会显示文件树

配置VS Code设置（按Ctrl+,打开设置）：

{
  "editor.fontSize": 18,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "workbench.colorTheme": "One Dark Pro",
  "files.autoSave": "afterDelay",
  "terminal.integrated.fontSize": 16
}

步骤4：认识开发者工具（F12）

打开开发者工具：

Windows: 按 F12 或 Ctrl+Shift+I
Mac: 按 Cmd+Option+I

常用面板：

Elements（元素） – 查看和修改HTML/CSS
- 实时预览样式修改
- 调试DOM结构
Console（控制台） – 执行JavaScript代码
- 查看错误信息
- 测试代码片段
Network（网络） – 查看网络请求
- 检查API调用
- 查看加载时间
Sources（源代码） – 调试JavaScript
- 设置断点
- 单步执行

快速练习：

打开任意网站
按F12打开开发者工具
切换到Console面板
输入 console.log('Hello!') 并回车
看到”Hello!”输出了吗？恭喜你，已经会写代码了！✅

💻 创建你的第一个网页

步骤1：创建HTML文件

在VS Code中创建新文件：index.html
输入以下代码并保存：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个网页</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 50px auto;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }
    
    h1 {
      text-align: center;
      font-size: 3em;
      margin-bottom: 30px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }
    
    .card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 15px;
      padding: 30px;
      margin: 20px 0;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }
    
    button {
      background: #ff6b6b;
      color: white;
      border: none;
      padding: 15px 30px;
      font-size: 18px;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    }
    
    button:hover {
      background: #ee5a6f;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
    }
    
    #message {
      margin-top: 20px;
      font-size: 24px;
      text-align: center;
      min-height: 40px;
    }
  </style>
</head>
<body>
  <h1>🎉 我的第一个网页</h1>
  
  <div class="card">
    <h2>欢迎来到编程世界！</h2>
    <p>这是一个完全由你亲手创建的网页。</p>
    <p>在接下来的40天里，你将学会：</p>
    <ul>
      <li>✅ HTML - 网页的骨架</li>
      <li>✅ CSS - 网页的样式</li>
      <li>✅ JavaScript - 网页的灵魂</li>
      <li>✅ Node.js - 后端开发</li>
      <li>✅ 数据库 - 数据存储</li>
      <li>✅ 部署上线 - 让世界看到</li>
    </ul>
  </div>
  
  <div class="card">
    <button onclick="sayHello()">点击我！</button>
    <div id="message"></div>
  </div>
  
  <script>
    function sayHello() {
      const messages = [
        '你好，未来的程序员！👋',
        '代码改变世界！💻',
        '你的第一个JavaScript函数！🎉',
        '继续加油，你很棒！⭐',
        '40天后，你将成为全栈工程师！🚀'
      ];
      
      const randomMessage = messages[Math.floor(Math.random() * messages.length)];
      const messageDiv = document.getElementById('message');
      
      messageDiv.textContent = randomMessage;
      messageDiv.style.opacity = 0;
      
      setTimeout(() => {
        messageDiv.style.transition = 'opacity 0.5s';
        messageDiv.style.opacity = 1;
      }, 100);
    }
  </script>
</body>
</html>

步骤2：在浏览器中打开

方法1：直接双击

在文件管理器中找到index.html
双击文件，会用默认浏览器打开

方法2：使用Live Server（推荐）

在VS Code中右键点击index.html
选择”Open with Live Server”
浏览器会自动打开，并实时预览修改

效果：

渐变紫色背景
玻璃态卡片效果
点击按钮显示随机消息
淡入动画效果

恭喜！ 🎉 你已经创建了第一个网页！

📖 课程学习路径

第一阶段：前端基础（Day 1-18）

目标：掌握HTML、CSS、JavaScript基础

Day 1-9: JavaScript基础
├── Day 1: 编程思维入门
├── Day 2: 变量与数据
├── Day 3-4: 控制流（条件、循环）
├── Day 5: 函数入门
├── Day 6: 数组与对象
├── Day 7: 字符串操作
├── Day 8: 作用域与闭包
└── Day 9: 错误处理

Day 10-18: DOM与样式
├── Day 10-12: DOM操作（基础、事件、表单）
├── Day 13-18: CSS样式（基础到高级）
└── 项目实战（3个）

学习重点：

打好基础，不要急躁
多动手写代码
理解原理，不要死记

第二阶段：前端进阶（Day 19-30）

目标：掌握现代JavaScript和项目实战

Day 19-23: 项目实战（5个项目）
├── 待办事项应用
├── 计时器应用
├── 猜数字游戏
├── 打字练习游戏
└── 记忆翻牌游戏

Day 24-28: 现代JavaScript
├── Day 24: ES6新特性
├── Day 25-26: 异步编程（Promise、async/await）
├── Day 27: 模块化开发
└── Day 28: 本地存储

Day 29-30: 网络编程
├── Day 29: API请求（fetch）
└── Day 30: 天气查询应用（综合项目）

学习重点：

项目驱动学习
理论结合实践
培养解决问题的能力

第三阶段：全栈开发（Day 31-40）🆕

目标：掌握后端开发和部署

Day 31-33: 后端基础
├── Day 31: Node.js入门
├── Day 32: Express框架
└── Day 33: MongoDB数据库

Day 34-36: 全栈进阶
├── Day 34: RESTful API设计
├── Day 35: 用户认证系统
└── Day 36: 博客系统项目

Day 37-40: 部署上线
├── Day 37: Git版本控制
├── Day 38: 前端部署
├── Day 39: 后端部署
└── Day 40: 项目完整上线

学习重点：

前后端分离架构
数据库设计
部署到生产环境

💡 学习方法与建议

高效学习法

1. 费曼学习法

学完一个知识点后，尝试用简单的话讲给别人听
如果讲不清楚，说明没理解透彻，需要重学

2. 项目驱动法

不要只看视频/文章，一定要动手做项目
遇到问题先尝试自己解决
实在解决不了再求助

3. 刻意练习

每天至少写1小时代码
周末完成一个大项目
持续不断，保持热度

4. 错误记录法

遇到错误记录下来
记录错误原因和解决方法
定期回顾，避免重复踩坑

时间安排建议

全职学习（每天6-8小时）：

上午：理论学习（3-4小时）
下午：项目实战（3-4小时）
晚上：复习总结（1-2小时）

业余学习（每天2-3小时）：

工作日：2小时理论学习
周末：4-6小时项目实战

完成时间：

全职：40-50天完成
业余：60-80天完成

学习资源推荐

文档资源：

MDN Web Docs：https://developer.mozilla.org/zh-CN/
JavaScript.info：https://zh.javascript.info/
Can I Use：https://caniuse.com/（浏览器兼容性查询）

视频资源：

freeCodeCamp：免费编程课程
YouTube：搜索JavaScript教程
B站：中文视频教程

练习平台：

CodePen：在线代码练习
JSBin：JavaScript实验场
LeetCode：算法练习（进阶）

⚠️ 常见问题与解决方案

Q1: 完全零基础，能学会吗？

A: 完全可以！这门课就是为零基础设计的。

建议：

前几天可能会感觉困难，这是正常的
不要急于求成，每天进步一点点
多动手，少看理论
遇到问题不要怕，这是学习过程

Q2: 英语不好，影响学习吗？

A: 影响不大，初期几乎不需要英语。

说明：

代码关键字不多，常用的就几十个
编译器会自动提示
现在有很多中文教程
英盲也能学会编程

建议：

代码关键字能认就行，不用背
遇到英文错误，复制翻译一下
慢慢积累，英语会自然提升

Q3: 年龄大了，还能学吗？

A: 只要愿意学，什么时候都不晚。

真实案例：

35岁宝妈，3个月转行前端
40岁会计，半年学会自动化办公
50岁退休教师，一年成为独立开发者

建议：

不要和别人比，和昨天的自己比
成年人的优势是理解力强
坚持比天赋更重要

Q4: 需要数学很好吗？

A: 不需要！初中数学水平就够了。

说明：

Web开发几乎不涉及高深数学
算法题需要数学，但不是入门阶段
逻辑思维比数学计算更重要

需要的基础：

四则运算
简单的代数（x + y = 10）
逻辑判断（如果…那么…）

Q5: Mac和Windows有区别吗？

A: 没有本质区别，都能学会。

差异：

快捷键不同（Ctrl vs Cmd）
终端命令略有不同
文件路径表示不同（\ vs /）

建议：

用什么电脑都行
VS Code操作基本一致
Node.js使用方法相同

🎯 学习检查清单

Day 0结束前，你应该：

[ ] 安装了VS Code并配置好插件
[ ] 安装了Chrome浏览器
[ ] 能打开开发者工具（F12）
[ ] 创建了第一个网页并成功运行
[ ] 理解了课程学习路径
[ ] 确定了自己的学习时间安排

如果以上都完成，恭喜你！

你已经准备好了！ 🎉

接下来40天，让我们一起：

从零到英雄
从小白到全栈工程师
从梦想者到实践者

记住：编程不是天赋，而是可以学会的技能。

📝 下一步

准备好了吗？

让我们开始 Day 1: 编程思维入门

💬 遇到问题怎么办？

不要慌！编程就是不断解决问题的过程。

解决步骤：

仔细阅读错误信息
检查代码拼写和标点
用浏览器F12查看错误
复制错误信息搜索
在学习群里提问
耐心，不要放弃

记住：每个程序员都是从”报错”过来的。💪

最后的话：

“种一棵树最好的时间是10年前，其次是现在。”

开始学编程最好的时间是昨天，其次是今天。

让我们开始这段激动人心的旅程吧！ 🚀

祝你学习愉快！ 💻✨

Created with ❤️ for 编程初学者
Last Updated: 2026-03-21