Le navigateur exécute et interprète trois langages principaux :

Langage	Rôle	Description
HTML (HyperText Markup Language)	Structure	Définit la sémantique et la structure du contenu (titres, paragraphes, images, liens). C’est l’ossature de la page.
CSS (Cascading Style Sheets)	Présentation	Gère l’apparence, le style, la mise en page et l’ergonomie (couleurs, polices, positionnement, réactivité).
JavaScript (JS)	Comportement	Ajoute de l’interactivité, de la logique côté client, et permet de manipuler dynamiquement le contenu de la page (DOM).

Frameworks et Librairies JavaScript (Le Comportement)

Dans les applications modernes (SPA ou SSR Isomorphe), le JavaScript est le moteur qui gère le rendu et la logique client.

Technologie	Type	Fonctionnement et Avantages	Inconvénients
React	Librairie UI	Basé sur les composants (réutilisables), utilise un Virtual DOM pour optimiser le rendu et minimiser les manipulations directes du DOM réel, facilitant l’optimisation.	Requiert souvent des outils supplémentaires (gestion d’état, routage) pour devenir une application complète.
Vue.js	Framework Progressif	Très simple d’approche, se concentre sur l’approche déclarative. Peut être intégré progressivement à un projet existant.	Moins utilisé dans les très grandes entreprises que React, bien que sa popularité croisse rapidement.
Angular	Framework Complet	Solution batteries-included (inclut routage, gestion d’état, CLI) pour les applications d’entreprise structurées. Utilise TypeScript par défaut.	Grande courbe d’apprentissage, lourd pour les petites applications.

import React from 'react';

const ArticleCard = ({ titre, est_vedette }) => {
  return (
    <div className="card-article">
      <h2>{titre}</h2>
      {est_vedette && (
        <span className="badge">POPULAIRE</span>
      )}
    </div>
  );
};

export default ArticleCard;

Le Rendu Côté Serveur Traditionnel (Les Moteurs de Templates)

Avant l’ère des SPAs, ou dans le cas d’applications SSR complètes, le backend génère le HTML final en utilisant des Moteurs de Templates.

Moteur de Template	Langage Backend	Fonctionnement et Avantages	Usage Typique
Twig	PHP (Symfony)	Syntaxe simple et lisible. Offre la sécurité par défaut (échappement automatique des variables) pour prévenir les attaques XSS.	Applications monolithiques ou SSR traditionnelles basées sur PHP.
Jinja	Python (Flask, Django)	Très similaire à Twig, populaire dans l’écosystème Python.	Sites web et applications web traditionnelles en Python.
EJS / Handlebars	Node.js	Utilisé pour générer du HTML dynamique côté serveur en JavaScript.	Petits serveurs Node.js ou architecture hybride simple.

<h1>Articles Récents</h1>

{% for article in articles %}
    <div class="card-article">
        <h2>{{ article.titre }}</h2> 
        {% if article.est_vedette %}
            <span class="badge">POPULAIRE</span>
        {% endif %}
    </div>
{% endfor %}

Stratégies de Style (CSS)

La manière dont le CSS est organisé est cruciale pour la maintenabilité de la feuille de style.

Style Pré-processé (SASS/LESS) ou Pure CSS

Pure CSS : Écrire directement en CSS standard. Simple, pas de dépendance externe.
SASS / LESS (Pré-processeurs) : Ajoutent des fonctionnalités manquantes au CSS, comme :
- Variables : Pour réutiliser des couleurs ou des tailles.
- Mixins : Pour regrouper des blocs de styles réutilisables.
- Imbrication : Pour structurer le CSS selon la hiérarchie du HTML.
- Avantage : Rend le code CSS plus DRY (Don’t Repeat Yourself) et maintenable sur les grands projets.
Méthodes de Structuration : Des méthodologies comme BEM (Block-Element-Modifier) aident à nommer les classes pour améliorer la clarté et éviter les conflits de style (CSS specificity).

CSS Pure

.card-article {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    position: relative;
}

/* Style du titre */
.card-article h2 {
    color: #333;
    font-size: 1.2em;
    margin-top: 0;
}

/* Style du badge "POPULAIRE" */
.badge {
    display: inline-block;
    background-color: #e74c3c;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 10px;
}

CSS Pré-processé (SASS)

/* Définition des variables pour la réutilisation */
$couleur-bordure: #ccc;
$couleur-fond-primaire: #fff;
$couleur-vedette: #e74c3c;
$padding-base: 15px;

.card-article {
    border: 1px solid $couleur-bordure;
    border-radius: 8px;
    padding: $padding-base;
    margin-bottom: 20px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    background-color: $couleur-fond-primaire;
    position: relative;

    // Imbrication du style du titre
    h2 {
        color: #333;
        font-size: 1.2em;
        margin-top: 0;
    }

    // Imbrication du style du badge
    .badge {
        display: inline-block;
        background-color: $couleur-vedette;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 0.8em;
        font-weight: bold;
        
        // Positionnement absolu
        position: absolute; 
        top: 10px;
        right: 10px;
    }
}

Utility-First (Exemple : Tailwind CSS)

Définition : Au lieu de créer des classes sémantiques personnalisées (.bouton-principal), on applique directement des classes utilitaires atomiques pour chaque propriété CSS (.bg-blue-500, .p-4, .rounded-lg).
Avantages : Vitesse de développement très élevée. Le style d’un composant est colocalisé (tout est dans le HTML). Petite taille de fichier final (le CSS est purgé des classes non utilisées).
Inconvénients : Le HTML devient très dense en classes, ce qui peut rendre la lecture du balisage plus difficile.

// Composant ArticleCard avec les classes Tailwind
const ArticleCard = ({ titre, est_vedette }) => {
  return (
    // Classes pour la carte :
    // border p-4 (border: 1px; padding: 1rem;)
    // rounded-lg (border-radius: 8px;)
    // shadow-md (box-shadow: moyenne)
    // bg-white (background-color: blanc)
    // mb-5 (margin-bottom: 1.25rem;)
    // relative (position: relative;)
    <div className="border border-gray-300 rounded-lg p-4 shadow-md bg-white mb-5 relative">
      <h2 className="text-gray-800 text-lg mt-0">{titre}</h2>
      
      {est_vedette && (
        // Classes pour le badge :
        // inline-block (display: inline-block;)
        // bg-red-600 (background-color: rouge vif)
        // text-white (color: blanc)
        // px-2 py-1 (padding horizontal/vertical)
        // text-xs font-bold (taille de police et gras)
        // absolute top-2 right-2 (position: absolute; top: 0.5rem; right: 0.5rem)
        <span className="inline-block bg-red-600 text-white px-2 py-1 rounded text-xs font-bold absolute top-2 right-2">
          POPULAIRE
        </span>
      )}
    </div>
  );
};

Architectures

Échanges de Données : APIs et Protocoles

Persistance : Bases de Données & Stockage

L'Art du Frontend : UI/UX, Performance et Accessibilité

Excellence Opérationnelle & Ticketing

Qualité & Bonnes Pratiques de Code

Green IT & Sobriété Numérique

Fondamentaux du web

Frameworks et Librairies JavaScript (Le Comportement)

Le Rendu Côté Serveur Traditionnel (Les Moteurs de Templates)

Stratégies de Style (CSS)

Style Pré-processé (SASS/LESS) ou Pure CSS

Utility-First (Exemple : Tailwind CSS)

​Frameworks et Librairies JavaScript (Le Comportement)

​Le Rendu Côté Serveur Traditionnel (Les Moteurs de Templates)

​Stratégies de Style (CSS)

​Style Pré-processé (SASS/LESS) ou Pure CSS

​Utility-First (Exemple : Tailwind CSS)

Frameworks et Librairies JavaScript (Le Comportement)

Le Rendu Côté Serveur Traditionnel (Les Moteurs de Templates)

Stratégies de Style (CSS)

Style Pré-processé (SASS/LESS) ou Pure CSS

Utility-First (Exemple : Tailwind CSS)