# 前端基础课程代码 **Repository Path**: shinewin/frontend-basic-course-code ## Basic Information - **Project Name**: 前端基础课程代码 - **Description**: 这个仓库存储前端基础课程的代码 - **Primary Language**: HTML - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-02-13 - **Last Updated**: 2026-06-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: HTML ## README # 前端基础课程代码 本仓库是一套面向零基础的**前端基础全栈课程**配套代码与教学资料，覆盖 **HTML / CSS / JavaScript** 三大核心领域，共 **45 个教学文件 + 3 套练习册（270 题）+ 6 个 Mini 项目 + 1 个综合项目，109,000+ 行** 完整教学代码。 > **最后更新：2026 年** · 每一份文件都以极度细致的口语化中文 + 生活化比喻 + 可运行示例的形式编写，适合零基础自学或课堂教学。 --- ## 项目结构 ``` ├── index.html # 课程导航首页 ├── syllabus.html # 完整课程大纲（含行数/建议用时） ├── README.md / README.en.md # 说明文档 │ ├── HTML_Basic/ 14 个文件, ~22,000 行 │ ├── HelloWorld.html # HTML 概念、标签、属性、文档结构 │ ├── html-basic-structure-tags.html # 骨架标签交互式教学 │ ├── tags.html # 30+ 常见标签全解 │ ├── tags2.html # 表格 & 列表深度教程 │ ├── tags3.html # 表单 & div/span & 特殊字符 │ ├── demo_tags.html # 综合实战 Demo 页面 │ ├── html-semantic-tags.html # HTML5 语义化 │ ├── html-forms-deep.html # 表单校验/自定义/上传 │ ├── html-multimedia.html # 音频/视频/嵌入 │ ├── html-accessibility.html # ARIA 无障碍访问 │ ├── html-advanced-topics.html # template/data-*/Shadow DOM │ ├── html-canvas-svg.html # Canvas 绘图 & SVG │ └── exercises.html # 80+ 题 练习册 │ ├── CSS_Basic/ 13 个文件, ~23,000 行 │ ├── css-selectors-basics.html # 选择器大全 + 优先级 │ ├── css-box-model-layout.html # 盒模型/position/display │ ├── css-common-properties.html # 文字/背景/字体/变量 │ ├── css-flexbox-grid.html # Flexbox & Grid 游乐场 │ ├── css-animations-transitions.html # transition/animation/3D │ ├── css-responsive-design.html # 媒体查询/clamp/container │ ├── css-advanced-techniques.html # filter/clip-path/混合 │ ├── css-bem-methodology.html # BEM 命名 + CSS 架构 │ ├── css-preprocessors-intro.html # SCSS/Sass 全面教程 │ ├── css-comprehensive-demo.html # 综合 Demo 页面 │ └── exercises.html # 80+ 题 练习册 │ ├── JS_Basic/ 24 个文件, ~58,000 行 │ ├── js-basics.html # 变量/类型/运算符/控制流 │ ├── js-functions-scope.html # 函数/作用域/闭包/this │ ├── js-builtins.html # Math/Date/RegExp/Map/Set/JSON │ ├── js-dom-events.html # DOM 操作 + 事件机制 │ ├── js-async.html # setTimeout/Promise/async-await │ ├── js-es6-features.html # 解构/Symbol/Proxy/Reflect │ ├── js-classes-oop.html # class/继承/私有字段 │ ├── js-modules.html # ESM import/export/动态导入 │ ├── js-network-fetch.html # Fetch/Axios/REST API │ ├── js-error-debug.html # try-catch/调用栈/调试 │ ├── js-web-apis.html # Storage/Geolocation/Notification │ ├── js-design-patterns.html # 单例/工厂/观察者/策略/代理 │ ├── js-testing-intro.html # Jest/TDD/mock/覆盖率 │ ├── js-devtools-guide.html # Elements/Console/Sources/Network │ ├── git-basics.html # Git add/commit/branch/merge │ ├── build-tools-intro.html # Vite/Webpack/npm 打包 │ ├── typescript-basics.html # TS 类型/接口/泛型 │ ├── web-security-basics.html # XSS/CSRF/CORS/CSP │ ├── http-basics.html # HTTP 方法/状态码/缓存 │ ├── pwa-basics.html # Service Worker/离线/推送 │ ├── web-components.html # 自定义元素/Shadow DOM/slot │ ├── performance-optimization.html # 加载/渲染/缓存优化 │ └── exercises.html # 110 题 练习册 │ ├── Projects/ 6 个独立小应用 │ ├── weather-app.html # 天气查询（Fetch + 城市搜索） │ ├── quiz-app.html # 知识问答（计分 + 计时） │ ├── memory-game.html # 记忆翻牌（配对 + 计时） │ ├── pomodoro-timer.html # 番茄钟（工作/休息模式） │ ├── drawing-app.html # 画板（画笔/形状/撤销） │ └── kanban-app.html # 看板（拖拽/状态列/存储） │ └── Project_Portfolio/ # 完整个人主页综合项目 └── index.html # 导航/Hero/技能/项目/Blog/深色模式 ``` --- ## 学习路线（推荐顺序） ### 第一阶段：HTML 入门 ``` HelloWorld.html → html-basic-structure-tags.html → tags.html → tags2.html → tags3.html → demo_tags.html ``` 练习：`HTML_Basic/exercises.html` ### 第二阶段：HTML 进阶 ``` html-semantic-tags.html → html-forms-deep.html → html-multimedia.html → html-accessibility.html → html-advanced-topics.html → html-canvas-svg.html ``` ### 第三阶段：CSS 入门 ``` css-selectors-basics.html → css-box-model-layout.html → css-common-properties.html ``` 练习：`CSS_Basic/exercises.html` ### 第四阶段：CSS 进阶 ``` css-flexbox-grid.html → css-animations-transitions.html → css-responsive-design.html → css-advanced-techniques.html → css-bem-methodology.html → css-preprocessors-intro.html ``` ### 第五阶段：JavaScript 基础 ``` js-basics.html → js-functions-scope.html → js-builtins.html → js-dom-events.html → js-async.html ``` ### 第六阶段：JavaScript 进阶 ``` js-es6-features.html → js-classes-oop.html → js-modules.html → js-network-fetch.html → js-error-debug.html → js-web-apis.html → js-design-patterns.html → js-testing-intro.html ``` ### 第七阶段：专项进阶 ``` typescript-basics.html → web-security-basics.html → http-basics.html → pwa-basics.html → web-components.html → performance-optimization.html ``` ### 第八阶段：开发工具 ``` js-devtools-guide.html → git-basics.html → build-tools-intro.html ``` ### 第九阶段：动手实践 ``` Projects/weather-app.html → Projects/quiz-app.html → Projects/memory-game.html → Projects/pomodoro-timer.html → Projects/drawing-app.html → Projects/kanban-app.html → Project_Portfolio/index.html ``` 练习：`JS_Basic/exercises.html` ### 综合 Demo 参考 ``` CSS_Basic/css-comprehensive-demo.html → JS_Basic/js-comprehensive-demo.html ``` --- ## 使用方式 1. **直接浏览器打开**：任意 `.html` 文件拖入浏览器即可查看效果 2. **配合编辑器学习**：使用 VS Code 打开，阅读讲解注释的同时修改代码并刷新浏览器 3. **推荐工具**：VS Code + Live Server 插件（可实现修改后自动刷新） 4. **练手建议**：每学完一个文件，尝试自己写一个类似的小案例 --- ## 学习前提 - 无需任何编程基础，本课程从零开始 - 准备一个现代浏览器（Chrome / Edge / Firefox 均可） - 推荐安装 VS Code 编辑器（免费） --- ## 许可证 本项目仅供学习交流使用。