|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "7965cd2bc5dc92ad888dc4c6ab2ab70a",
|
|
|
"translation_date": "2025-08-28T11:48:27+00:00",
|
|
|
"source_file": "3-terrarium/README.md",
|
|
|
"language_code": "en"
|
|
|
}
|
|
|
-->
|
|
|
# My Terrarium: A project to learn about HTML, CSS, and DOM manipulation using JavaScript 🌵🌱
|
|
|
|
|
|
A small drag-and-drop coding exercise. With a bit of HTML, JS, and CSS, you’ll be able to create a web interface, style it, and even add various interactions of your choice.
|
|
|
|
|
|
|
|
|
|
|
|
# Lessons
|
|
|
|
|
|
1. [Introduction to HTML](./1-intro-to-html/README.md)
|
|
|
2. [Introduction to CSS](./2-intro-to-css/README.md)
|
|
|
3. [Introduction to DOM and JS Closures](./3-intro-to-DOM-and-closures/README.md)
|
|
|
|
|
|
## Credits
|
|
|
|
|
|
Written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
|
|
|
|
|
|
The CSS-based terrarium design was inspired by Jakub Mandra's glass jar [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
|
|
|
|
|
|
The artwork was hand-drawn by [Jen Looper](http://jenlooper.com) using Procreate.
|
|
|
|
|
|
## Deploy your Terrarium
|
|
|
|
|
|
You can deploy or publish your terrarium on the web using Azure Static Web Apps.
|
|
|
|
|
|
1. Fork this repository.
|
|
|
|
|
|
2. Click this button:
|
|
|
|
|
|
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
|
|
|
|
|
3. Follow the wizard to create your app. Make sure to set the app root to either `/solution` or the root of your codebase. This app doesn’t include an API, so you don’t need to add one. A GitHub folder will be created in your forked repository, which will help Azure Static Web Apps' build services to build and publish your app to a new URL.
|
|
|
|
|
|
---
|
|
|
|
|
|
**Disclaimer**:
|
|
|
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation. |
