Formation DWWM - 03/2025

Notes de cours, exercices et projets réalisés dans le cadre de la formation Développeur Web et Web Mobile.

Liens utiles
Exercices
Recap des présentations

Sommaire

• Saision 1
  • HTML / CSS / JavaScript (La trinité du web 🤟)

Saison 1

📆 21/03/2025

📦 Récap du jour

Comment faire une bonne démo voilà le thème abordé aujourd'hui.

Nous avons vu ce qu'il fallait faire et ne pas faire lors d'une démo. ⬇️

• N’attendez pas la dernière minute
• Soyez clair et concis
• Appuyez-vous sur votre support
• Adaptez-vous à votre interlocuteur
• Préparez la répartition de la parole
• Anticipez les questions / réponses
• Entraînez-vous !!!!!

---

📆 19/03/2025

📦 Récap du jour

✨ Enfin la manipulation du DOM ✨

Ce qu'il faut retenir

Le DOM (Document Object Model) est une interface de programmation pour les documents HTML.

Il représente la page web sous forme d'arbre d'objets.

Nous avons besoins de 3 étapes pour manipuler le DOM :

1. Sélectionner un élément
2. Ajouter un événement
3. Modifier le contenu

Sélectionner un élément

Il existe plusieurs façons de sélectionner un élément :

• document.getElementById('id')
• document.getElementsByClassName('class')
• document.getElementsByTagName('tag')

Moi je préfère utiliser les méthodes suivantes :

• document.querySelector('selecteur')
• document.querySelectorAll('selecteur')

Si vous avez appris a utiliser les sélecteurs CSS, vous serez à l'aise avec ces méthodes.

• #id : sélectionne un élément par son id
  • document.querySelector('#id')
• .class : sélectionne un élément par sa classe
  • document.querySelector('.class')
• tag : sélectionne un élément par sa balise
  • document.querySelector('tag')

Ajouter un événement

Il existe plusieurs type d'événements :

• click : au clic
• change : à la modification
• mouseover : au survol
• ...

Modifier le contenu

Il existe plusieurs manière de modifier le contenu :

• innerHTML : permet de modifier le contenu HTML
• textContent : permet de modifier le contenu textuel
• setAttribute : permet de modifier un attribut
• style : permet de modifier le style
• ...

Comment fonctionne la balise script

🔗 Liens utiles

• DOM workshop | Wild code school
• Référence des événements | MDN

---

📆 18/03/2025

📦 Récap du jour

Bon, rien de trop nouveau sous le soleil. Mais on quand même vu les bases.

N'hésite pas à aller au 14/03/2025, c'est quasiment le même cours.

💡 Pour briller en société

IIFE

Ici, nous avons une fonction qui s'appel et s'execute directement. On appelle ça une IIFE (Immediately Invoked Function Expression).

//IIFE

(function () {
	//code
})();

Optional chaining

L'opérateur de chaînage optionnel ?. permet de lire la valeur d'une propriété située au sein d'une chaîne de connexion avec une valeur null ou undefined sans lever d'erreur.

let user = {}; // l'utilisateur est sans nom

alert(user?.address?.street); // undefined (pas d'erreur)

Alors que sans l'opérateur de chaînage optionnel, nous aurions une erreur :

let user = {}; // l'utilisateur est sans nom

alert(user.address.street); // Erreur !

Arrow function

Les fonctions fléchées sont des raccourcis pour déclarer des fonctions.

// syntaxe
// ici, en plus de la syntaxe, nous avons un return implicite
let sum = (a, b) => a + b;

/* équivalent à */

let sum = function (a, b) {
	return a + b;
};

La différence entre classic function & arrow function

const user = {
	name: "anthony",
	classicFunction: function () {
		console.log(this, this.name);
	},
	arrowFunction: () => {
		console.log(this, this.name);
	},
};

user.classicFunction();
user.arrowFunction();

/**********/
/* output */
/**********/

// {name: "anthony", classicFunction: ƒ, arrowFunction: ƒ} "anthony"

// Window {window: Window, self: Window, document: document, name: "", location: Location, …} undefined

Ce que ça veut dire, c'est que les fonctions fléchées n'ont pas de this propre, elles prennent le this de leur parent.

ET SURTOUT ! JAVA !== JAVASCRIPT

code java pour un hello world:

public class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello, World");
  }
}

code javascript pour un hello world:

console.log("Hello, World");

Alors, c'est plus simple JS non ? 😉

🔗 Liens utiles

• Can I use... Support tables for HTML5, CSS3, etc
• Optional chaining (?.) - JavaScript | MDN

---

📆 14/03/2025

📦 Récap du jour

✨ LES BASES PROGRAMMATIONS ✨

Alors, oui, c'est assez dur, il y a plein de choses à connaître, mais en vrai. Çaaa vaaaaa !

Les éléments communs pour tout le monde :

• Les variables
• Les conditions
• Les tableaux
• Les boucles
• Les fonctions
• 🎁 les 6 falsy values

Les variables

Une variable est un espace mémoire qui permet de stocker une valeur.

let maVariable = "Hello World !";

Attention, quand une variable est réassignée, elle perd sa valeur précédente.

let prenom = "anthony";

prenom = "bob";

anthony est remplacé par bob.

Les types de données

Il existe plusieurs types de données :

Les primitifs :

• string : chaîne de caractères
• number : nombre
• boolean : vrai ou faux
• null : nul
• undefined : non défini
• ...

Les non primitifs :

• object : objet
• array : tableau
• function : fonction
• ...

Les opérateurs

Il y a les opérateurs mathématiques que vous connaissez déjà (+, -, *, /), mais il y en a d'autres.

• % : modulo, le principe est de diviser un nombre par un autre et de récupérer le reste de la division.

Voilà le lien pour TOUS les opérateurs : Expressions et opérateurs - JavaScript | MDN

Les tableaux

Les tableaux permettent de stocker plusieurs valeurs.

let monTableau = [2, "Hello", true, ["coucou"]];

Il existent plusieurs méthodes pour manipuler les tableaux :

• push() : ajoute un élément à la fin du tableau
• pop() : supprime le dernier élément du tableau
• shift() : supprime le premier élément du tableau
• unshift() : ajoute un élément au début du tableau

Il est difficile de toutes les citer, mais voici un lien qui vous permettra de les découvrir : Array - JavaScript | MDN

Les conditions

Les conditions permettent de faire des choix dans le code.

L'architecture d'un if/else:

// Une condition doit obligatoirement se répondre par true ou false
if (condition) {
	// code
} else if (condition) {
	// code
} else {
	// code
}

Ex:

let maVariable = "Bouh";

if (maVariable === "Hello World !") {
	console.log("C'est cool !");
} else {
	console.log("C'est pas cool !");
}

💡 Astuce !

Si votre condition est un booléen (true ou false), vous pouvez faire comme ça :

let maVariable = true;

if (maVariable) {
	console.log("C'est cool !");
} else {
	console.log("C'est pas cool !");
}

Ou encore :

// Avec le point d'exclamation, on inverse la valeur de la variable
if (!maVariable) {
	console.log("C'est pas cool !");
} else {
	console.log("C'est cool !");
}

Les boucles

Les boucles permettent de répéter une action.

Il y a 3 informations importantes :

• L'initialisation
• La condition d'arrêt
• L'incrémentation

Boucle for:

// for (initialisation; condition; incrémentation){ code }
for (let i = 0; i < 10; i++) {
	console.log(i);
}

Boucle while & do while: (⚠️ attention à ne pas faire de boucle infinie !)

// initialisation
let i = 0;

// while (condition d'arrêt) {
while (condition) {
	// code

	// incrémentation
	i++;
}

// initialisation
let i = 0;

do {
	// code

	// incrémentation
	i++;
	// condition d'arrêt
} while (condition);

Il existe tout un tas d'autre façon de boucler, mais ce sont les plus courants.

Les fonctions

Les fonctions permettent de réutiliser du code encore et encore.

La syntaxe :

• function : mot clé pour déclarer une fonction
• maFonction : nom de la fonction
• () : les paramètres
• {} : le corps de la fonction

function maFonction() {
	console.log("Hello World !");
}

/* réutilisation de la fonction maFonction */
maFonction();
maFonction();

⚠️ Attention, une fonction qui ne fait qu'un console.log() ne sert à rien ! Il faut que la fonction retourne (return) une valeur.

function maFonction() {
	return "Hello World !";
}

Et pour récupérer la valeur de la fonction, je peux insérer ma fonction dans une variable :

let maVariable = maFonction();

Un exemple qui regroupe plein d'info 😎

// ma variable students qui est un tableau d'étudiants
const students = [
	"Christophe",
	"Adrien",
	"Maxence",
	"Salahedine",
	"Jordan",
	"Jerome",
	"Damien",
	"Jules",
];

// une fonction sayHello qui prend 1 paramètre `name`
function sayHello(name) {
	console.log("Coucou " + name + " 👋");
}

// Une boucle for qui commence à 0 jusqu'à la taille du tableau
for (let i = 0; i < students.length; i += 1) {
	// utilisation de la fonction sayHello qui prend un argument
	// students[i] qui vaut le prénom de mon tableau "students" à l'index `i`
	sayHello(students[i]);
}

🎁 Les 6 falsy values

Les 6 falsy values sont des valeurs qui sont évaluées à false dans une condition.

• false
• 0
• ""
• null
• undefined
• NaN

Si vous voulez en savoir plus, voici un article qui en parle : Les 6 falsy values

🔗 Liens utiles

• Programming Basics | Wild code school

---

📆 13/03/2025

📦 Récap du jour

C'est quoi git & github ❓

Git est un logiciel de versionning, c'est à dire qu'il permet de gérer les versions de notre code, il est en local.

Github est un service en ligne qui permet de stocker notre code en ligne.

Les commandes de bases

commande	description
git init	permet d'initialiser un repo git
git add .	permet d'ajouter tous les fichiers au stage
git commit -m "message"	permet de créer un commit
git push	permet d'envoyer le code sur github
git pull	permet de récupérer le code sur github
git status	permet de voir l'état du repo git
git checkout	permet de changer de branche
git switch	depuis la version 2.23
git branch	permet de créer une branche

Si vous souhaitez avoir un git cheat sheet, voici le lien : Git Cheat Sheet

gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit

Loading

Ensuite, à vous l'atelier git & github !

🔗 Liens utiles

• WorkShop Chip & Dale

---

• SSH Key & Git by Antho
• Apprendre Git
• Simple Git Workflow | Wild code school

---

📆 11/03/2025

Nous avons vu aujourd'hui comment passer des wireframes papier vers un prototype sur figma ainsi que les bonnes pratiques UX/UI.

UX

---

📆 07/03/2025

📦 Récap du jour

Notre petit cours d'aujourd'hui était sur les bases du web. Le principe est de comprendre comment fonctionne le web, et ainsi, faire la différence entre le web et internet.

💡Ce qu'il faut retenir

Web

Le web est un système de publication et de consultation de documents hypertextes liés entre eux et accessibles via le réseau internet.

Internet

Internet est un réseau informatique mondial accessible au public. Il permet de partager des informations et des ressources.

Protocoles

• HTTP(S) : Hypertext Transfer Protocol (Secure)
• FTP : File Transfer Protocol
• etc.

Navigateur

Un navigateur web est un logiciel permettant de consulter des pages web. Les plus connus sont Chrome, Firefox, Safari, Edge, Opera.

URL

Une URL (Uniform Resource Locator) est une adresse web. Elle est composée de plusieurs éléments :

• Protocole : http:// ou https://
• Nom de domaine : www.google.com
• Chemin : /search?q=hello+world

Bonus

---

📆 06/03/2025

📦 Récap du jour

Ladies and gentlemen, aujourd'hui, nous avons vu les bases du responsive design.

Le responsive, c'est la capacité d'un site web à s'adapter à la taille de l'écran de l'utilisateur. C'est un élément essentiel pour un site web, car il est important que le site soit lisible sur tous les supports.

Nous avons parler des grids et flexbox, qui sont des outils de mise en page en CSS. Ils permettent de créer des mises en page complexes et de les rendre responsive.

💡Ce qu'il faut retenir

Voilà un petit récap des breakpoints (points de rupture) les plus utilisés :

🔗 Liens utiles

• Am I Responsive?
• Responsively App - A web developer's browser
• Interactive CSS Grid Generator | Layoutit Grid
• CSS Flexbox Generator - CSS Portal
• :root - CSS : Feuilles de style en cascade | MDN

---

📆 05/03/2025

📦 Récap du jour

Aujourd'hui, nous avons vu les bases de l'HTML et du CSS et comment lier les deux.

Je tiens à vous rassurer, il n'est pas nécessaire de tout retenir, mais il est important de comprendre les concepts de base.

💡Ce qu'il faut retenir

• HTML : c'est la structure de la page web
  • Les balises HTML sont des éléments de structure
    • <h1></h1> : titre de niveau 1
    • <p></p> : paragraphe
    • <a></a> : lien
    • <img /> : image
    • etc.
• CSS : c'est la mise en forme de la page web
  • Les sélecteurs CSS permettent de cibler des éléments HTML
    • h1 : cible tous les titres de niveau 1
    • .ma__classe : cible tous les éléments ayant la classe class="ma__classe"
    • #mon__id : cible l'élément ayant l'id id="mon__id"

<!DOCTYPE html>
<html>
	<head>
		<title>Nom de mon site</title>
		<link rel="stylesheet" type="text/css" href="./style.css" />
	</head>
	<body>
		<h1>Titre de la page</h1>
		<p>Un paragraphe</p>
	</body>
</html>

h1 {
	color: blue;
	font-size: 12px;
}

Priorité des sélecteurs (spécificité) L'ordre de priorité des sélecteurs est important :

• Sélecteur d'ID (#id) : Priorité la plus élevée.
• Sélecteur de classe (.classe) : Priorité moyenne.
• Sélecteur de balise (balise) : Priorité la plus basse.

Concernant les propriétés CSS, il est important de comprendre qu'il est impossible de toutes les retenir. C'est pourquoi il est essentiel de savoir où trouver les informations. L'anglais est un atout pour la programmation, car la majorité des ressources sont en anglais.

🔗 Liens utiles

• MDN Web Docs
• W3Schools Online Web Tutorials
• HTML Reference
• CSS Reference
• Méthodologie BEM pour le CSS

---

🎮

• Flexbox Froggy - Un jeu pour apprendre les flexbox CSS
• Grid Garden - Un jeu pour apprendre les grid CSS
• CSS Diner - Un jeu pour apprendre les sélecteurs CSS
• CSS Battle - Un jeu pour apprendre le CSS
• Codepen - Un site pour partager du code HTML/CSS/JS

---

📆 04/03/2025

📦 Récap du jour

Ça commence fort : Le Terminal.

Oui, le terminal est un outil puissant, mais il peut être intimidant au début. C'est pourquoi nous avons vu les bases pour vous aider à vous familiariser avec cet outil.

💡Ce qu'il faut retenir

Le kit de survie du terminal :

Commande	Description
pwd	affiche le répertoire courant
ls	liste les fichiers et dossiers du répertoire courant
cd	change de répertoire
mkdir	crée un dossier
touch	crée un fichier
rm	supprime un fichier
rm -r	supprime un dossier
mv	déplace un fichier ou un dossier
cp	copie un fichier ou un dossier
cat	affiche le contenu d'un fichier
echo	affiche un message à l'écran
clear	efface le terminal
.	répertoire courant
..	répertoire parent
man	affiche le manuel d'une commande
history	affiche l'historique des commandes

Bien sûr, il y a beaucoup plus de commandes, mais ce sont les bases pour commencer.

🔗 Liens utiles

• Voyage au centre de l’ordinateur | Wild code school
• Exo console

---

📆 03/03/2025

📦 Récap du jour

Aujourd'hui c'est présentation ! Vous avez eu un aperçu de ce qui vous attend dans les prochains mois.

Vous avez même eu le mot du CEO de la Wild Code School !

---