# learning-area

**Repository Path**: monkeycf/learning-area

## Basic Information

- **Project Name**: learning-area
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: CC0-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-05-22
- **Last Updated**: 2021-10-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# learning-area

欢迎访问 [MDN 学习区](https://developer.mozilla.org/zh-CN/Learn) Github 仓库中文版。

这里有学习区中展示、讨论的大部分示例代码，本 repo 文件夹结构与网站结构保持一致。

英文版中 [Web 入门]()、[服务器端编程]() 示例是单独的 repos，本 repo 一并收录。

以下内容不定期更新，希望老铁你能喜欢，觉得还不错请双击 666~ 😂

----

## 汉化目录

### 0. Web 入门

1. [示例](https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site)
[代码](https://github.com/roy-tian/learning-area/tree/master/extras/getting-started-web/beginner-html-site)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics) |
HTML 基础：Mozilla 酷毙了
2. [示例](https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site-styled)
[代码](https://github.com/roy-tian/learning-area/tree/master/extras/getting-started-web/beginner-html-site-styled) 
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics) |
CSS 基础：Mozilla 酷毙了（样式版）
3. [示例](https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site-scripted)
[代码](https://github.com/roy-tian/learning-area/tree/master/extras/getting-started-web/beginner-html-site-scripted)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics) |
JavaScript 基础：Mozilla 酷毙了（脚本版）

### 1. HTML

#### 1.1 HTML 初步

1. [示例](https://roy-tian.github.io/learning-area/html/introduction-to-html/getting-started)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/getting-started)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started) |
开始学习 HTML
1. [示例](https://roy-tian.github.io/learning-area/html/introduction-to-html/document-and-website-structure)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/document-and-website-structure)
[章节](https://developer.mozilla.org/zh-CN/docs/learn/HTML/Introduction_to_HTML/文件和网站结构) |
文档和站点结构：二次元俱乐部
2. [示例](https://roy-tian.github.io/learning-area/html/introduction-to-html/debugging-html/debug-example.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/debugging-html)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) |
HTML 调试
3. [示例](https://roy-tian.github.io/learning-area/html/introduction-to-html/marking-up-a-letter-finished)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/marking-up-a-letter-finished)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML) |
章节测验：纽臂大学邮件
4. [示例](https://roy-tian.github.io/learning-area/html/introduction-to-html/structuring-a-page-of-content-finished)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/introduction-to-html/structuring-a-page-of-content-finished)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) |
章节测验：观鸟网

#### 1.2 HTML 多媒体和嵌入元素

1. [示例](https://roy-tian.github.io/learning-area/html/multimedia-and-embedding/mdn-splash-page-finished)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-finished)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page) |
章节测验：Mozilla 宣传页

#### 1.3 HTML 表格

1. [示例](https://roy-tian.github.io/learning-area/html/tables/assessment-finished/planets-data.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/html/tables/assessment-finished)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables/Structuring_planet_data) |
章节测验：太阳系行星数据

### 3. JavaScript

#### 3.1 JavaScript 初步

1. [示例](https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html) 
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/introduction-to-js-1/what-is-js)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript) |
什么是 JavaScript
2. [示例](https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/introduction-to-js-1/first-splash)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash) |
JavaScript 初体验：猜数字游戏
3. [示例](https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished)
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/introduction-to-js-1/assessment-finished)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator) |
章节测验：笑话机

#### 3.2 JavaScript 基础要件

1. [示例](https://roy-tian.github.io/learning-area/javascript/building-blocks/gallery)
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/building-blocks/gallery)
[章节](https://developer.mozilla.org/zh-CN/docs/learn/JavaScript/Building_blocks/相片走廊) |
章节测验：照片库

#### 3.3 JavaScript 对象

1. [示例](https://roy-tian.github.io/learning-area/javascript/oojs/bouncing-balls)
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/oojs/bouncing-balls)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_building_practice) |
实践对象构造：弹球
2. [示例](https://roy-tian.github.io/learning-area/javascript/oojs/assessment)
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/oojs/assessment)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/向“弹跳球”演示程序添加新功能) |
章节测验：弹球 + 恶魔圈
2. [示例](https://roy-tian.github.io/learning-area/javascript/oojs/assessment-es-class)
[代码](https://github.com/roy-tian/learning-area/tree/master/javascript/oojs/assessment-es-class)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/向“弹跳球”演示程序添加新功能) |
章节测验：弹球 + 恶魔圈（ES6 版）

### A. 其他工具

1. [示例](https://roy-tian.github.io/learning-area/extras/tools/playable-code)
[代码](https://github.com/roy-tian/learning-area/tree/master/extras/tools/playable-code)
[章节](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics) |
Web 入门：代码操场
2. [示例](https://roy-tian.github.io/learning-area/extras/tools/color-picker)
[代码](https://github.com/roy-tian/learning-area/tree/master/extras/tools/color-picker)
[章节](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Colors/Color_picker_tool) |
CSS 颜色选择工具
3. [示例](https://roy-tian.github.io/learning-area/extras/tools/key-event)
[代码](https://github.com/roy-tian/learning-area/tree/master/extras/tools/key-event)
[章节](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key) |
按键事件
4. [示例](https://roy-tian.github.io/learning-area/extras/tools/touch-paint)
[代码](https://github.com/roy-tian/learning-area/tree/master/extras/tools/touch-paint)
[章节](https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events) |
触摸绘图板