Frontend / JavaScript / 算法

菠萝的 编码成长记录

这里收集了一些虚构的编程学习过程:今天写了什么、卡在了哪里、又是怎样一点点啃下来的。 它不像简历那样正式,更像一块持续更新的学习面板,记录每次小进步。

186 h
累计专注学习时长
42
整理过的知识笔记
17
独立完成的小实验
5 周
连续打卡学习状态

学习地图

目前把学习内容拆成四条主线来推进:基础页面、脚本交互、组件化思维和后端认知。每一条都不追求一口气学完,而是边做边补。

01

HTML / CSS

练习语义化结构、Flex/Grid 布局、表单设计和响应式页面,目标是能从零把一个完整落地页搭起来。

完成度 78%
02

JavaScript

重点攻克事件机制、数组方法、异步流程和模块化思路,让页面不只是静态展示,而是能真正互动起来。

完成度 64%
03

React 思维

开始理解组件拆分、状态管理和页面复用,目标不是背 API,而是学会怎么组织更复杂的前端界面。

完成度 46%
04

Node / 工具链

了解 npm、包管理、简单接口和构建流程,让“会写页面”逐渐过渡到“能做一个小项目”。

完成度 38%

近期学习记录

按时间记录最近的学习内容、收获和卡点,方便回看,也方便持续调整后面的学习方向。

05 / 08 · 学习 2.5 小时

把作品展示区改成了响应式卡片布局

布局练习

今天重点练了 `grid-template-columns` 和断点切换。之前写页面总觉得“桌面能看就行”,这次开始主动照顾手机端,终于有点像完整作品了。

CSS Grid 媒体查询 卡片设计
05 / 06 · 学习 1.8 小时

第一次真正理解了事件委托的使用场景

脚本交互

以前看到“给父元素绑定事件”只会照着写,今天自己做了一个待办列表 demo 后,终于知道它为什么能减少重复绑定,也更方便动态新增节点。

JavaScript 事件冒泡 Todo Demo
05 / 04 · 学习 3.1 小时

写了一个假数据驱动的学习清单页面

数据渲染

尝试把学习记录写成数组,再循环渲染到页面里。虽然还很基础,但已经从“硬编码页面”慢慢走向“根据数据出内容”的思路了。

数组 map DOM 渲染 假数据

项目实验

除了刷知识点,还会做一些轻量练手项目。它们不一定复杂,但很适合用来验证“我到底有没有真正掌握”。

Mini Project

番茄钟学习器

一个带倒计时、学习任务切换和完成提示的小工具。练习了定时器逻辑、状态切换和更清晰的界面排布。

Practice Page

开发者日记看板

把每日学习内容做成可视化卡片,加入标签筛选和状态标记。这个页面也正是当前“个人站”灵感来源之一。

UI Challenge

一页式咖啡店官网

目标是练习视觉层次和响应式布局,不再只追求“能排出来”,而是开始关注页面的节奏、留白和信息组织。

每周复盘

一个学习型个人站除了展示成果,最好也留下一点“怎么学”的痕迹。复盘能把零散练习串成持续成长的故事。

这一周我学到了什么

  • 布局不只是把元素摆整齐,还要考虑层级、间距和不同屏幕下的阅读顺序。
  • JavaScript 真正难的不是语法,而是把逻辑拆清楚,让每个功能都知道自己该做什么。
  • 一边做页面一边写记录,能明显提高理解速度,比只看教程更容易留下印象。

本周代码碎片

这周顺手记下的一段小笔记,提醒自己继续把学到的东西落到页面里。

const growthLog = {
  focus: ["HTML", "CSS Grid", "JavaScript"],
  mood: "卡住过,但没有停",
  nextStep: "把静态页面继续做成可交互作品"
};

function keepBuilding() {
  return "每天进步一点点";
}