# マイテラリウム: JavaScript を使った HTML・CSS・DOM 操作を学ぶプロジェクト 🌵🌱

ちょっとしたドラッグ＆ドロップのコードメディテーション。少しの HTML、JS、CSS で、Web インターフェースを構築し、スタイルを設定し、インタラクションを追加することができます。

![my terrarium](images/screenshot_gray.png)

# レッスン

1. [HTML 入門](./1-intro-to-html/README.md)
2. [CSS 入門](./2-intro-to-css/README.md)
3. [DOM と JS Closures の紹介](./3-intro-to-DOM-and-closures/README.md)

## クレジット

Written with ♥️  by [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-13441-cxa#create/Microsoft.StaticApp)

3. アプリを作成するウィザードに沿って進みます。アプリのルートを `/solution` またはコードベースのルートに設定してください。このアプリには API はありませんので、追加については心配しないでください。フォークされたレポに .github フォルダが作成され、Azure Static Web Apps のビルドサービスのビルドを支援し、新しい URL にアプリを公開します。