L'éditeur de code en ligne : écrivez votre premier mot

Dans le post précédent, vous avez compris ce qu’est un site web : des pages, faites de morceaux posés un par un. Aujourd’hui, on ne parle plus, on agit.

Vous allez écrire votre tout premier mot de code, le voir s’afficher sous vos yeux, et comprendre une bonne fois pour toutes que coder, ce n’est pas réservé à une élite.

        Vous n’avez besoin de rien :
        pas de logiciel à télécharger, pas de carte bancaire,
        pas de compte à créer.
        Juste cette page et quelques minutes devant vous.
      

C’est quoi, un éditeur de code ?

Un éditeur de code, c’est simplement une zone où vous écrivez vos instructions, et un endroit juste à côté qui vous montre le résultat. L’un sert à écrire, l’autre sert à voir.

Quand vous tapez un mot dans un traitement de texte, le mot s’affiche tel quel. Avec un éditeur de code, c’est un peu différent : vous écrivez des instructions, et c’est le navigateur qui les « lit » pour fabriquer la page.

        L’éditeur est votre atelier.
        C’est l’établi sur lequel vous allez poser vos premières planches.
      

L’avantage d’un éditeur en ligne, c’est qu’il fonctionne directement dans votre navigateur. Rien à installer, rien à régler. Vous ouvrez la page, et vous travaillez. C’est exactement pour ça qu’on commence par là : pour enlever tous les obstacles entre vous et votre première réussite.

Ouvrez votre éditeur

Rendez-vous sur la page de l’éditeur de code. Vous y trouverez deux zones, l’une au-dessus de l’autre. C’est la même disposition sur téléphone et sur ordinateur : rien ne change quand vous passez de l’un à l’autre.

en haut : la zone « Résultat », c’est là que s’affiche ce que vous écrivez ;
en bas : la zone d’écriture, c’est là que vous tapez votre code.

Retenez bien ce sens : on écrit en bas, on voit en haut. Vous tapez quelque chose dans la zone du bas, et le résultat apparaît juste au-dessus. C’est tout le principe du métier que vous commencez à apprendre.

Ouvrir mon éditeur de code

Écrivez votre premier mot

Cliquez dans la zone d’écriture, en bas. Effacez ce qui s’y trouve si besoin. Puis tapez simplement votre prénom, ou n’importe quel mot. Par exemple : Bonjour.

Regardez maintenant la zone « Résultat », juste au-dessus. Votre mot est là. Vous venez de fabriquer le contenu d’une page web. Ce n’est pas une simulation, ce n’est pas un exercice « pour de faux » : ce que vous voyez en haut, c’est exactement ce qu’un visiteur verrait si cette page était en ligne.

        Vous avez écrit quelque chose, et une machine l’a affiché.
        C’est le geste de base de tout site web au monde.
        Tous les sites que vous connaissez ont commencé par un mot tapé quelque part.
      

Pourquoi ça compte plus qu’on ne le croit

Beaucoup de gens abandonnent l’idée d’apprendre à coder avant même d’avoir essayé. Ils imaginent des écrans noirs remplis de symboles, des choses incompréhensibles. La vérité, c’est que tout commence par ce que vous venez de faire : écrire un mot et le voir apparaître.

Le reste de cette série ne fera qu’ajouter, petit à petit, de nouveaux gestes par-dessus celui-là. Vous n’apprendrez jamais dix choses d’un coup. Un post, un geste. Aujourd’hui, le geste, c’était : ouvrir l’éditeur et écrire un mot. Et vous l’avez fait.

Et maintenant, jouez

Avant de passer à la suite, amusez-vous deux minutes. Dans la zone du bas, effacez votre mot, écrivez-en un autre. Tapez une phrase entière. Tapez votre nom complet. Regardez à chaque fois la zone « Résultat », en haut, se mettre à jour.

Il n’y a rien à casser. C’est votre éditeur, personne ne le voit, et vous pouvez tout effacer et recommencer autant de fois que vous voulez. C’est même le seul endroit au monde où vous pouvez écrire « patate » en très gros et appeler ça du travail. C’est la meilleure façon d’apprendre : essayer, regarder, recommencer.

Ce qu’il fallait retenir

Trois idées simples, et c’est tout pour aujourd’hui :

un éditeur de code, c’est une zone où l’on écrit et une zone où l’on voit le résultat ;
dans votre éditeur, on écrit en bas et on voit le résultat en haut ;
vous avez écrit votre premier mot, et vous l’avez vu s’afficher.

Dans le prochain post, on franchira une marche de plus : vous découvrirez ce qu’est une balise HTML et comment elle fonctionne. C’est le vrai langage des pages web. Mais ça, c’est pour la prochaine fois.

À très vite, et bravo pour ce premier mot.