Merge branch 'main' into translate-tw

1-getting-started-lessons/1-intro-to-programming-languages/translations/README.gr.md

@@ -2,11 +2,11 @@
 
 Αυτό το μάθημα καλύπτει τα βασικά των γλωσσών προγραμματισμού. Τα θέματα που καλύπτονται εδώ ισχύουν για τις περισσότερες σύγχρονες γλώσσες προγραμματισμού σήμερα. Στην ενότητα 'Εργαλεία του Εμπορίου', θα μάθετε για χρήσιμο λογισμικό που σας βοηθά ως προγραμματιστές.
 
-![Intro Programming](webdev101-programming.png)
+![Intro Programming](../webdev101-programming.png)
 > Σκίτσο από [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ## Pre-Lecture Quiz
-[Pre-Lecture Quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1)
+[Pre-Lecture Quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1?loc=gr)
 
 ## Εισαγωγή
 
@@ -181,7 +181,7 @@ back add r0,r1
 Συγκρίνετε μερικές γλώσσες προγραμματισμού. Ποια είναι τα μοναδικά χαρακτηριστικά που έχει η JavaScript και δεν έχει η Java και το αντίστροφο; Τι γίνεται με τη COBOL εναντίον της Go;
 
 ## Post-Lecture Quiz
-[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2)
+[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2?loc=gr)
 
 ## Review & Self Study 
 

1-getting-started-lessons/2-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/).
 

1-getting-started-lessons/3-accessibility/translations/README.es.md

@@ -1,6 +1,6 @@
 # Creación de páginas web accesibles
 
-![Todo sobre accesibilidad](webdev101-a11y.png)
+![Todo sobre accesibilidad](../webdev101-a11y.png)
 > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
 
 ## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5)

1-getting-started-lessons/translations/README.it.md

@@ -4,9 +4,9 @@ In questa sezione del curriculum, vi saranno introdotti concetti non relativi al
 
 ### Argomenti
 
-1. [Introduzione ai Linguaggi di Programmazione e agli Strumenti Necessari](1-intro-to-programming-languages/translations/README.id.md)
+1. [Introduzione ai Linguaggi di Programmazione e agli Strumenti Necessari](../1-intro-to-programming-languages/translations/README.it.md)
-2. [Concetti base di GitHub](2-github-basics/translations/README.it.md)
+2. [Concetti base di GitHub](../2-github-basics/translations/README.it.md)
-3. [Concetti base di Accessibilità](3-accessibility/translations/README.it.md)
+3. [Concetti base di Accessibilità](../3-accessibility/translations/README.it.md)
 
 ### Riconoscimenti
 

1-getting-started-lessons/translations/README.ja.md

@@ -4,9 +4,9 @@
 
 ### トピック
 
-1. [プログラミング言語と開発ツール入門](1-intro-to-programming-languages/README.md)
+1. [プログラミング言語と開発ツール入門](../1-intro-to-programming-languages/translations/README.ja.md)
-2. [GitHub の基本](2-github-basics/README.md)
+2. [GitHub の基本](../2-github-basics/translatiions/README.ja.md)
-3. [アクセシビリティの基本](3-accessibility/README.md)
+3. [アクセシビリティの基本](../3-accessibility/translations/README.ja.md)
 
 ### Credits
 

1-getting-started-lessons/translations/README.ms.md

@@ -4,9 +4,9 @@ Dalam bahagian kurikulum ini, anda akan diperkenalkan kepada konsep bukan projek
 
 ### Topik
 
-1. [Pengenalan Bahasa Pengaturcaraan dan Alat Perdagangan](1-intro-to-programming-languages/README.md)
+1. [Pengenalan Bahasa Pengaturcaraan dan Alat Perdagangan](../1-intro-to-programming-languages/translations/README.ms.md)
-2. [Pengetahuan Asas tentang GitHub](2-github-basics/README.md)
+2. [Pengetahuan Asas tentang GitHub](../2-github-basics/translations/README.ms.md)
-3. [Asas Kebolehcapaian](3-accessibility/README.md)
+3. [Asas Kebolehcapaian](../3-accessibility/translations/README.ms.md)
 
 ### Kredit
 

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?
 

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é?
 

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é?
 

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;
 }

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;
 }

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?
 

3-terrarium/solution/README.md

@@ -1 +1,28 @@
-This is a placeholder, left blank purposefully
+# 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.
+
+
+

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;
 }

quiz-app/src/App.vue

@@ -5,10 +5,13 @@
       <label for="locale">locale</label>
       <select v-model="locale">
         <option>en</option>
+        <option>es</option>
         <option>ko</option>
         <option>id</option>
         <option>hi</option>
         <option>it</option>
+        <option>gr</option>
+        <option>ms</option>
         <option>zh_tw</option>
       </select>
     </nav>

quiz-app/src/assets/translations/index.js

@@ -5,6 +5,9 @@ import id from './id.json';
 import hi from './hi.json';
 import it from './it.json';
 import ja from './ja.json';
+import gr from './gr.json';
+import ms from './ms.json';
+import es from './es.json';
 import zh_tw from './zh_tw.json';
 
 //export const defaultLocale = 'en';
@@ -16,7 +19,10 @@ const messages = {
 	hi: hi[0],
 	it: it[0],
 	ja: ja[0],
-	zh_tw: zh_tw[0],
+	gr: gr[0],
+	ms: ms[0],
+	es: es[0],
+  zh_tw: zh_tw[0],
 };
 
 export default messages;