Les bases du frontend pour les développeurs Python

Bienvenue dans le Module 5 ! Darwin est là avec un nouveau chapitre - le développement web !

Jusqu'ici tu as travaillé exclusivement sur le backend - Python, bases de données, API. Il est maintenant temps d'apprendre le frontend - l'interface utilisateur que voient les visiteurs de ton site web !

Analogie Safari : Le backend est comme le laboratoire de recherche en coulisses - Python, bases de données, logique. Le frontend, c'est le centre d'information touristique - des panneaux colorés, des cartes interactives, des boutons « En savoir plus sur les lions » !

Pourquoi un dev Python a-t-il besoin du frontend ?

En tant que développeur Python, tu vas construire des applications web - il te faut donc les bases du frontend !

Frontend = HTML + CSS + JavaScript

• HTML - la structure (ce qu'il y a sur la page)
• CSS - l'apparence (à quoi ça ressemble)
• JavaScript - l'interaction (ce qui se passe au clic)

Analogie : Le HTML est le squelette du dinosaure, le CSS est la peau et les couleurs, le JavaScript ce sont les muscles qui permettent le mouvement !

HTML - la structure de la page

Le HTML (HyperText Markup Language) est un langage de balisage qui définit la structure d'une page.

Structure de base

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Safari Database</title>
7</head>
8<body>
9    <h1>Bienvenue sur Safari Database</h1>
10    <p>Système de gestion des données d'espèces</p>
11</body>
12</html>

Structure :

• <!DOCTYPE html> - déclaration du type de document
• <html> - élément racine
• <head> - métadonnées (titre, charset, styles)
• <body> - contenu visible sur la page

Balises HTML importantes

1<!-- Titres (h1 le plus important, h6 le moins) -->
2<h1>Safari Database</h1>
3<h2>Espèces africaines</h2>
4<h3>Lion (Panthera leo)</h3>
5
6<!-- Paragraphe -->
7<p>Le lion est le plus grand prédateur d'Afrique...</p>
8
9<!-- Lien -->
10<a href="/species/lion">Voir les détails du lion</a>
11
12<!-- Image -->
13<img src="/static/images/lion.jpg" alt="Lion dans le Serengeti">
14
15<!-- Liste non ordonnée -->
16<ul>
17    <li>Lion</li>
18    <li>Éléphant</li>
19    <li>Guépard</li>
20</ul>
21
22<!-- Liste ordonnée -->
23<ol>
24    <li>Récupérer les données</li>
25    <li>Traiter</li>
26    <li>Afficher</li>
27</ol>
28
29<!-- Bouton -->
30<button>Ajouter une observation</button>
31
32<!-- Formulaire -->
33<form action="/add-species" method="POST">
34    <label for="name">Nom :</label>
35    <input type="text" id="name" name="name" required>
36
37    <label for="population">Population :</label>
38    <input type="number" id="population" name="population">
39
40    <button type="submit">Enregistrer</button>
41</form>
42
43<!-- Tableau -->
44<table>
45    <thead>
46        <tr>
47            <th>Espèce</th>
48            <th>Population</th>
49            <th>Habitat</th>
50        </tr>
51    </thead>
52    <tbody>
53        <tr>
54            <td>Lion</td>
55            <td>120</td>
56            <td>Savane</td>
57        </tr>
58        <tr>
59            <td>Éléphant</td>
60            <td>450</td>
61            <td>Savane</td>
62        </tr>
63    </tbody>
64</table>
65
66<!-- Div - conteneur de type bloc -->
67<div class="species-card">
68    <h3>Lion</h3>
69    <p>Population : 120</p>
70</div>
71
72<!-- Span - conteneur en ligne -->
73<p>Statut : <span class="endangered">En danger</span></p>

Attributs HTML

1<!-- class - classe CSS -->
2<div class="species-card endangered">...</div>
3
4<!-- id - identifiant unique -->
5<div id="lion-details">...</div>
6
7<!-- data-* - attributs de données personnalisés -->
8<div class="species" data-id="123" data-population="120">...</div>
9
10<!-- href - lien -->
11<a href="https://example.com">Lien</a>
12
13<!-- src, alt - images -->
14<img src="image.jpg" alt="Description de l'image">
15
16<!-- placeholder, required - formulaires -->
17<input type="text" placeholder="Saisis un nom" required>

CSS - styliser la page

Le CSS (Cascading Style Sheets) définit l'apparence des éléments HTML.

Façons d'ajouter du CSS

1<!-- 1. CSS en ligne (déconseillé) -->
2<p style="color: green; font-size: 18px;">Texte</p>
3
4<!-- 2. CSS interne (dans <head>) -->
5<head>
6    <style>
7        p {
8            color: green;
9            font-size: 18px;
10        }
11    </style>
12</head>
13
14<!-- 3. CSS externe (recommandé) -->
15<head>
16    <link rel="stylesheet" href="/static/css/style.css">
17</head>

Sélecteurs CSS

1/* Sélecteur de balise */
2p {
3    color: #333;
4    line-height: 1.6;
5}
6
7/* Sélecteur de classe */
8.species-card {
9    border: 2px solid #ddd;
10    padding: 20px;
11    margin: 10px;
12    border-radius: 8px;
13}
14
15/* Sélecteur d'ID */
16#lion-details {
17    background-color: #f9f9f9;
18}
19
20/* Sélecteur d'attribut */
21[data-endangered="true"] {
22    border-color: red;
23}
24
25/* Sélecteur d'enfant */
26.species-card > h3 {
27    color: #2c5f2d;
28}
29
30/* État hover (survol) */
31button:hover {
32    background-color: #45a049;
33    cursor: pointer;
34}

Propriétés CSS de base

1/* Couleurs */
2.endangered {
3    color: red;
4    background-color: #ffe6e6;
5}
6
7/* Typographie */
8h1 {
9    font-family: 'Arial', sans-serif;
10    font-size: 32px;
11    font-weight: bold;
12    text-align: center;
13}
14
15/* Modèle de boîte */
16.species-card {
17    width: 300px;
18    height: 200px;
19    padding: 20px;      /* Espacement intérieur */
20    margin: 10px;       /* Espacement extérieur */
21    border: 2px solid #ddd;
22}
23
24/* Flexbox - disposition */
25.species-list {
26    display: flex;
27    flex-wrap: wrap;
28    gap: 20px;
29    justify-content: center;
30}
31
32/* Grid - disposition */
33.species-grid {
34    display: grid;
35    grid-template-columns: repeat(3, 1fr);
36    gap: 20px;
37}

Exemple Safari - styliser une fiche d'espèce

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>Safari Database</title>
6    <style>
7        body {
8            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9            background-color: #f4f1de;
10            margin: 0;
11            padding: 20px;
12        }
13
14        h1 {
15            text-align: center;
16            color: #2c5f2d;
17        }
18
19        .species-list {
20            display: flex;
21            flex-wrap: wrap;
22            gap: 20px;
23            justify-content: center;
24            max-width: 1200px;
25            margin: 0 auto;
26        }
27
28        .species-card {
29            background-color: white;
30            border: 2px solid #e0afa0;
31            border-radius: 12px;
32            padding: 20px;
33            width: 280px;
34            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
35            transition: transform 0.2s;
36        }
37
38        .species-card:hover {
39            transform: translateY(-5px);
40            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
41        }
42
43        .species-card.endangered {
44            border-color: #d62828;
45            border-width: 3px;
46        }
47
48        .species-name {
49            color: #2c5f2d;
50            font-size: 24px;
51            margin-top: 0;
52        }
53
54        .badge {
55            display: inline-block;
56            padding: 4px 8px;
57            border-radius: 4px;
58            font-size: 12px;
59            font-weight: bold;
60        }
61
62        .badge-endangered {
63            background-color: #d62828;
64            color: white;
65        }
66
67        .badge-safe {
68            background-color: #4caf50;
69            color: white;
70        }
71    </style>
72</head>
73<body>
74    <h1>Safari Database</h1>
75
76    <div class="species-list">
77        <div class="species-card endangered">
78            <h3 class="species-name">Lion</h3>
79            <p><strong>Population :</strong> 120 individus</p>
80            <p><strong>Habitat :</strong> Savane</p>
81            <span class="badge badge-endangered">En danger</span>
82        </div>
83
84        <div class="species-card endangered">
85            <h3 class="species-name">Éléphant d'Afrique</h3>
86            <p><strong>Population :</strong> 450 individus</p>
87            <p><strong>Habitat :</strong> Savane</p>
88            <span class="badge badge-endangered">En danger</span>
89        </div>
90
91        <div class="species-card">
92            <h3 class="species-name">Girafe</h3>
93            <p><strong>Population :</strong> 850 individus</p>
94            <p><strong>Habitat :</strong> Savane</p>
95            <span class="badge badge-safe">Non menacée</span>
96        </div>
97    </div>
98</body>
99</html>

JavaScript - l'interactivité

Le JavaScript ajoute de l'interaction - des réactions aux clics, des animations, des changements dynamiques.

Les bases du JavaScript

1<!DOCTYPE html>
2<html>
3<head>
4    <title>Safari JS</title>
5</head>
6<body>
7    <h1 id="title">Safari Database</h1>
8    <button onclick="changeName()">Changer le titre</button>
9    <button id="addBtn">Ajouter une espèce</button>
10
11    <div id="species-count">Espèces : 0</div>
12
13    <script>
14        // Variables
15        let speciesCount = 3;
16        const databaseName = "Safari DB";
17
18        // Fonction
19        function changeName() {
20            document.getElementById("title").textContent = "Nouveau titre !";
21        }
22
23        // Écouteur d'événement (meilleure méthode que onclick)
24        document.getElementById("addBtn").addEventListener("click", function() {
25            speciesCount++;
26            document.getElementById("species-count").textContent = `Espèces : ${speciesCount}`;
27        });
28
29        // Log console
30        console.log("Page chargée !");
31
32        // Récupérer des données depuis une API
33        fetch("/api/species")
34            .then(response => response.json())
35            .then(data => {
36                console.log("Données récupérées :", data);
37            })
38            .catch(error => console.error("Erreur :", error));
39    </script>
40</body>
41</html>

Manipulation du DOM

1// Récupérer un élément
2const title = document.getElementById("title");
3const cards = document.querySelectorAll(".species-card");
4const firstCard = document.querySelector(".species-card");
5
6// Changer le contenu
7title.textContent = "Nouveau titre";
8title.innerHTML = "<strong>Titre en gras</strong>";
9
10// Changer les styles
11title.style.color = "red";
12title.style.fontSize = "32px";
13
14// Ajouter/retirer des classes
15title.classList.add("highlight");
16title.classList.remove("old-class");
17title.classList.toggle("active");
18
19// Créer un nouvel élément
20const newCard = document.createElement("div");
21newCard.className = "species-card";
22newCard.innerHTML = `
23    <h3>Guépard</h3>
24    <p>Population : 7100</p>
25`;
26
27// Ajouter à la page
28document.querySelector(".species-list").appendChild(newCard);
29
30// Retirer un élément
31const cardToRemove = document.querySelector(".species-card");
32cardToRemove.remove();

Exemple Safari - liste interactive

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>Safari interactif</title>
6    <style>
7        body {
8            font-family: Arial, sans-serif;
9            max-width: 800px;
10            margin: 0 auto;
11            padding: 20px;
12            background-color: #f4f1de;
13        }
14
15        .add-form {
16            background: white;
17            padding: 20px;
18            border-radius: 8px;
19            margin-bottom: 20px;
20        }
21
22        input, button {
23            padding: 10px;
24            margin: 5px;
25            border-radius: 4px;
26            border: 1px solid #ddd;
27        }
28
29        button {
30            background-color: #2c5f2d;
31            color: white;
32            cursor: pointer;
33            border: none;
34        }
35
36        button:hover {
37            background-color: #45a049;
38        }
39
40        .species-card {
41            background: white;
42            padding: 15px;
43            margin: 10px 0;
44            border-radius: 8px;
45            border-left: 4px solid #2c5f2d;
46            display: flex;
47            justify-content: space-between;
48            align-items: center;
49        }
50
51        .delete-btn {
52            background-color: #d62828;
53            padding: 8px 12px;
54            font-size: 14px;
55        }
56
57        .delete-btn:hover {
58            background-color: #9d0208;
59        }
60    </style>
61</head>
62<body>
63    <h1>Safari Database - Liste interactive</h1>
64
65    <div class="add-form">
66        <h3>Ajouter une nouvelle espèce</h3>
67        <input type="text" id="speciesName" placeholder="Nom de l'espèce">
68        <input type="number" id="speciesPopulation" placeholder="Population">
69        <button id="addBtn">Ajouter</button>
70    </div>
71
72    <div id="speciesList"></div>
73
74    <p><strong>Total des espèces :</strong> <span id="totalCount">0</span></p>
75
76    <script>
77        // État de l'application
78        let species = [
79            { id: 1, name: "Lion", population: 120 },
80            { id: 2, name: "Éléphant", population: 450 },
81            { id: 3, name: "Guépard", population: 7100 }
82        ];
83        let nextId = 4;
84
85        // Afficher la liste
86        function renderSpecies() {
87            const listElement = document.getElementById("speciesList");
88            listElement.innerHTML = "";
89
90            species.forEach(spec => {
91                const card = document.createElement("div");
92                card.className = "species-card";
93                card.innerHTML = `
94                    <div>
95                        <strong>${spec.name}</strong> - Population : ${spec.population} individus
96                    </div>
97                    <button class="delete-btn" onclick="deleteSpecies(${spec.id})">Supprimer</button>
98                `;
99                listElement.appendChild(card);
100            });
101
102            // Mettre à jour le compteur
103            document.getElementById("totalCount").textContent = species.length;
104        }
105
106        // Ajouter une espèce
107        document.getElementById("addBtn").addEventListener("click", function() {
108            const nameInput = document.getElementById("speciesName");
109            const popInput = document.getElementById("speciesPopulation");
110
111            const name = nameInput.value.trim();
112            const population = parseInt(popInput.value);
113
114            if (name && population) {
115                species.push({
116                    id: nextId++,
117                    name: name,
118                    population: population
119                });
120
121                // Vider le formulaire
122                nameInput.value = "";
123                popInput.value = "";
124
125                // Réafficher
126                renderSpecies();
127            } else {
128                alert("Merci de remplir tous les champs !");
129            }
130        });
131
132        // Supprimer une espèce
133        function deleteSpecies(id) {
134            if (confirm("Es-tu sûr de vouloir supprimer cette espèce ?")) {
135                species = species.filter(s => s.id !== id);
136                renderSpecies();
137            }
138        }
139
140        // Affichage initial
141        renderSpecies();
142    </script>
143</body>
144</html>

Comment tout cela fonctionne-t-il ensemble ?

HTML → Structure (« quoi ») CSS → Apparence (« à quoi ça ressemble ») JavaScript → Interaction (« ce qui se passe »)

1<!-- HTML - structure -->
2<button id="likeBtn" class="btn">J'aime !</button>
3
4<!-- CSS - apparence -->
5<style>
6    .btn {
7        background-color: #4CAF50;
8        color: white;
9        padding: 15px 32px;
10        border: none;
11        border-radius: 4px;
12        cursor: pointer;
13    }
14    .btn.liked {
15        background-color: #f44336;
16    }
17</style>
18
19<!-- JavaScript - interaction -->
20<script>
21    document.getElementById("likeBtn").addEventListener("click", function() {
22        this.classList.toggle("liked");
23        this.textContent = this.classList.contains("liked")
24            ? "Je n'aime pas :("
25            : "J'aime !";
26    });
27</script>

Développeurs Python - que faut-il savoir ?

Le minimum de frontend pour Flask :

1. HTML - les bases (balises, formulaires, tableaux)
2. CSS - les bases (sélecteurs, modèle de boîte, flexbox)
3. JavaScript - les bases (DOM, écouteurs d'événements, fetch)

Tu n'as pas besoin d'être un expert du frontend - Flask avec Jinja2 génère le HTML pour toi !

Ce que tu feras avec Flask :

• Créer des templates (HTML avec Jinja2)
• Du CSS de base pour le style
• Un minimum de JS pour les formulaires/la validation

Les frameworks CSS (styles prêts à l'emploi) t'aideront à créer rapidement de belles interfaces :

• Bootstrap - le plus populaire
• Tailwind CSS - utility-first
• Bulma - simple et léger

Résumé

Dans cette leçon tu as appris :

• Pourquoi un dev Python a besoin du frontend
• HTML - la structure (balises, attributs, formulaires)
• CSS - le style (sélecteurs, couleurs, disposition)
• JavaScript - l'interaction (DOM, écouteurs d'événements)
• Comment HTML, CSS et JS fonctionnent ensemble
• Des exemples Safari concrets

Analogie Safari finale : Le frontend, c'est le centre d'information du parc - des panneaux colorés (CSS), des cartes de sentiers (HTML), des boutons interactifs « En savoir plus » (JavaScript). Le backend, c'est le laboratoire en coulisses (Python + bases de données) !

Dans la prochaine leçon, Darwin te montrera Flask - un microframework pour construire des applications web en Python !