Web-Dev-For-Beginners/translations/zh/3-terrarium/README.md

<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
  "translation_date": "2025-08-23T22:23:07+00:00",
  "source_file": "3-terrarium/README.md",
  "language_code": "zh"
}
-->
# 我的微型生态瓶：一个学习HTML、CSS和使用JavaScript操作DOM的项目 🌵🌱

一个小型的拖放代码冥想项目。通过一些HTML、JS和CSS，你将能够构建一个网页界面，对其进行样式设计，甚至添加你选择的多种交互功能。

![我的微型生态瓶](../../../3-terrarium/images/screenshot_gray.png)

# 课程

1. [HTML入门](./1-intro-to-html/README.md)  
2. [CSS入门](./2-intro-to-css/README.md)  
3. [DOM和JS闭包入门](./3-intro-to-DOM-and-closures/README.md)  

## 致谢

由[Jen Looper](https://www.twitter.com/jenlooper)用 ♥️ 编写。

通过CSS创建的微型生态瓶灵感来源于Jakub Mandra的玻璃罐 [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY)。

艺术作品由[Jen Looper](http://jenlooper.com)手绘完成，并借助Procreate完成。

## 部署你的微型生态瓶

你可以使用Azure Static Web Apps将你的微型生态瓶部署或发布到网上。

1. Fork此代码库

2. 点击这个按钮

[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)

3. 按照向导创建你的应用。确保将应用根目录设置为`/solution`或你的代码库的根目录。此应用中没有API，因此无需担心添加API。一个GitHub文件夹将会在你Fork的代码库中创建，这将帮助Azure Static Web Apps的构建服务构建并将你的应用发布到一个新的URL。

**免责声明**：  
本文档使用AI翻译服务[Co-op Translator](https://github.com/Azure/co-op-translator)进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文档应被视为权威来源。对于关键信息，建议使用专业人工翻译。我们不对因使用此翻译而产生的任何误解或误读承担责任。