合肥外贸网站建设,互联网备案服务平台,卖服务器网站源码,手机算命网站建设重要提示#xff1a;
番茄时钟#xff1a; 每个番茄钟为25分钟学习#xff0c;之后休息5分钟。每完成4个番茄钟#xff0c;进行一次15-30分钟的长休息。动手实践#xff1a; DevTools 的使用和 Git 命令的掌握都需要大量的实际操作。请务必边学边练。环境准备#xff1a…重要提示
番茄时钟 每个番茄钟为25分钟学习之后休息5分钟。每完成4个番茄钟进行一次15-30分钟的长休息。动手实践 DevTools 的使用和 Git 命令的掌握都需要大量的实际操作。请务必边学边练。环境准备 确保您有一个现代浏览器如 Chrome 或 Firefox用于学习 DevTools。提前安装 Git (https://git-scm.com/downloads)。提前安装 Node.js 和 npm (https://nodejs.org/ - npm 会随 Node.js 一起安装)。可以稍后按需安装 yarn (https://classic.yarnpkg.com/en/docs/install)。 资源利用 Chrome DevTools 文档: https://developer.chrome.com/docs/devtools/Pro Git (中文版): https://git-scm.com/book/zh/v2 (重点看前三章)Learn Git Branching (交互式学习 Git): https://learngitbranching.js.org/NPM 文档: https://docs.npmjs.com/ 当前日期 2025年5月17日 学习目标 Day 19-20开发工具与 Git
Day 19浏览器开发者工具 (DevTools) 精通 熟练使用 Elements 面板检查和修改 HTML/CSS。熟练使用 Console 面板进行日志输出和代码调试。掌握 Sources 面板进行 JavaScript 断点调试。了解 Network 面板分析网络请求。 Day 20Git 版本控制与包管理器入门 理解版本控制的概念和 Git 的基本工作原理。掌握 Git 的核心命令能够进行本地版本管理和与远程仓库交互。了解 npm/yarn 的作用并掌握其基础初始化、安装和脚本运行命令。为阶段项目做好版本控制和包管理的准备。 每日学习计划 (3小时/天)
Day 19: 浏览器开发者工具 (DevTools) 精通
第1个番茄钟 (25分钟学习 5分钟休息): 主题 DevTools 概览与 Elements 面板 (一)。内容 打开任意网页熟悉 Chrome DevTools 的界面布局。重点学习 Elements 面板检查 DOM 树、查看和修改元素的 HTML 属性、实时编辑 CSS 样式 (Styles 标签页, Computed 标签页)。实践 选中页面上的不同元素尝试修改它们的文本内容、CSS 颜色、边距等。查看元素的盒模型。 第2个番茄钟 (25分钟学习 5分钟休息): 主题 Elements 面板 (二) 与 Console 面板 (一)。内容 Elements 面板强制元素状态 (如 :hover)事件监听器查看。Console 面板使用 console.log(), console.warn(), console.error(), console.table() 等进行信息输出。实践 在 Elements 面板找到一个有 hover 效果的按钮并强制其状态。在 Console 中打印不同类型的日志信息尝试打印一个对象或数组并用 console.table() 查看。 第3个番茄钟 (25分钟学习 5分钟休息): 主题 Console 面板 (二) - 交互与表达式。内容 在 Console 中执行 JavaScript 代码片段与当前页面上下文交互 (例如获取 DOM 元素调用页面中的函数)。实践 在 Console 中使用 document.querySelector() 获取页面元素并修改其属性。声明变量执行简单的计算。 第4个番茄钟 (25分钟学习 5分钟休息): 主题 Sources 面板 (一) - 查看源码与断点基础。内容 学习 Sources 面板如何查看页面的 HTML, CSS, JavaScript 文件。理解什么是断点 (breakpoint) 以及如何在 JavaScript 代码中设置断点。实践 找到你之前写的 JavaScript 文件在某一行代码前设置一个断点。刷新页面或触发相应操作使代码执行到断点处。(长休息: 15-30分钟) 第5个番茄钟 (25分钟学习 5分钟休息): 主题 Sources 面板 (二) - 断点调试技巧。内容 学习调试控制按钮Resume (继续), Step over (单步跳过), Step into (单步进入), Step out (单步跳出)。查看作用域 (Scope) 和调用栈 (Call Stack)。观察变量的值。实践 使用不同的调试控制按钮来逐行执行代码观察变量在每一步的变化理解函数调用过程。 第6个番茄钟 (25分钟学习 5分钟休息): 主题 Network 面板基础。内容 了解 Network 面板的作用监视页面加载的所有网络请求 (HTML, CSS, JS, 图片, XHR 等)。查看请求的 URL, 方法, 状态码, 耗时, 大小。实践 刷新一个网页观察 Network 面板列出的所有请求。筛选不同类型的请求 (如 JS, CSS, Img)。点击某个请求查看其 Headers, Preview, Response 等详细信息。 Day 20: Git 版本控制与包管理器入门
第1个番茄钟 (25分钟学习 5分钟休息): 主题 版本控制系统 (VCS) 与 Git 简介。Git 安装与配置。内容 理解为什么需要版本控制。Git 的核心概念 (仓库 Repository, 工作区 Working Directory, 暂存区 Staging Area)。确保 Git 已正确安装。进行首次 Git 配置 (git config --global user.name Your Name 和 git config --global user.email youremailexample.com).实践 阅读 Pro Git 第一章。在命令行中检查 Git 版本 (git --version) 并完成配置。 第2个番茄钟 (25分钟学习 5分钟休息): 主题 Git 基本命令 (一): git init, git status, git add, git commit.内容 学习 git init 在本地创建一个新的 Git 仓库。git status 查看工作区和暂存区的状态。git add file 或 git add . 将文件更改添加到暂存区。git commit -m commit message 将暂存区的更改提交到本地仓库。实践 创建一个新的项目文件夹初始化为 Git 仓库。创建一些文件使用 git add 和 git commit 进行首次提交。多次修改文件并提交体会工作流程。 第3个番茄钟 (25分钟学习 5分钟休息): 主题 Git 基本命令 (二): git log, git diff, git clone.内容 学习 git log 查看提交历史。git diff 查看工作区与暂存区、暂存区与最新提交、或不同提交之间的差异。git clone repository_url 从远程仓库克隆项目到本地。实践 查看提交历史。修改文件后不 add使用 git diff 查看。找一个 GitHub 上的公共仓库尝试 git clone 下来。 第4个番茄钟 (25分钟学习 5分钟休息): 主题 Git 分支 (Branching): git branch, git checkout (或 git switch), git merge.内容 理解分支的重要性。git branch branch-name 创建分支。git branch 查看分支。git checkout branch-name (或新命令 git switch branch-name) 切换分支。git merge branch-name 将指定分支合并到当前分支。实践 在本地仓库中创建一个新分支 (如 feature/new-button)切换到该分支并进行一些修改和提交。然后切换回主分支 (通常是 main 或 master) 并将新分支合并进来。可以尝试在 Learn Git Branching 上练习。(长休息: 15-30分钟) 第5个番茄钟 (25分钟学习 5分钟休息): 主题 Git 远程仓库交互: git remote add, git push, git pull.内容 学习如何关联本地仓库到远程仓库 (如 GitHub)。git remote add origin repository_url。git push origin branch-name 将本地分支的提交推送到远程仓库。git pull origin branch-name 从远程仓库拉取最新更改并合并到本地分支。实践 在 GitHub 上创建一个新的空仓库。将本地项目与该远程仓库关联并将本地的提交推送到远程。如果有协作者可以模拟拉取操作。 第6个番茄钟 (25分钟学习 5分钟休息): 主题 npm/yarn 基础命令: npm init (或 yarn init), npm install (或 yarn add), npm run (或 yarn run).内容 了解 npm/yarn 作为包管理器的作用。npm init 初始化项目生成 package.json 文件。npm install package-name 安装依赖包。在 package.json 的 scripts 中定义命令并通过 npm run script-name 执行。实践 在项目文件夹中运行 npm init -y 快速生成 package.json。尝试安装一个简单的包 (如 lodash 或 dayjs)。在 scripts 中添加一个简单的命令 (如 start: echo Hello), 然后运行它。 关于阶段项目:
在 Day 20 结束时您应该已经具备了使用 DevTools 调试代码的基本技能以及使用 Git 进行版本控制和 npm/yarn 管理项目的基础知识。这些都是开始“阶段项目使用 HTML, CSS, 原生 JS 实现一个带简单交互的静态页面”所必需的。
项目启动建议
创建项目文件夹。使用 git init 初始化 Git 仓库。使用 npm init -y (或 yarn init -y) 创建 package.json 文件。 即使项目初期不依赖第三方库这也是个好习惯方便后续扩展和脚本管理。创建你的 HTML, CSS, 和 JavaScript 文件。进行初次 Git 提交 (git add ., git commit -m Initial project setup).在开发过程中频繁使用 DevTools 进行调试并定期使用 Git 提交你的更改。可选在 GitHub 或类似的平台上创建一个远程仓库并将你的项目推送上去。
