Mise en place de l’environnement de développement

Réactivation

Explique à ton voisin / ta voisine ce qu’est l’entête d’un document HTML ?

PS. l’émargement est ouvert :)

Installation de l’environnement

Artefact : Produire une documentation pour installer son environnement

Editeur de code - IDE

Sondage Miro - Quel éditeur de code utilise-tu ?

  • VsCode

  • Webstorm / IntelliJ …​

  • Sublimetext

  • Notepad++

Editeur de Code vs IDE

OutilExemplesAvantagesInconvénients

IDE (environnement de développement intégré)

Eclipse, Visual Studio, Webstorm, IntelliJ Idea, Vs Code

Préconfiguré, Beaucoup de fonctionnalités clé en main, Optimisé pour des tâches précises, courbe d’apprentissage assez douce

Souvent assez lent, Parfois payant, Personalisation parfois limitée ou complexe

Éditeur de code

vim, neovim, nano, notepad++, sublimetext, Vs Code

Souvent haute possibilité de personnalisation, certains sont disponibles en terminal (donc sur des serveurs), très léger, rapide ("snappy"), Simplicité à la base

Courbe d’apprentissage parfois importante, Personnaliation souvent indispensable

VsCode

Plugins

  • "Editorconfig"

  • "Live Server" ou "Open in Browser"

  • "HTML CSS Support" et/ou "IntelliSense for CSS class names in HTML" et/ou "CSS Peek"

  • "Prettier" (ou autre formatteur)

Webstorm - Intellij Idea

Plugins

  • Rainbow brackets

  • "Nyan progress bar"

Autres

nvim : LSP

Lancer un serveur localement (Bonus)

Avec la commande vite

https://vite.dev

npx vite

npm install -g vite
vite
Challenge à la maison

Si vous le souhaitez, à la maison, installez la commande vite pour pouvoir lancer un serveur HTTP localement.

Héberger ma page Web en ligne

Objectifs : Avoir un site statique live

Créer ma première page Web

  • Créer un fichier index.html

  • Ajouter l’échafudage html5 vu dans le cours précédent

  • L’ouvrir avec un navigateur

Rappel

Mais comment le diffuser au monde entier ?

Héber…​ quoi ?

Nous allons devoir héberger notre page sur un serveur web

Github Pour héberger une page web

Devtools vite fait

(On reviendra dessus)

  • Sauvegarder sous : télécharge la page et ses ressources

  • Clic droit : afficher le code source de la page

  • Clic droit : inspecter un élément, CTRL + MAJ + C, CMD + MAJ + C

    • Devtools : F12 , CTRL + MAJ + I, CMD + MAJ + I

  • Lighthouse