100 天 Web 开发学习计划

这份 **100 天 Web 开发学习计划** 提供了一个结构化的路径，帮助你在 100 天内学习 Web 开发。本学习计划将 Web 开发概念分解成每日任务，从 HTML、CSS 和 JavaScript 开始，涵盖现代 Web 框架、Web 安全概念和全栈部署。因此，如果你想要全面了解 Web 开发，请阅读本文，并点击附加的超链接查看每个主题的详细概述。

100 Days of Web Development

什么是 Web 开发？

Web 开发是创建和维护互联网上网站的过程。它包括三个部分：首先是前端开发，专注于开发用户界面；然后是后端开发，涉及创建服务器端逻辑；最后是数据库管理，用于存储和检索用户数据。

Web Development = Front-End + Back-End + DataBase

目录

基础阶段 (第 1-25 天): HTML & CSS 基础

HTML 和 CSS 是 Web 开发的关键部分。要学习 Web 开发，首先需要学习 HTML 标记语言，它用于为网页添加结构。

第 1 周：HTML 基础

在第一周，你需要学习基本的 HTML 概念，如何显示文本、标题、超链接等。以下是按天细分的学习内容。

第 2 周：CSS 基础

在第二周，开始学习基本的 CSS 概念，例如常用的属性和选择器。

第 3 周：响应式设计

在第三周，开始学习响应式 Web 设计的概念，包括媒体查询、容器查询、响应式单位和响应式视口。

第 4 周：高级 CSS

在第四周，学习高级 CSS 技术和最佳实践，以创建专业且可扩展的设计。

交互阶段 (第 26-50 天): JavaScript 基础

本阶段介绍 JavaScript，这是一种使网页具有交互性的编程语言。你将从基础知识开始，逐步学习高级概念和项目。

第 5 周：JavaScript 基础

学习 JavaScript 的基本概念及其工作原理。

第6周：高级JavaScript

第6周重点学习JavaScript的高级特性，例如ES6特性、事件处理、存储API和错误处理。以下是每天的细分。

  • 第33天：学习JavaScript中的事件处理，以响应用户的操作，例如点击、悬停和按键。
  • 第34天：理解本地存储和会话存储，用于在浏览器中存储数据。学习如何在JavaScript中编写存储脚本，并尝试将其应用到HTML页面。
  • 第35天：探索现代ES6+特性，例如箭头函数和解构赋值。
  • 第36天：学习使用Promise和async/await处理异步任务。
  • 第37天：学习使用Fetch API并了解AJAX如何与服务器通信。
  • 第38天：使用`try`、`catch`和`finally`了解JavaScript中的错误处理。
  • 第39天：创建一个天气应用程序项目，使用'openWeatherMap API'获取天气详情并在浏览器中显示。
    • 天气应用项目

第7周：现代JavaScript

深入学习高级概念和现代JavaScript实践。

  • 第40天：学习什么是JavaScript模块以及如何导入/导出它们。
  • 第41天：理解面向对象编程(OOP)的概念以及如何在JavaScript中使用类。
  • 第42天：学习使用Map、Set和WeakMap存储数据集合。
  • 第43天：学习正则表达式，用于文本中的模式匹配和验证。
  • 第44天：学习如何在JavaScript中操作日期和时间。
  • 第45天：学习如何使用JSON，包括解析和序列化数据。
  • 第46天：构建一个任务管理应用程序来练习现代JavaScript概念。
    • 任务管理应用

第8周：开发者工具

学习现代JavaScript开发的必要工具和实践。

  • 第47天：学习如何使用Chrome DevTools调试JavaScript。
  • 第48天：了解npm包管理，以及如何在项目中安装和使用包。
  • 第49天：学习Webpack及其在捆绑JavaScript文件中的作用。
  • 第50天：通过添加JavaScript交互功能，完成你的投资组合网站的第二个版本。
    • 投资组合网站v2.0

框架阶段 (第51-75天)：现代Web开发

本阶段重点学习现代框架和后端基础知识，以创建全栈应用程序。

第9周：React基础

React是一个流行的用于构建用户界面的JavaScript库。虽然你可以使用纯HTML和CSS构建UI，但对于高级特性和功能，React是必须的。所以学习React很重要。

  • 第51天：设置React应用程序并学习JSX，这是一种在JavaScript中编写类似HTML代码的语法。
  • 第52天：理解组件、props以及如何在它们之间传递数据。
  • 第53天：学习React中的状态和状态管理，然后学习什么是Hook以及React中不同类型的Hook。
  • 第54天：`useState`和`useEffect` Hook是React中常用的用于状态管理和API调用的Hook。因此，将一整天的时间都用来学习`useEffect`和`useState` Hook。
  • 第55天：学习如何在React中添加和处理事件。涵盖箭头方法和绑定方法，以将参数传递给事件处理程序。
  • 第56天：学习如何在React中构建应用程序表单并管理表单数据、验证和其他功能。
  • 第57天：创建一个项目：React中的待办事项应用程序，以练习这些概念。
    • React待办事项应用项目

第10周：高级React

开始学习React的高级功能，例如上下文API、自定义Hook、使用Redux进行状态管理等。以下是每天的细分。

  • 第58天：开始学习React中的上下文API。了解如何在不使用props的情况下将信息从父组件传递到其所有子组件。
  • 第59天：学习如何在React中创建自定义Hook。了解使用自定义Hook在多个组件之间重用逻辑。
  • 第60天：学习使用React Router在你的应用程序中实现导航和路由。
  • 第61天：学习如何使用useEffect Hook集成API，以从外部来源获取数据并实时更新渲染的内容。
  • 第62天：学习使用React的Redux库进行高级状态管理原则。了解如何使用Redux API在复杂组件中进行状态管理。
  • 第63天：将这一天用于学习与测试React应用程序相关的所有概念。学习什么是JEST，如何使用@testing-library库等。
  • 第64天：创建一个项目：使用React的电子商务产品页面。
    • 电子商务产品页面

第11周：后端基础

现在是时候开始学习后端开发并构建RESTful API来与前端框架进行通信了。

  • 第65天：对于后端开发，开始学习Node.js的基础知识，使用Node.js创建一个JavaScript运行时，尝试设置NodeJS环境并使用Node.js后端创建你的第一个应用程序。
  • 第66天：在学习Node.js之后，开始学习Express.js Web应用程序框架。学习开发Express.js环境，然后创建一个简单的Hello World应用程序，然后学习如何在Express.js中管理REST API。
  • 第67天：学习更多关于RESTful API设计的基本原则、REST API的类型、方法以及如何在JavaScript环境中使用REST API。
  • 第68天：开始学习MongoDB，这是一个NoSQL数据库，用于存储和管理用户数据。学习如何创建数据库、创建集合、更新数据等。还要学习如何将MongoDB集成到JavaScript环境中。
  • 第69天：学习如何使用MongoDB和Express执行CRUD（创建、读取、更新、删除）操作。
  • 第70天：使用JSON Web Tokens (JWT)实现用户身份验证。
    • JWT身份验证
  • 第71天：创建一个项目：为一个简单的应用程序构建一个RESTful API。
    • RESTful API项目

项目阶段 (第76-100天)：全栈开发

本阶段将你的前端、后端和部署技能结合起来，创建具有高级功能的完整全栈应用程序。

第12周：全栈集成

学习如何将前端与后端集成，并处理全栈开发中的常见挑战。以下是每天的细分。

  • 第72天：学习如何使用API连接前端和后端。涵盖不同类型的HTTP方法来调用API，包括前端和后端。
  • 第73天：学习如何在大量用户同时访问页面时为你的网页设置扩展。此功能仅在你开发功能齐全的生产就绪型Web应用程序时才需要。
  • 第74天：学习DBMS的基本概念，用于设计合适的数据库模式。学习如何规范化你的数据库，以减少存储空间并快速检索数据。
  • 第75天：学习Node.js中的文件系统，如何处理用户上传的文件，如何在最小存储空间中存储文件等。
  • 第76天：学习实现错误处理和日志记录机制，以进行快速调试。
  • 第77天：学习优化应用程序性能以加快加载速度和响应速度所需的概念。
  • 第78天：创建一个项目：一个数据库管理项目，具有CRUD操作、身份验证和文件上传等功能。
    • 图书馆管理系统项目

第13周：高级功能

使用实时更新、搜索、安全和其他高级功能来增强应用程序。

  • 第79天：学习如何使用WebSocket API实现实时更新。如果你正在构建实时应用程序（如聊天应用程序、视频通话应用程序等），这些非常有用。
  • 第80天：学习如何在你的网页中添加搜索功能来过滤内容。一些搜索功能可以使用JavaScript在前端实现。但有时数据可能存储在后端，需要从服务器获取并显示给用户。因此，学习实现优化的搜索算法。
  • 第81天：学习如何在你的网页中实现分页。分页是创建大型网页的多个片段并将它们逐一显示给最终用户。
  • 第82天：学习如何使用图像精灵和其他方法优化图像，以加快加载时间并提高性能。
  • 第83天：学习SEO基础知识，以提高搜索引擎可见性。这将有助于您的网页在谷歌搜索结果中获得更高的排名。
  • 第84天：学习应用程序安全最佳实践，以保护您的应用程序。
  • 第85天：创建一个项目：具有实时消息功能的聊天应用程序。
    • 聊天应用程序项目

第14周：部署和DevOps

将您的应用程序部署到网络，并学习DevOps基础知识以改进软件交付。

  • 第86天：学习如何使用Git控制不同版本的网页，以及如何使用GitHub管理多个存储库。学习使用GitHub Copilot简化Web开发流程并在GitHub上管理代码。
  • 第87天：了解持续集成和持续交付 (CI/CD) 的基础知识。
  • 第88天：学习Docker基础知识，以容器化您的应用程序。
  • 第89天：学习将应用程序部署到Heroku或Vercel等云平台。
  • 第90天：学习如何为您的应用程序设置域名和配置DNS。
  • 第91天：了解什么是SSL证书，为什么使用它，以及如何在您的项目中安装它。
  • 第92天：创建一个项目：部署包含所有这些组件的全栈应用程序。

第15周：最终项目

本周致力于构建和部署完整的Web应用程序。以下是按天细分的计划。

  • 第93天：规划项目，定义需求并设置开发环境。
  • 第94-95天：开发后端、API、数据库集成和身份验证。
  • 第96-97天：构建具有各种屏幕尺寸用户界面的前端。
  • 第98天：将前端与后端连接，并测试应用程序是否存在任何潜在问题。
  • 第99天：将应用程序部署到Heroku或Vercel等实时服务器。
  • 第100天：添加最终润色，编写文档并展示项目。

实践项目建议

  • 博客平台：创建一个博客平台，用户可以在其中撰写、编辑和发布文章。添加用户身份验证、评论和标签等功能。
    • 前端：使用React.js，它可以为博客页面构建动态组件。
    • 后端：使用Django，一个基于Python的后端，易于使用。
    • 数据库：使用PostgreSQL，它存储诸如文章之类的结构化数据。

    示例：Tutorialspoint文章部分，这是一个用户可以撰写、阅读、发布和评论文章的平台。


  • 预订系统：为约会或活动注册等服务创建一个预订应用程序。添加可用性检查和确认通知等功能。
    • 前端：使用Angular，它可以处理动态表单。
    • 后端：使用Node.js，以管理多个请求。
    • 数据库：使用MongoDB，它存储灵活的数据。

    示例：谷歌航班预订系统，印度铁路公司火车预订系统


  • 个人作品集：创建一个个人作品集网站，以展示您的技能、项目和经验。
    • 前端：使用HTML和Bootstrap CSS，快速响应式设计。
    • 后端：不需要。
    • 数据库：不需要

    示例：作品集网站，这是一个使用HTML和CSS设计的简单作品集网站，展示工作经验。


  • 电子商务网站：构建一个在线商店，具有产品列表、购物车和结账等功能。使用支付网关API处理支付。
    • 前端：使用Vue.js，它具有反应式产品列表。
    • 后端：使用Express.js，可以高效地处理API。
    • 数据库：使用MySQL，用于关系数据管理。

    示例：Flipkart，亚马逊


  • 社交媒体克隆：创建一个简化版本的社交媒体平台，用户可以在其中创建个人资料、发布更新并通过点赞和评论与其他人互动。
    • 前端：使用React Js和React Native，同时构建Web和移动应用程序。
    • 后端：使用Django
    • 数据库：使用Firebase。

    示例：Instagram，Facebook


  • 任务管理应用程序：开发一个应用程序来管理任务、设置截止日期和跟踪进度。添加优先级和提醒等功能，以提高可用性。
    • 前端：使用React.js
    • 后端：使用Flask
    • 数据库：使用SQLite

    示例：Google Tasks，谷歌开发的任务管理应用程序，包含在Google Workspace中。


  • 天气应用程序：构建一个天气应用程序，显示位置输入的实时天气数据。使用OpenWeatherMap或任何其他API收集实时天气数据。
    • 前端：使用原生JavaScript。
    • 后端：使用Node.js，易于处理API请求。
    • 数据库：不需要。

    示例：AccuWeather，谷歌天气


  • 实时聊天应用程序：开发一个支持使用WebSocket进行实时消息传递的聊天应用程序。添加用户身份验证和群聊功能等。
    • 前端：使用React.js，易于构建实时聊天UI。
    • 后端：使用Socket.IO，基于WebSocket的消息传递。
    • 数据库：使用MongoDB或Firebase，易于存储聊天消息。

    示例：WhatsApp，Telegram，Google Chat


  • 招聘网站：构建一个招聘门户网站，雇主可以在其中发布职位空缺，用户可以在其中搜索和申请职位。包含筛选和简历上传功能，方便使用。
    • 前端：使用Vue.js
    • 后端：使用Django。
    • 数据库：使用PostgreSQL。

    示例：Tutorialspoint招聘门户


每日练习指南

  • 每天至少花2个小时学习当天的主题
  • 每天构建一些小东西
  • 记录您的学习过程
  • 每天将代码提交到GitHub
  • 定期复习前几天的概念

更新于：2024年11月21日

浏览量：12

开启您的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.