Personal Learning Site

把编程学习这件事
拆成能坚持的小步骤

code学习记录我个人学习编程的过程：从 HTML / CSS 基础，到 JavaScript、Python、数据结构与算法，再到工程化与项目实战。所有内容均为学习整理与技术分享，力求准确、清晰、可复现。

查看学习路线浏览教程笔记

5学习阶段

6+教程笔记

6实战项目

6学习方向

What You Will Learn

学习方向

按模块拆分，每个方向都可以独立开始，也可以按顺序系统推进。

HTML

前端基础

语义化标签、盒模型、Flex 与 Grid 布局、响应式适配，先把页面结构写规范。

入门约 3 周

JavaScript 核心

变量与作用域、原型与类、异步编程、DOM 操作与事件流，打通浏览器交互能力。

进阶约 6 周

Python 入门

语法基础、函数与模块、文件处理与常用标准库，用于脚本编写与数据处理。

入门约 4 周

数据结构与算法

数组、链表、栈与队列、哈希表、二叉树，配合时间复杂度的分析方法。

核心长期练习

GIT

版本控制

Git 基本工作流、分支管理、提交规范与协作流程，让代码可回溯、可协作。

工具约 1 周

WEB

工程化与部署

静态站点组织、性能优化、可访问性检查，以及把项目发布到线上可用。

实战持续更新

Roadmap

五阶段学习路线

每个阶段都有明确的目标产出，学完一个阶段就做一个小项目来验证。

阶段一 · 第 1-3 周

网页结构入门

目标：掌握 HTML 语义化与 CSS 布局。知识点：常用标签、盒模型、Flex / Grid、媒体查询。产出：一个静态个人主页。

阶段二 · 第 4-9 周

JavaScript 交互

目标：掌握语法、DOM 与异步请求。知识点：函数与作用域、事件流、Promise、localStorage。产出：一个待办清单应用。

阶段三 · 第 10-13 周

Python 与数据处理

目标：掌握基础语法与常用库。知识点：列表与字典、文件读写、异常处理、collections。产出：一个批量统计小工具。

阶段四 · 第 14-20 周

数据结构与算法

目标：掌握常见结构与复杂度分析。知识点：数组与链表、栈与队列、哈希表、递归与双指针。产出：一份带题解的练习记录。

阶段五 · 持续

工程化与项目实战

目标：掌握 Git 协作、调试与部署。知识点：分支策略、提交规范、浏览器调试、静态站点发布。产出：一个可上线的完整小项目。

阶段	周期	核心内容	验收产出
一	1-3 周	HTML 语义化、CSS 布局	静态个人主页
二	4-9 周	JavaScript 语法与异步	待办清单应用
三	10-13 周	Python 基础与标准库	文件批处理脚本
四	14-20 周	数据结构与算法	算法练习册
五	持续	Git、调试与部署	可上线的完整项目

Notes

教程笔记

学习过程中整理的笔记，尽量做到"一段说明 + 一段可运行代码"。支持关键词搜索与分类筛选。

Flex 与 Grid 该用哪个

一句话区分：Flex 处理一维排列（一行或一列），Grid 处理二维排列（行与列同时控制）。页面整体骨架优先 Grid，组件内部排列优先 Flex。

CSS

/* 页面骨架：Grid 划分区域 */
.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 64px 1fr;
  gap: 16px;
}

/* 组件内部：Flex 控制单行对齐 */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

HTML / CSS约 5 分钟

响应式适配的三个要点

先写移动端再放大（移动优先）、用相对单位、只在必要时打断点。断点不必多，通常 720px 与 900px 两个就够用。

CSS

/* 移动优先：默认单列，宽屏再变多列 */
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

HTML / CSS约 4 分钟

Promise 与 async / await

Promise 表示一个"未来才会有结果的值"，async / await 是它的语法糖，让异步代码看起来像同步代码。错误处理统一用 try / catch。

JavaScript

async function loadList(url) {
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error('请求失败：' + res.status);
    return await res.json();
  } catch (err) {
    console.error(err);
    return [];
  }
}

JavaScript约 8 分钟

数组去重的两种写法

简单场景用 Set，一行搞定；需要按对象的某个字段去重时，用 Map 记录已出现的键。

JavaScript

// 基本类型去重
const unique = (arr) => [...new Set(arr)];

// 按对象字段去重
const uniqueBy = (arr, key) => {
  const seen = new Map();
  for (const item of arr) if (!seen.has(item[key])) seen.set(item[key], item);
  return [...seen.values()];
};

JavaScript约 4 分钟

列表推导式的取舍

推导式让代码更短，但嵌套两层以上时可读性会明显下降。判断标准：一眼能看懂就用，需要停顿思考就改回循环。

Python

# 推荐：单层、语义清晰
squares = [x * x for x in range(10) if x % 2 == 0]

# 不推荐：嵌套过深，改回循环更易读
rows = []
for row in matrix:
    for cell in row:
        if cell > 0:
            rows.append(cell)

Python约 4 分钟

哈希表的典型用法与 Git 常用命令

哈希表适合"快速查找是否存在"的场景，把 O(n) 的查找降到 O(1)；Git 保证每一步修改都可回溯，两者都是日常高频工具。

Python

# 两数之和：用哈希表记录已见过的值
def two_sum(nums, target):
    seen = {}
    for i, n in enumerate(nums):
        if target - n in seen:
            return [seen[target - n], i]
        seen[n] = i
    return []

Bash

# 查看状态与提交记录
git status
git log --oneline

# 新建分支并切换
git switch -c feature/learn-notes

# 撤销工作区某个文件的修改
git restore README.md

算法Git约 6 分钟

Projects

实战项目

学完一个阶段就做一个项目。下面这些项目都不复杂，但每一个都会逼你把零散的知识点串起来。

静态个人主页

用 HTML 与 CSS 完成一个多板块页面，要求语义化标签、响应式布局，在手机宽度下不出现横向滚动条。

练习点：盒模型、Flex / Grid、媒体查询

入门HTML / CSS

待办清单应用

支持新增、勾选完成、删除与状态筛选，数据保存到 localStorage，刷新页面后数据不丢失。

练习点：DOM 操作、事件委托、本地存储

入门JavaScript

文件批处理脚本

用 Python 遍历指定目录，按扩展名归类文件，并输出一份包含数量与占用空间的统计表。

练习点：pathlib、os 模块、异常与日志

入门Python

算法练习册

按"思路 + 复杂度 + 代码"三段式记录每道题，每周固定 5 题，按月回顾一次错题。

练习点：复杂度分析、递归、双指针

进阶算法

知识卡片生成器

输入一段 Markdown 文本，按标题切片生成卡片，支持左右切换与进度显示，适合复习零散知识点。

练习点：字符串处理、状态管理、键盘事件

进阶JavaScript

响应式博客模板

一套可复用的博客页面模板，包含列表页、标签筛选与深色模式切换，最终部署为静态站点。

练习点：组件化思维、主题变量、静态部署

综合前端 / 部署

做项目的建议：先写出最小可用版本（能跑起来即可），再回头补边界情况与代码结构。不要一开始就追求完美，先把"跑通"这一步完成。

About

关于本站

code学习是一个非商业的个人学习站点，用来存放我自己的编程笔记、练习记录与小项目。

建站初衷

学编程最大的困难往往不是知识点本身，而是学完就忘、没有沉淀。与其把笔记散落在各个地方，不如整理成一个站点：既方便自己随时回看，也顺带练习一遍前端与部署的完整流程。

所以本站既是"学习笔记"，也是"练手项目"——页面结构、样式、脚本与部署全部由我一个人完成。

内容范围

前端基础：HTML 语义化、CSS 布局、响应式适配
JavaScript：语法核心、异步编程、DOM 与浏览器 API
Python：基础语法、标准库、脚本编写
数据结构与算法：常见结构与解题思路记录
工程实践：Git 版本控制、调试方法、静态站点部署

更新方式

内容按学习进度更新，不追求数量。每篇笔记都尽量做到：说明清楚、代码可运行、能回答"为什么这样写"。如果发现内容有误，欢迎通过下方方式告知，我会尽快修正。

内容声明

本站内容为个人学习整理，仅供学习交流使用。
文字与代码示例均为原创整理，转载请注明出处。
本站不收集访客个人信息，不使用第三方统计与广告脚本。

联系与反馈

如果你发现内容错误、有更好的写法，或者想交流学习经验，可以发邮件到联系邮箱（部署时替换为你的真实邮箱）。

把编程学习这件事拆成能坚持的小步骤

学习方向

前端基础

JavaScript 核心

Python 入门

数据结构与算法

版本控制

工程化与部署

五阶段学习路线

网页结构入门

JavaScript 交互

Python 与数据处理

数据结构与算法

工程化与项目实战

教程笔记

Flex 与 Grid 该用哪个

响应式适配的三个要点

Promise 与 async / await

数组去重的两种写法

列表推导式的取舍

哈希表的典型用法与 Git 常用命令

实战项目

静态个人主页

待办清单应用

文件批处理脚本

算法练习册

知识卡片生成器

响应式博客模板

关于本站

建站初衷

内容范围

更新方式

内容声明

联系与反馈

把编程学习这件事
拆成能坚持的小步骤