Merge pull request #354 from ManuSquall/main
[fr] add readme.fr.md for 3-terrarium base READMEpull/359/head
commit
52632bb6f9
@ -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.
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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)
|
Loading…
Reference in new issue