Edition et exécution en ligne de codes HTML et CSS

L’apprentissage du HTML couplé à son copain le CSS passe par l’utilisation d’outils à la fois pratiques et simples afin de se compliquer le moins possible l’existence.

mozilla-thimble

Les tutoriels et livres consacrés à ses sujets préconisent le plus souvent l’emploi d’un éditeur texte (genre Notepad++) pour créer des fichiers puis de les ouvrir dans un navigateur Web pour voir les résultats obtenus.

Cela fonctionne parfaitement, mais la démarche est quand même un peu lourde et répétitive.

Pour faciliter les choses, Mozilla met à disposition des apprentis programmeurs un outil en ligne appelé Mozilla Thimble, pour saisir et exécuter du code HTML et du CSS (feuilles de style). Il est même prévu de publier et de partager son code.

L’application est très bien faite et permet soit de partir de zéro (Start from scratch) pour créer une page Web, soit d’étudier les projets déjà en ligne afin de les étudier et de s’en inspirer (Pick a project).

La page blanche contient le squelette et les quelques balises nécessaires à tout projet, puis c’est à vous de jouer. L’interface est volontairement minimaliste :

  • Les lignes sont numérotées
  • Fonctions d’annulation
  • Taille de texte
  • Conseils
  • Correction des erreurs
  • Coloration syntaxique
  • Indentation

L’éditeur est  vraiment agréable à utiliser et les conseils souvent judicieux. A droite de l’écran on voit instantanément son code prendre forme dans une zone de prévisualisation où la page HTML se construit au fur et à mesure de la saisie. On peut très bien copier du code existant pour l’examiner et le modifier, les changements apportés sont immédiatement répercutés dans la fenêtre de visualisation.

mozilla-thimble-editeur

A ce titre, Mozilla Thimble constitue un remarquable outil d’apprentissage que vous pouvez utiliser en plus de l’excellent site Code Academy dont j’ai déjà parlé et qui depuis s’est considérablement étoffé proposant maintenant des cours complets pour les débutants en HTLM, CSS et Javascript dans un style direct sans verbiage théorique.

Source : Mozilla Thimble

Nouvelle version de Mozilla Thimble

Publicités

Les commentaires sont fermés.

%d blogueurs aiment cette page :