diff --git a/3-terrarium/translations/README.fr.md b/3-terrarium/translations/README.fr.md new file mode 100644 index 00000000..3a417561 --- /dev/null +++ b/3-terrarium/translations/README.fr.md @@ -0,0 +1,34 @@ +# Mon Terrarium : un projet pour en savoir plus sur la manipulation HTML, CSS et DOM Ă  l'aide de JavaScript đŸŒ”đŸŒ± + +Un petit code de mĂ©ditation de type glisser-dĂ©poser. Avec un peu de HTML, JS et CSS, vous pouvez crĂ©er une interface Web, la styliser et ajouter une interaction. + +![mon terrarium](../images/screenshot_gray.png) + +# Cours + +1. [Introduction au HTML](../1-intro-to-html/translations/README.fr.md) +2. [Introduction au CSS](../2-intro-to-css/translations/README.fr.md) +3. [Introduction au DOM et aux closures JS](../3-intro-to-DOM-and-closures/translations/README.fr.md) + +## CrĂ©dits + +RĂ©digĂ© avec ♄ par [Jen Looper](https://www.twitter.com/jenlooper) + +Le terrarium crĂ©Ă© via CSS a Ă©tĂ© inspirĂ© du pot en verre de Jakub Mandra[codepen](https://codepen.io/Rotarepmi/pen/rjpNZY). + +L'Ɠuvre a Ă©tĂ© dessinĂ©e Ă  la main par [Jen Looper](http://jenlooper.com) en utilisant Procreate. + +## DĂ©ployez votre Terrarium + +Vous pouvez dĂ©ployer ou publier votre terrarium sur le Web Ă  l'aide d'Azure Static Web Apps. + +1. Forkez ce repo + +2. Appuyez sur ce bouton + +[![Bouton dĂ©ployez sur Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp) + +3. Parcourez l'assistant de crĂ©ation de votre application. Assurez-vous de dĂ©finir la racine de l'application sur `/solution` ou sur la racine de votre base de code. Il n'y a pas d'API dans cette application, alors ne vous inquiĂ©tez pas pour en ajouter. Un dossier .github sera crĂ©Ă© dans votre rĂ©fĂ©rentiel forkĂ© qui aidera le service de crĂ©ation d'Azure Static Web Apps Ă  crĂ©er et Ă  publier votre application sur une nouvelle URL. + + + diff --git a/4-typing-game/translations/README.fr.md b/4-typing-game/translations/README.fr.md new file mode 100644 index 00000000..0c16701c --- /dev/null +++ b/4-typing-game/translations/README.fr.md @@ -0,0 +1,30 @@ +# Programmation Ă©vĂ©nementielle - DĂ©velopper un jeu de dactylographie + +## Introduction + +La dactylographie est l'une des compĂ©tences les plus sous-estimĂ©es du dĂ©veloppeur. La possibilitĂ© de transfĂ©rer rapidement des pensĂ©es de votre tĂȘte Ă  votre Ă©diteur permet Ă  la crĂ©ativitĂ© de circuler librement. L'une des meilleures façons d'apprendre est de jouer Ă  un jeu! + +> Alors, dĂ©veloppons un jeu de dactylographie ! + +Vous allez utiliser les compĂ©tences JavaScript, HTML et CSS que vous avez acquises jusqu'Ă  prĂ©sent pour crĂ©er un jeu de dactylographie. Le jeu prĂ©sentera au joueur une citation alĂ©atoire (nous utilisons des citations de[Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes)) et le temps qu'il faudra au joueur pour la taper avec prĂ©cision. Vous allez utiliser les compĂ©tences JavaScript, HTML et CSS que vous avez acquises jusqu'Ă  prĂ©sent pour crĂ©er un jeu de dactylographie. + +![dĂ©mo](../images/demo.gif) + +## PrĂ©requis + +Cette leçon suppose que vous connaissez les concepts suivants : + +- CrĂ©ation de champs de saisie de texte et de contrĂŽles de boutons +- CSS et paramĂštrage de styles Ă  l'aide de classes +- Les bases de JavaScript + - CrĂ©ation d'un tableau + - CrĂ©ation d'un nombre alĂ©atoire + - Obtenir l'heure actuelle + +## Leçon + +[CrĂ©ation d'un jeu de dactylographie en utilisant la programmation Ă©vĂ©nementielle](../typing-game/translations/README.fr.md) + +## CrĂ©dits + +RĂ©digĂ© avec ♄ par [Christopher Harrison](http://www.twitter.com/geektrainer)