​🎯 Objectif général

Permettre au participant de maîtriser les bases essentielles du développement web et de créer un site web dynamique complet, du design de l’interface à la gestion des données sur le serveur.

​

🧩 Objectifs pédagogiques

À la fin de la formation, le stagiaire sera capable de :

• Concevoir des pages web modernes et responsives avec HTML et CSS

• Dynamiser les pages avec JavaScript

• Gérer des données et créer des sites dynamiques avec PHP et Symfony

• Créer une interface front-end réactive avec ReactJS

• Relier le front-end et le back-end à travers une API​

​

📚 Plan détaillé de la formation (40 heures)

​

🔹 Module 1 : Introduction au développement web (2h)

• Comprendre le fonctionnement d’un site web (client/serveur)

• Introduction aux langages web : HTML, CSS, JavaScript, PHP

• Présentation des outils de travail : VS Code, navigateur, XAMPP/WAMP, Git

🧠 TP : Configuration de l’environnement de développement et création d’un premier fichier HTML.

 

🔹 Module 2 : Création de pages web avec HTML & CSS (8h)

Partie 1 – HTML (4h)

• Structure d’une page HTML

• Balises principales : titres, paragraphes, liens, images, tableaux, formulaires

• Notion de sémantique HTML

Partie 2 – CSS (4h)

• Mise en forme du contenu (couleurs, marges, bordures, polices)

• Positionnement (Flexbox, Grid)

• Création de pages responsives (media queries)

🧠 TP : Créer une page d’accueil complète et responsive pour un site de formation.

 

🔹 Module 3 : Dynamiser le site avec JavaScript (6h)

• Introduction au langage JavaScript

• Variables, conditions, boucles, fonctions, événements

• Manipulation du DOM (Document Object Model)

• Introduction à JSON et aux requêtes Fetch (AJAX)

🧠 TP : Ajouter de l’interactivité : formulaire dynamique, menu déroulant, slider d’images.

 

🔹 Module 4 : Développement côté serveur avec PHP (8h)

• Introduction à PHP et aux serveurs web (WAMP/XAMPP)

• Variables, fonctions, boucles, formulaires et sessions

• Communication avec une base de données MySQL (connexion, SELECT, INSERT, UPDATE, DELETE)

• Génération de pages dynamiques

🧠 TP : Créer un mini site web avec formulaire d’inscription et affichage de données stockées dans MySQL.

 

🔹 Module 5 : Introduction au Framework Symfony (6h)

• Installation et configuration de Symfony

• Structure d’un projet (routes, contrôleurs, vues, modèles)

• Utilisation du moteur de templates Twig

• Création d’un CRUD (ajouter, afficher, modifier, supprimer des données)

• Gestion des entités et Doctrine ORM

🧠 TP : Créer une application simple de gestion (ex : gestion des étudiants ou des articles).

 

🔹 Module 6 : Développement Front-end Moderne avec ReactJS (8h)

• Introduction à ReactJS et Node.js

• Concepts de base : composants, props, state

• JSX et rendu dynamique

• Appels API avec Fetch ou Axios

• Intégration avec un backend Symfony (API REST)

🧠 TP : Créer une interface dynamique connectée à une API Symfony (ex : affichage et ajout d’articles).

 

🔹 Module 7 : Projet final et évaluation (2h)

• Réalisation d’un mini-projet complet :

  Exemple : Application web de gestion d’événements / blog / gestion de produits

• Présentation du projet devant le formateur

• Évaluation des compétences acquises

🧠 Livrable : Un site web complet développé avec HTML, CSS, JavaScript, PHP/Symfony et ReactJS.

 

🧠 Méthodes pédagogiques

• Formation 100% pratique avec mini-projets à chaque module

• Travaux dirigés en groupe ou individuels

• Assistance technique continue

• Support de cours numérique fourni

 

🏆 Évaluation et certification

• Évaluation continue : exercices et mini-projets par module

• Évaluation finale : projet complet + présentation

• Attestation professionnelle délivrée à la fin de la formation

 

🧰 Outils utilisés

• Éditeur de code : Visual Studio Code

• Serveur local : WAMP / XAMPP

• Frameworks : Symfony, ReactJS

• Langages : HTML, CSS, JavaScript, PHP

• Base de données : MySQL

• Versionnement : Git / GitHub