ESIG 2025 - Module 113
Langages et développement WEB
GitHub — Gestion des versions du code
- Création d'un compte avec votre email @divcom.ch
- Activation du pack étudiant
- Nécessite l'attestation ESIG ou la carte étudiant
- https://education.github.com/pack
Mise en place des outils
Webstrom — Éditeur de code HTML/CSS/JS
- Création d'un compte avec votre email @divcom.ch
- Activation du pack étudiant
- 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 :
- Apprendre les bases AVANT d'utiliser systématiquement l'IA
- Documenter : prompts + explications
- Justifier chaque choix technique
- 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 :
- Maîtriser HTML, CSS, Git sans IA
- Comprendre chaque ligne que vous écrivez
- Utiliser l'IA comme un mentor, pas comme un fantôme
- 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.
Quels navigateurs connaissez-vous , lesquels sont les plus utilisés ?
-
Proton Pass
https://proton.me/fr/pass -
Dashlane
https://dashlane.com -
KeePass
https://keepass.info/ -
1Password
https://1password.com/fr - Gestionnaires des OS
ou des navigateurs
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>
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>🕵️♀️ Inspecter une page web HTML
[F12] ou clic droit > inspecter
Rechercher, modifier, ajouter
🕵️♀️ Inspecter le style d'une page
Coder ?
Oui mais avec un gestionnaire de version !
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
- Connecter son compte GitHub avec WebStorm
- Cloner, récupérer un dépôt GitHub
- Créer une nouvelle branche pour y faire ses modifications
- Modifier le(s) fichier(s) du projet
-
COMMIT : Créer un nouvelle version du projet.
- Ne pas oublier d'ajouter un message !
- PUSH : Pousser la nouvelle version sur GitHub
- 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 <code></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 <code></p>
</body>
</html>body {
background: black;
color: white;
}
h1 {
color: yellow;
}main.css
index.html
Supports de cours
Création dépôt projet personnel
Choix du thèmeChoix de la plateforme de formation- Création du dépôt GitHub :
- Activation GitHub Pages
- Envoyer lien GitHub Pages via Teams au prof
- Cloner sur WebStorm
-
Modifier index et compléter README.md, dans WebStorm
Palette : https://coolors.co/palette/bbdef0-00a6a6-efca08 - Push les modifications
- Démarrer formation
HTML/CSS Bases
Créer une palette de couleurs
Google Web Fonts
- Trouver une police sur fonts.google.com
- Utiliser Google Webfonts Helper
- Copier les polices dans votre projet
- Copier le code d’importation @font-face
dans votre fichier CSS
Alternative : https://www.fontsquirrel.com
Mozilla Developer
EMMET https://docs.emmet.io/
Copy of ESIG 2025 - Module 113
By tirtho
