HTML Code Play: Learn HTML

Apprenez le développement web en modifiant du code et en observant son impact. HTML Code Play combine des leçons de HTML, CSS et JavaScript avec un éditeur de code mobile, des exemples exécutables, des quiz et des jeux de programmation. Utilisez-le pour étudier un concept, le mettre en pratique et suivre votre progression sur le même appareil.

LIRE, MODIFIER ET EXÉCUTER

Explorez le catalogue d'apprentissage, ouvrez un tutoriel et lisez son explication ainsi qu'un exemple de code complet. Envoyez l'exemple à l'éditeur, exécutez l'original, puis modifiez une balise, un style ou une expression et comparez le résultat. Ce processus pratique vous permet de faire le lien entre la syntaxe que vous lisez et la page ou le comportement qu'elle génère.

L'espace de travail prend en charge l'édition HTML, CSS et JavaScript avec coloration syntaxique. Utilisez les fonctions Annuler et Rétablir pour expérimenter, recherchez du texte, accédez à une ligne et ajustez la taille de la police. Créez une nouvelle page ou choisissez un modèle disponible pour démarrer. Ouvrez des fichiers HTML, enregistrez votre travail, utilisez « Enregistrer sous » pour en faire une copie ou partagez un fichier de code via les options de partage de votre appareil.

APPRENTISSAGE GUIDÉ ET EXERCICES

Le catalogue couvre 11 thèmes liés aux technologies web, de la structure et du style des pages à la programmation, aux graphismes vectoriels, aux mises en page responsives et aux exemples interactifs. Recherchez les leçons par titre ou section pour accéder directement aux ressources dont vous avez besoin. Épinglez les tutoriels utiles pour une révision ciblée, ajoutez vos propres notes et naviguez entre les tutoriels grâce aux boutons « Précédent » et « Suivant ».

Chaque tutoriel propose une explication, la syntaxe et un exemple pratique. Poursuivez avec un quiz ou un exercice pratique. Les exercices pratiques vous invitent à compléter le code manquant, avec des indices et des commentaires pour vous aider à identifier l'erreur. Les résultats des quiz vous permettent de vérifier votre compréhension avant de reprendre la leçon.

SIX FAÇONS DE S'ENTRAÎNER

Choisissez un jeu de programmation pour travailler une compétence différente :

- Constructeur de code : réorganisez les blocs pour reconstruire un code fonctionnel.

- Détective de la sortie : prédisez le résultat d'un extrait de code.

- Chasse aux bugs : identifiez une ligne de code erronée.

- Complétez le trou : choisissez le jeton de code manquant.

- Atelier d'association : reliez les termes à leurs définitions. - Questions rapides : répondez à des questions vrai/faux contre la montre.

Les niveaux d'activité enregistrent vos résultats et débloquent l'étape suivante. Rejouez les niveaux disponibles pour améliorer votre score ou utilisez les listes de lecture d'entraînement variées dès leur disponibilité.

ORGANISEZ VOTRE APPRENTISSAGE

L'écran de progression récapitule les leçons, les quiz et les exercices par technologie. Consultez votre carte des compétences et le plan d'étude suggéré, reprenez une leçon depuis l'accueil et relevez le défi quotidien. Vos séries et badges de défi rendent votre activité visible. Les rappels d'apprentissage optionnels nécessitent l'autorisation des notifications et peuvent être désactivés.

Votre progression, vos notes et vos résultats de jeu sont enregistrés sur l'appareil. Les commandes de l'écran d'apprentissage incluent des polices plus grandes, un contraste élevé et une animation réduite. Les évaluations HTML, CSS et JavaScript distinctes offrent des certificats de réussite intégrés à l'application ; il s'agit de relevés d'apprentissage, et non d'une qualification reconnue.

Les publications de la communauté en ligne offrent une autre source de code à explorer une fois connecté. Le contenu et les exemples en réseau qui chargent des ressources externes nécessitent un accès Internet ; le stockage local de la progression ne permet pas la synchronisation avec le cloud.

Pour les débutants, les étudiants et les apprenants qui revoient les concepts du développement front-end, commencez par un exemple, apportez une petite modification et développez votre compréhension par la pratique.