zero-frontend

因为我都要看一遍，所以正在更新中...

从 🥚 到 1 学习前端，推荐我觉得不错的教程(+实践)学习路线 :D

Note

学一点做一点，先做堆垃圾出来！

---

🌐 HTML

-> HTML - 学习 Web 开发 | MDN

HTML 语言的全貌和基本的工作原理 -> 学习 HTML 头部 -> 语义 HTML -> HTML 基本语义元素（标题 强调 列表…） -> 文档与网站架构 -> 不常见 HTML 文本语义标签 -> 超链接 <a> -> HTML 图片 (略 Canvas, SVG, WebGL) -> HTML 视频音频 -> HTML 表格 -> HTML 表单和按钮 -> HTML 调试 -> over

• W3C 验证规范服务:
  • Nu HTML Checker

---

🎨 CSS

-> CSS 基础 - 学习 Web 开发 | MDN

CSS 基础及如何运行 -> CSS 添加样式的方法 -> CSS 选择器 -> 属性选择器 -> 伪类和伪元素 -> 关系选择器 -> 盒模型 -> 层叠、优先级与继承 -> 值和单位 -> 在 CSS 中调整大小 -> 内容溢出 -> 图像、媒体和表单元素 -> 样式化表格 -> 调试 CSS -> Chrome DevTools -> CSS 文本样式 -> CSS 排版（浮动、定位、弹性盒子、网格、响应式设计、媒体查询）-> over

• 标准化CSS:

  • normalize.css
  • modern-normalize.css

• Chrome 开发者工具:

  • Element Panel | Chrome DevTools

---

🏗 HTML + CSS

让我们做一些挑战，fork 它并开始吧 🚀:

-> 30daysCSS | CSS 项目挑战

---

💻 JavaScript

-> JavaScript 脚本交互 | MDN

JavaScript 了解 -> 变量 -> 数字与运算符 -> 字符串 -> 字符串方法 -> 数组 -> 条件语句 -> 循环语句 -> 函数 -> 事件 -> 事件冒泡 -> 对象基础 -> DOM 脚本简介 -> 服务器获取数据(fetch) -> 使用 JSON -> 处理常见 JavaScript 问题 -> over

与 HTML 和 CSS 相比，JavaScript 作为一门完整的编程语言，其学习路线更为复杂和多样化，所以难以用简单的步骤概括。

• Other:
  • 阮一峰 JavaScript 教程 (推荐)
  • ECMAScript 6 教程
  • TypeScript 教程

---

🧩 Mini Webs (HTML + CSS + JS)

继续我们的挑战！🚀:

-> 20miniWebs | JS 项目挑战

---

⚛ React

-> JavaScript 框架和库 | MDN

客户端框架介绍 -> 框架主要特性 -> React 事件和状态 -> React 交互性 -> React 可访问性 -> React 资源

-> React.dev | 官方文档

快速入门 -> 井字棋游戏 -> React 哲学 -> React 安装及配置 -> React 编译器 -> 描述 UI -> 摸鱼一天~