ESIG 2025 - Module 113

Langages et développement WEB

GitHub — Gestion des versions du code

 

  1. Création d'un compte avec votre email @divcom.ch
  2. Activation du pack étudiant

Mise en place des outils

Webstrom — Éditeur de code HTML/CSS/JS

 

  1. Création d'un compte avec votre email @divcom.ch
  2. Activation du pack étudiant 
  3. Installation de WebStorm (pas besoin pour la VDI)

Mise en place des outils

Objectif : créer un site web

Responsive

Depuis 2014 on passe plus
de temps à surfer sur notre
smartphone que sur notre PC

 

L'histoire du Web

  • Productivité : Code généré en quelques secondes
  • Accessibilité : "Tout le monde peut coder"
  • Apprentissage : Explications et corrections instantanées
  • Créativité : Focus sur l'idée plutôt que la syntaxe

✅ Les promesses de l'IA

1. L'illusion de la compétence

  • Générer ≠ Comprendre
  • Sentiment de maîtrise sans les fondamentaux
  • Difficultés lors des évaluations sans IA

2. La dépendance précoce

  • Réflexe "IA d'abord" avant de chercher soi-même
  • Perte de l'habitude de résolution de problèmes
  • Atrophie des compétences de débogage

3. Code incompris

  • Copier-coller sans comprendre
  • Impossible d'adapter ou de maintenir
  • Erreurs silencieuses non détectées

⚠️ Les pièges pour les apprentis

Règle d'or : Comprendre à 100%

"Tu dois pouvoir expliquer chaque ligne de ton code"

 

Usage encadré de l'IA :

  1. Apprendre les bases AVANT d'utiliser systématiquement l'IA
  2. Documenter : prompts + explications
  3. Justifier chaque choix technique
  4. Déboguer sans assistance IA d'abord

🎯 Notre approche pédagogique

 

Bon usage :

  • ✅ Expliquer un concept difficile
  • ✅ Optimiser du code déjà écrit
  • ✅ Générer du contenu (textes, images)
  • ✅ Proposer des alternatives de design
  • ✅ Se challenger avec l'IA

Mauvais usage :

  • ❌ Générer tout le code sans comprendre
  • ❌ Copier-coller aveuglément
  • ❌ Remplacer l'apprentissage des fondamentaux
  • ❌ Éviter les erreurs au lieu d'apprendre

🚀 L'IA comme outil, pas comme béquille

Votre mission :

  1. Maîtriser HTML, CSS, Git sans IA
  2. Comprendre chaque ligne que vous écrivez
  3. Utiliser l'IA comme un mentor, pas comme un fantôme
  4. Devenir des développeurs capables de créer ET de comprendre

💡 L'IA ne remplace pas le développeur, elle l'augmente.

Mais pour être augmenté, il faut d'abord exister !

Les meilleurs développeurs de demain seront ceux qui :

  • Comprennent les fondamentaux
  • Maîtrisent l'IA comme un outil
  • Gardent leur capacité de réflexion critique
  • Innovent au-delà de ce que l'IA propose

📈 L'avenir vous appartient...
si vous restez maîtres

 

Comment ça marche le Web ?

Le navigateur interprète le HTML et CSS

HTML et CSS sont
deux « langues » qu'il faut savoir parler pour créer des sites web

l y a eu plusieurs versions des langages HTML et CSS. Les dernières versions sont HTML5 et CSS3.

https://www.eff.org/pages/tor-and-https

 

Quels navigateurs connaissez-vous , lesquels sont les plus utilisés ?

 

Outils pour vos  mots de passe

Structure

<html>

Anatomie d'un

élément HTML

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Geek Power</title>
    </head>

    <body>
        <h1>Vive le Kode</h1>
        <p>J'aime le <a href="http://www.kode.ch">Kooode</a> !</p>
    </body>
</html>

Voir ce code en ACTION 🚀

AFFICHER le code HTML : CRTL + U

 

MODIFIER ce code ⌨️ [clic ici]

L'arbre <html>🎄

Text

Text

Fils de <head>

Ancêtres de "Koode"

Style { css }

🧘 CSS Zen Garden 🧘‍♂️

 

La puissance du CSS 👩‍🎤💪

Anatomie d'une

règle CSS

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Geek Power</title>
        <style>
            body {
                background: black;
                color: white;
            }

            h1 {
                color: red;
            }

            p {
                color: lime;
            }

            a {
                color: yellow;
            }
        </style>
    </head>

    <body>
        <h1>Vive le Kode</h1>
        <p>J'aime le <a href="http://www.kode.ch">Kooode</a> !</p>
    </body>
</html>

Voir ce code en ACTION 🚀

MODIFIER ce code ⌨️

🕵️‍♀️ Inspecter une page web HTML

[F12] ou clic droit > inspecter

 

Ouvrir le site de Laure 🚀

Rechercher, modifier, ajouter

 

🕵️‍♀️ Inspecter le style d'une page

Coder ?

Oui mais avec un gestionnaire de version !

Documentation GitHub

Configurer

  • Ajouter son nom et son prénom
    Menu Settings => Public Profile => Name
  • Ajouter une adresse email privée
    Menu Settings => Email
  • Rejoindre le GitHub de la DIVTEC
    Vous recevrez une invitation par email

Créer un dépôt 

  • Créer un nouveau dépôt : premier-code
  • Ajouter un nouveau fichier "index.html"

  • Ajouter le code HTML suivant à index.html 

    <h1>mon premier code</h1>​​
  • Commiter avec le message "Création index.html"
  • Configurer le mode page sur GitHub (voir vidéo slide suivant)

GitHub Flow

  • Créer une nouvelle branche "paragraphes"
  • Modifier index.html et y ajouter deux paragraphes
<p>J'aime le HTML</p>
<p>J'adore le CSS</p>
  • Commiter les changements avec le message "Ajout de deux paragraphes"
  • Créer une Pull Request pour fusionner "paragraphes" avec "master"
    • Attention au sens de la flèche : master <= paragraphes

Comment travailler en local ?

Notre éditeur de code
WebStorm

 

  • Coloration syntaxique
  • Auto-complétion
  • Indentation automatique
  • Raccourcis
  • Rechercher / remplacer
  • Intégration de git et github
  • FTP, BD, ...

Travailler avec WebStorm et GitHub

  1. Connecter son compte GitHub avec WebStorm
  2. Cloner, récupérer un dépôt GitHub
  3. Créer une nouvelle branche pour y faire ses modifications
  4. Modifier le(s) fichier(s) du projet
  5. COMMIT : Créer un nouvelle version du projet.
    • Ne pas oublier d'ajouter un message !
  6. PUSH : Pousser la nouvelle version sur GitHub
  7. Faire une demande de fusion PULL REQUEST pour ajouter ses modifications à la branche principale, la branche main

 

Configurer WebStorm

  • Se connecter avec son compte JetBrains
  • Cloner un dépôt / créer un nouveau projet
  • Ajouter le dictionnaire français (Natural languages)
  • Zoom avec roulette souris (Mouse Wheel)
  • Aperçu rapide
  • HOT RELOAD

Mon 1er <code> 1er projet WS

<!DOCTYPE html>
<html lang="fr"> <!-- précise la langue du contenu de la page -->
<head>
    <!-- Jeu de caractères utilisé pour l'encodage du fichier HTML -->
    <meta charset="UTF-8">
    
    <!-- Très important !!! Bloque le zoom automatique sur smartphones -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Titre de la page -->
    <title>Steve Fallet | Mon 1er code</title>
    
    <!-- Auteur -->
    <meta name="author" content="Laure Dinateur">
</head>
<body>
    <h1>Titre de la page</h1>
    <p>Mon prmier &lt;code&gt;</p>
</body>
</html>

Créer une <favicon>

Et si on ajoutait un peu de {css}

<!DOCTYPE html>
<html lang="fr"> <!-- précise la langue du contenu de la page -->
<head>
    <!-- Jeu de caractères utilisé pour l'encodage du fichier HTML -->
    <meta charset="UTF-8">
    
    <!-- Très important !!! Bloque le zoom automatique sur smartphones -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Titre de la page -->
    <title>Steve Fallet | Mon 1er code</title>
    
    <!-- Auteur -->
    <meta name="author" content="Laure Dinateur">
    
    <!-- ************** CSS ************** -->
    <link rel="stylesheet" href="styles.css">
   
    <!-- Favicons : icône de la page dans plusieurs tailles et formats -->
    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
    <link rel="manifest" href="./site.webmanifest">
</head>
<body>
    <h1>Titre de la page</h1>
    <p>Mon prmier &lt;code&gt;</p>
</body>
</html>
body {
	background: black;
	color: white;
}

h1 {
	color: yellow;
}

main.css

index.html

Supports de cours

Télécharger les supports

Ouvrir la page

Création dépôt projet personnel

  1. Choix du thème
  2. Choix de la plateforme de formation
  3. Création du dépôt GitHub :
  4. Activation GitHub Pages
  5. Envoyer lien GitHub Pages via Teams au prof
  6. Cloner sur WebStorm
  7. Modifier index et compléter README.md, dans WebStorm
    Palette : https://coolors.co/palette/bbdef0-00a6a6-efca08
  8. Push les modifications
  9. Démarrer formation

Ici cliquer, tu dois

HTML/CSS Bases

🥇GO GO GO🥇

CSS Colour Game

Créer une palette de couleurs

Coolors

Adobe Color

Google Web Fonts

  1. Trouver une police sur fonts.google.com
  2. Utiliser Google Webfonts Helper
  3. Copier les polices dans votre projet
  4. Copier le code d’importation @font-face
    dans votre fichier CSS

Alternative : https://www.fontsquirrel.com

Mozilla Developer

CSS

HTML

EMMET https://docs.emmet.io/