diff --git a/1-getting-started-lessons/1-github-basics/README.md b/1-getting-started-lessons/1-github-basics/README.md index 8a5e480a..0b89459c 100644 --- a/1-getting-started-lessons/1-github-basics/README.md +++ b/1-getting-started-lessons/1-github-basics/README.md @@ -264,7 +264,7 @@ Update your current local working branch with all new commits from the correspon ## How to contribute to open source -First, let's find a repository - or: repo - on GitHub of interest to you and to which you'd like to contribute a change. You will want to copy the contents of to our machine. +First, let's find a repository (or **repo**) on GitHub of interest to you and to which you'd like to contribute a change. You will want to copy its contents to your machine. ✅ A good way to find 'beginner-friendly' repos is to [search by the tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). diff --git a/3-terrarium/2-intro-to-css/README.md b/3-terrarium/2-intro-to-css/README.md index 44ac8dee..2bc08666 100644 --- a/3-terrarium/2-intro-to-css/README.md +++ b/3-terrarium/2-intro-to-css/README.md @@ -194,7 +194,7 @@ First, style the `.terrarium` div children as a rounded rectangle using CSS: height: 80%; width: 60%; background: #d1e1df; - border-radius: 10%; + border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; @@ -224,19 +224,21 @@ First, style the `.terrarium` div children as a rounded rectangle using CSS: } .dirt { - width: 58%; + width: 60%; height: 5%; background: #3a241d; position: absolute; - border-radius: 0 0 4rem 4rem; + border-radius: 0 0 1rem 1rem; bottom: 1%; - left: 21%; + left: 20%; opacity: 0.7; z-index: -1; } ``` -Note the use of percentages here, even for the `border-radius`. If you scale your browser down, you can see how the jar corners scale as well. Also notice the widths and height percentages for the jar elements and how each element is absolutely positioned in the center, pinned to the bottom of the viewport. +Note the use of percentages here. If you scale your browser down, you can see how the jar scales as well. Also notice the widths and height percentages for the jar elements and how each element is absolutely positioned in the center, pinned to the bottom of the viewport. + +We are also using `rem` for the border-radius, a font-relative length. Read more about this type of relative measurement in the [CSS spec](https://www.w3.org/TR/css-values-3/#font-relative-lengths). ✅ Try changing the jar colors and opacity vs. those of the dirt. What happens? Why? diff --git a/3-terrarium/2-intro-to-css/translations/README.es.md b/3-terrarium/2-intro-to-css/translations/README.es.md index 39739db1..e961ebf9 100644 --- a/3-terrarium/2-intro-to-css/translations/README.es.md +++ b/3-terrarium/2-intro-to-css/translations/README.es.md @@ -192,7 +192,7 @@ Primero, diseñe los elementos secundarios `.terrarium` div como un rectángulo height: 80%; width: 60%; background: #d1e1df; - border-radius: 10%; + border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; @@ -222,19 +222,19 @@ Primero, diseñe los elementos secundarios `.terrarium` div como un rectángulo } .dirt { - width: 58%; + width: 60%; height: 5%; background: #3a241d; position: absolute; - border-radius: 0 0 4rem 4rem; + border-radius: 0 0 1rem 1rem; bottom: 1%; - left: 21%; + left: 20%; opacity: 0.7; z-index: -1; } ``` -Tenga en cuenta el uso de porcentajes aquí, incluso para el `border-radius`. Si reduce la escala de su navegador, también puede ver cómo se escalan las esquinas del frasco. Observe también los porcentajes de ancho y alto de los elementos del tarro y cómo cada elemento está absolutamente posicionado en el centro, fijado a la parte inferior de la ventana gráfica. +Tenga en cuenta el uso de porcentajes aquí. Si reduce la escala de su navegador, también puede ver cómo se escalan las esquinas del frasco. Observe también los porcentajes de ancho y alto de los elementos del tarro y cómo cada elemento está absolutamente posicionado en el centro, fijado a la parte inferior de la ventana gráfica. ✅ Intente cambiar los colores y la opacidad del frasco frente a los de la suciedad. ¿Lo que pasa? ¿Por qué? diff --git a/3-terrarium/2-intro-to-css/translations/README.it.md b/3-terrarium/2-intro-to-css/translations/README.it.md index 54d4837c..cbb9e55e 100644 --- a/3-terrarium/2-intro-to-css/translations/README.it.md +++ b/3-terrarium/2-intro-to-css/translations/README.it.md @@ -194,7 +194,7 @@ Innanzitutto, si applica lo stile al div figlio `.terrarium` in modo che sia un height: 80%; width: 60%; background: #d1e1df; - border-radius: 10%; + border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; @@ -224,19 +224,19 @@ Innanzitutto, si applica lo stile al div figlio `.terrarium` in modo che sia un } .dirt { - width: 58%; + width: 60%; height: 5%; background: #3a241d; position: absolute; - border-radius: 0 0 4rem 4rem; + border-radius: 0 0 1rem 1rem; bottom: 1%; - left: 21%; + left: 20%; opacity: 0.7; z-index: -1; } ``` -Notare l'uso delle percentuali qui, anche per il `border-radius` (il raggio del bordo arrotondato). Se si riduce la finestra del browser, si puòi vedere come si ridimensionano anche gli angoli del barattolo. Notare anche le percentuali di larghezza e altezza per gli elementi jar e come ogni elemento sia posizionato in modo assoluto al centro, bloccato nella parte inferiore della finestra visualizzata. +Notare l'uso delle percentuali qui. Se si riduce la finestra del browser, si puòi vedere come si ridimensionano anche gli angoli del barattolo. Notare anche le percentuali di larghezza e altezza per gli elementi jar e come ogni elemento sia posizionato in modo assoluto al centro, bloccato nella parte inferiore della finestra visualizzata. ✅ Provare a cambiare i colori e l'opacità del barattolo rispetto a quelli della terra. Che cosa accade? Perché? diff --git a/3-terrarium/2-intro-to-css/translations/README.ja.md b/3-terrarium/2-intro-to-css/translations/README.ja.md index f7e45c57..329afbff 100644 --- a/3-terrarium/2-intro-to-css/translations/README.ja.md +++ b/3-terrarium/2-intro-to-css/translations/README.ja.md @@ -194,7 +194,7 @@ HTML マークアップの各植物には、id とクラスの組み合わせが height: 80%; width: 60%; background: #d1e1df; - border-radius: 10%; + border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; @@ -224,13 +224,13 @@ HTML マークアップの各植物には、id とクラスの組み合わせが } .dirt { - width: 58%; + width: 60%; height: 5%; background: #3a241d; position: absolute; - border-radius: 0 0 4rem 4rem; + border-radius: 0 0 1rem 1rem; bottom: 1%; - left: 21%; + left: 20%; opacity: 0.7; z-index: -1; } diff --git a/3-terrarium/2-intro-to-css/translations/README.ko.md b/3-terrarium/2-intro-to-css/translations/README.ko.md index 4726ddfe..7f2ec695 100644 --- a/3-terrarium/2-intro-to-css/translations/README.ko.md +++ b/3-terrarium/2-intro-to-css/translations/README.ko.md @@ -194,7 +194,7 @@ HTML 마크업의 각 식물에는 id와 클래스의 조합이 있습니다. id height: 80%; width: 60%; background: #d1e1df; - border-radius: 10%; + border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; @@ -224,13 +224,13 @@ HTML 마크업의 각 식물에는 id와 클래스의 조합이 있습니다. id } .dirt { - width: 58%; + width: 60%; height: 5%; background: #3a241d; position: absolute; - border-radius: 0 0 4rem 4rem; + border-radius: 0 0 1rem 1rem; bottom: 1%; - left: 21%; + left: 20%; opacity: 0.7; z-index: -1; } diff --git a/3-terrarium/2-intro-to-css/translations/README.ms.md b/3-terrarium/2-intro-to-css/translations/README.ms.md index 61efb1ac..d83e4e6c 100644 --- a/3-terrarium/2-intro-to-css/translations/README.ms.md +++ b/3-terrarium/2-intro-to-css/translations/README.ms.md @@ -194,7 +194,7 @@ Pertama, gayakan anak-anak `.terrarium` sebagai segi empat bulat menggunakan CSS height: 80%; width: 60%; background: #d1e1df; - border-radius: 10%; + border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; @@ -224,19 +224,19 @@ Pertama, gayakan anak-anak `.terrarium` sebagai segi empat bulat menggunakan CSS } .dirt { - width: 58%; + width: 60%; height: 5%; background: #3a241d; position: absolute; - border-radius: 0 0 4rem 4rem; + border-radius: 0 0 1rem 1rem; bottom: 1%; - left: 21%; + left: 20%; opacity: 0.7; z-index: -1; } ``` -Perhatikan penggunaan peratusan di sini, walaupun untuk `radius sempadan (border-radius)`. Sekiranya anda menurunkan penyemak imbas anda, anda dapat melihat bagaimana skala sudut jar juga. Perhatikan juga peratusan lebar dan tinggi untuk elemen balang dan bagaimana setiap elemen benar-benar diposisikan di tengah, disematkan ke bahagian bawah pandang. +Perhatikan penggunaan peratusan di sini. Sekiranya anda menurunkan penyemak imbas anda, anda dapat melihat bagaimana skala sudut jar juga. Perhatikan juga peratusan lebar dan tinggi untuk elemen balang dan bagaimana setiap elemen benar-benar diposisikan di tengah, disematkan ke bahagian bawah pandang. ✅ Cubalah ubah warna balang dan kelegapan berbanding kotoran. Apa yang berlaku? Kenapa? diff --git a/3-terrarium/solution/README.md b/3-terrarium/solution/README.md index 7dd0df8e..c5a329db 100644 --- a/3-terrarium/solution/README.md +++ b/3-terrarium/solution/README.md @@ -1 +1,28 @@ -This is a placeholder, left blank purposefully \ No newline at end of file +# My Terrarium: A project to learn about HTML, CSS, and DOM manipulation using JavaScript 🌵🌱 + +A small drag and drop code-meditation. With a little HTML, JS and CSS, you can build a web interface, style it, and add an interaction. + +![my terrarium](../images/screenshot_gray.png) + +## Credits + +Written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper) + +The terrarium created via CSS 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 to the web using Azure Static Web Apps. + +1. Fork this repo + +2. Press this button + +[![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. Walk through the wizard creating your app. Make sure you set the app root to either be `/solution` or the root of your codebase. There's no API in this app, so don't worry about adding that. A .github folder will be created in your forked repo that will help Azure Static Web Apps' build service build and publish your app to a new URL. + + + diff --git a/3-terrarium/solution/style.css b/3-terrarium/solution/style.css index 26720f45..9c627e83 100644 --- a/3-terrarium/solution/style.css +++ b/3-terrarium/solution/style.css @@ -43,7 +43,7 @@ h1 { height: 80%; width: 60%; background: #d1e1df; - border-radius: 10%; + border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; @@ -73,13 +73,13 @@ h1 { } .dirt { - width: 58%; + width: 60%; height: 5%; background: #3a241d; position: absolute; - border-radius: 0 0 4rem 4rem; + border-radius: 0 0 1rem 1rem; bottom: 1%; - left: 21%; + left: 20%; opacity: 0.7; z-index: -1; }