# 我的盆栽盒：一個關於 HTML、CSS 與 JavaScript DOM 控制的專案 🌵🌱

深思一項小型互動式拖放程式專案，在 HTML、JS 與 CSS 的帶領下，你可以建立網頁介面，美化它，並增加互動功能。

![我的盆栽盒](../images/screenshot_gray.png)

# 課程

1. [HTML 簡介](../1-intro-to-html/translations/README.zh-tw.md)
2. [CSS 簡介](../2-intro-to-css/translations/README.zh-tw.md)
3. [DOM 簡介與閉包](../3-intro-to-DOM-and-closures/translations/README.zh-tw.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. 分叉這個數據庫

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，你不需要考慮額外匯入的問題。 .github 資料夾會建立在你的分叉數據庫中，它會幫助 Azure Static Web Apps 的組建服務並發布你的應用到新的網址。