https://github.com/dogxii/zero-frontend
从🥚到1学习前端 教程实践路线图 :) 前端初学者教程，HTML CSS JavaScript Nodejs React TypeScript
https://github.com/dogxii/zero-frontend
css frontend html javascript react tutorial
Last synced: about 2 months ago
JSON representation
从🥚到1学习前端 教程实践路线图 :) 前端初学者教程，HTML CSS JavaScript Nodejs React TypeScript
- Host: GitHub
- URL: https://github.com/dogxii/zero-frontend
- Owner: dogxii
- License: mit
- Created: 2025-07-09T14:53:33.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-12-04T12:14:37.000Z (4 months ago)
- Last Synced: 2025-12-07T20:09:38.799Z (4 months ago)
- Topics: css, frontend, html, javascript, react, tutorial
- Homepage:
- Size: 72.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# zero-frontend
> 因为我都要看一遍，所以正在更新中...
从 🥚 到 1 学习前端，推荐我觉得不错的教程(+实践)学习路线，从上往下 :D
> [!NOTE]
> 学一点做一点，先做堆垃圾出来！
> 文字教程偏多，可能会有些乏味，可视学习效率切换视频教程学习。
---
### 🌐 HTML（网页结构）
-> [HTML - 学习 Web 开发 | MDN](https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Structuring_content)
HTML 语言的全貌和基本的工作原理 -> 学习 HTML 头部 -> 语义 HTML -> HTML 基本语义元素（标题 强调 列表…） -> 文档与网站架构 -> 不常见 HTML 文本语义标签 -> 超链接 `` -> HTML 图片 (略 Canvas, SVG, WebGL) -> HTML 视频音频 -> HTML 表格 -> HTML 表单和按钮 -> HTML 调试 -> over
- **W3C 验证规范服务**:
- [Nu HTML Checker](https://validator.w3.org/nu/)
---
### 🎨 CSS（网页样式）
-> [CSS 基础 - 学习 Web 开发 | MDN](https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics)
CSS 基础及如何运行 -> CSS 添加样式的方法 -> CSS 选择器 -> 属性选择器 -> 伪类和伪元素 -> 关系选择器 -> 盒模型 -> 层叠、优先级与继承 -> 值和单位 -> 在 CSS 中调整大小 -> 内容溢出 -> 图像、媒体和表单元素 -> 样式化表格 -> 调试 CSS -> Chrome DevTools -> CSS 文本样式 -> CSS 排版（浮动、定位、弹性盒子、网格、响应式设计、媒体查询）-> over
- **标准化CSS**:
- [normalize.css](https://necolas.github.io/normalize.css/)
- [modern-normalize.css](https://github.com/sindresorhus/modern-normalize)
- **Chrome 开发者工具**:
- [Element Panel | Chrome DevTools](https://developer.chrome.google.cn/docs/devtools/elements?hl=zh-cn)
---
### 🏗 HTML + CSS
让我们做一些挑战，fork 它并开始吧 🚀:
-> [30daysCSS | CSS 项目挑战](https://github.com/dogxii/30daysCSS)
---
### 💻 JavaScript（脚本语言）
-> [JavaScript 脚本交互 | MDN](https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting)
JavaScript 了解 -> 变量 -> 数字与运算符 -> 字符串 -> 字符串方法 -> 数组 -> 条件语句 -> 循环语句 -> 函数 -> 事件 -> 事件冒泡 -> 对象基础 -> DOM 脚本简介 -> 服务器获取数据(fetch) -> 使用 JSON -> 处理常见 JavaScript 问题 -> over
> 与 HTML 和 CSS 相比，JavaScript 作为一门完整的编程语言，其学习路线更为复杂和多样化，所以难以用简单的步骤概括。
- Other:
- [阮一峰 JavaScript 教程](https://wangdoc.com/javascript/) (推荐)
- [ECMAScript 6 教程](https://wangdoc.com/es6)
---
### 🧩 Mini Webs (HTML + CSS + JS)
继续我们的挑战！🚀:
-> [20miniWebs | JS 项目挑战](https://github.com/dogxii/miniWebs)
---
### TypeScript （JavaScript 超集）
-> [TypeScript 官方教程](https://www.typescriptlang.org/zh/docs/handbook/typescript-from-scratch.html)
Get Started -> The Basics -> Everyday Types -> Narrowing -> More on Functions -> Object Types -> Type Manipulation -> Class ->
- Other:
- [阮一峰 TypeScript 教程](https://wangdoc.com/typescript/)
---
### ⚛ React (Web 框架)
> React 严格来说是一个渲染用户组件的库
-> [JavaScript 框架和库 | MDN](https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries)
客户端框架介绍 -> 框架主要特性 -> React 事件和状态 -> React 交互性 -> React 可访问性 -> React 资源
-> [React.dev | 官方文档](https://zh-hans.react.dev/learn)
快速入门 -> 井字棋游戏 -> React 哲学 -> React 安装及配置 -> React 编译器 -> 描述 UI -> 摸鱼一天~
因为还在鸽上面的 miniwebs 所以没有日更了 qwq
---
## 额外学习
### Sass (CSS 预处理器)
### Tailwindcss (CSS 框架)
### Vitest (自动化测试)
### Nextjs (Meta 框架)
---
## 其他资源
- [初学者的 Web 开发课程 | Microsoft](https://microsoft.github.io/Web-Dev-For-Beginners/#/./translations/zh/README)