Web开发启航计划：30天从代码小白到作品上线

简介

Web技术是指在互联网上不同类型的设备之间进行通信的过程中使用的各种工具和技术。Web浏览器用于访问网页。Web浏览器可以定义为在Internet上显示文本、数据、图片、动画和视频的程序。万维网上的超链接资源可以使用由Web浏览器提供的软件接口来访问。

适合人群

• 完全零基础但想转行IT的职场人
• 计算机相关专业应届生需要实战项目
• 自由职业者想搭建个人作品平台

第一周：扬帆起航 - 开发环境与基础语法

• Day1-2 工具链搭建
  • 浏览器开发者工具实战
  • VS Code高效配置（Emmet/Live Server插件）
  • Git/GitHub基础操作（创建仓库、提交代码）
• Day3-4 HTML/CSS核心
  • 语义化标签实战（从

    地狱到SEO友好结构）

  • Flexbox布局：响应式导航栏实战
  • CSS变量与主题切换功能开发
• Day5 实战任务
  • 用纯HTML/CSS实现静态企业官网首页

第二周：乘风破浪 - JavaScript与交互开发

• Day6-8 JavaScript基础
  • 变量/条件/循环：表单验证功能开发
  • 数组方法实战：TODO列表增删改查
  • DOM操作：动态内容加载与动画效果
• Day9-10 前端工程化入门
  • npm包管理：使用第三方库（如Day.js）
  • 现代CSS预处理：Sass变量与Mixin实战
• Day11 实战任务
  • 开发交互式注册表单（含实时校验）

第三周：深海探秘 - 全栈开发入门

• Day12-14 Node.js后端
  • Express框架：RESTful API设计
  • MongoDB集成：用户数据CRUD操作
  • JWT认证：用户登录系统开发
• Day15-16 前后端联调
  • Axios实战：前后端数据交互
  • 环境变量管理：.env文件配置
  • 部署预演：本地Mock数据测试
• Day17 实战任务
  • 开发带用户系统的留言板功能

第四周：征服星辰 - 项目上线与优化

• Day18-20 作品封装
  • 响应式设计：移动端适配方案
  • 性能优化：代码压缩与懒加载
  • 错误监控：Sentry基础集成
• Day21-23 部署上线
  • 云服务器选择指南（Vercel/Render对比）
  • 域名配置与HTTPS证书申请
  • 持续集成：GitHub Actions自动部署
• Day24-25 实战任务
  • 完成个人作品全流程部署

我分享了「WEB」
链接：https://pan.quark.cn/s/3a034d388201