OBJECTIFS DU PROGRAMME :

 

L’objectif de ce programme est de former des développeurs full-stack, des professionnels compétents capables de gérer l’intégralité du processus de développement d’une application web moderne. Cela inclut :

  • Développement Front-End : Maîtriser les technologies HTML, CSS, et JavaScript pour créer des interfaces utilisateur interactives et
  • Frameworks Modernes : Apprendre à utiliser des frameworks front-end comme React et Next.js pour construire des applications web dynamiques et
  • Développement Back-End : Utiliser Next.js pour gérer la logique serveur et l’intégration avec les bases de données, fournissant une solution complète pour le développement web full-stack.
  • Intégration et Déploiement : Comprendre les principes d’intégration continue et de déploiement pour assurer la qualité et la disponibilité des applications
  • Projet Final : Concevoir et réaliser un projet complet intégrant les connaissances acquises pour démontrer les compétences en développement full-stack.

 

 

COMPETENCES A ACQUERIR :

 

  • Structurer et styliser des pages web en utilisant HTML et
  • Appliquer des techniques de design responsives pour s’adapter à différents
  • Utiliser JavaScript pour rendre les pages web interactives et
  • Manipuler le DOM pour mettre à jour le contenu et la structure des
  • Créer des composants réutilisables et modulaires avec
  • Gérer l’état et les événements dans une application
  • Gérer l’état des applications avec
  • Implémenter le rendu côté serveur avec js pour améliorer les performances et le SEO.
  • Concevoir des schémas de bases de données relationnelles avec
  • Écrire et exécuter des requêtes SQL pour créer, lire, mettre à jour et supprimer des données.

 

PROGRAMME DE FORMATION :

 

PARTIE 1 DÉVELOPPEMENT FRONT-END (12 SEMAINES)

Semaine 1 : Introduction au développement web

o   Définition du développement web

o   Les différents aspects du développement web

o   Les différents types de sites web

HTML

I. Créer une page web en HTML

1.        Introduction au langage HTML

–               Historique de l’HTML

–               Rôle du W3C

–               Propriétés des navigateurs

2.        Utiliser l’environnement de développement

–               Utilisation de Visual Studio Code

–               Installation des extensions de VS Code

3.        Définir des éléments basiques d’une page HTML

–               Normes W3C

–               Squelette d’une page HTML

–               Balises de bases (contenu)

–               Couleurs

–               Listes en HTML

–               Liens en HTML

–               Balises multimédia (images, audio, vidéo)

–               Tableaux en HTML

–         Balises de structuration

II. Implémenter une page web statique

1.        Réaliser une page web statique

–               Architecture web client-serveur

2.        Intégrer des formulaires dans une page web

–               Créer des formulaires HTML

–               Gérer les paramètres d’envoi des données

–               Balise <form>

–               Champs de saisie (Input, TextArea)

–               Balises de choix (RadioButton, CheckBox, Select)

–               Balises HTML5 pour les formulaires

–               Validation automatique

–               Boutons

 

 

CSS

I. Présentation CSS

1.        Introduction au CSS

–               Fonctionnalité CSS

–               Syntaxe et emplacement d’ajout du CSS

–               Structure de base et règles

2.         Codification des couleurs

–              Spécifier les couleurs et système de codage

–              Terminologie des couleurs et contraste et Couleur de fond

4.        Formatage et Contrôle du texte

–              Taille et police du texte

–              Gras, italique, majuscules, souligné

–              Espacement entre les lignes, les mots et les lettres

–              Styles des liens

5.        Boxes

–              Contrôler la taille des boîtes

–              Modèle de boîte pour les bordures, la marge et le padding

–              Affichage et masquage des boîtesChamps de saisie (Input, TextArea)

6.        LISTS, TABLE And FORMS

–              Liste : Spécifier le type des styles

–              Tableau : Définition et appliquer une mise en forme

–              Modifier l’apparence des éléments de formulaire

7.        LAYOUT

–              Contrôler la position des éléments

–              Création de mises en page de site

–              Conception pour des écrans de tailles différentes

JAVASCRIPT

 

I.                  DÉFINIR LE RÔLE DE JAVASCRIPT DANS LE DÉVELOPPEMENT

1.        Comparer un langage de script avec un langage compilé

–              Notion interpréteur/compilateur

–              Exemples de langages

2.        Comprendre l’architecture client/serveur

–              Composition d’une architecture client/serveur

–              Cas d’une architecture Web

3.        Découvrir l’écosystème de développement

–              Environnements de développement

–              Découverte des librairies appropriées (jQuery, React, Vue JS,Angular,…)

 

 

II. ACQUÉRIR LES FONDAMENTAUX DE JAVASCRIPT

1.        Maîtriser la syntaxe JavaScript et ses notions fondamentales

–              Notions de variables et de données

–              Expressions et opérateurs

–              Notions de lecture et d’écriture

–              Types primitifs et objets de base

2.        Maîtriser les structures de contrôle (structure alternative, structure boucle)

–              La structure alternative ( if et if …. Else et if … else if …. Else et switch )

–              Les types de boucles (boucle for et la boucle while, for … in )

3.        Utiliser des fonctions & Manipuler les objets

–              Fonctions && Expressions lambdas

–              Appels asynchrones (callBack, Promise)

–              Gestion des exceptions

III.         MANIPULER LES ÉLÉMENTS D’UNE PAGE AVEC DOM

1.        Comprendre l’arbre DOM, les nœuds parents et enfants

–              Création et Manipulation d’objet

–              Manipulation des objets natifs

–              Manipulation JSON

2.        Connaître les bases de la manipulation du DOM en JavaScript

–              Arbre DOM,Objet Document

–              Navigation dans le DOM (parentNode, childNodes, … )

3.        Manipuler les éléments HTML

IV.         GÉRER LES ÉVÉNEMENTS UTILISATEUR

1.        Comprendre la notion d’événement pour gérer l’interactivité

2.        Gérer les éléments d’un formulaire

V.         MANIPULER JQUERY

1.        Découvrir jQuery

2.        Découvrir AJAX

 

PARTIE 2 DÉVELOPPEMENT BACK-END (12 SEMAINES)

BASE DE DONNEES

I.Concevoir une base de données

1.        Analyser les données d’un cahier de charges

2.        Construire des modèles conceptuels (MCD) et logiques (MLD) de données

3.        Maitriser la normalisation

4.        Connaitre les règles de passage du MCD au MLD normalisé

 

 

 

II.Préparer l’environnement

1.        Exploiter un outil de modélisation

2.        Préparer le serveur MySQL

III.Manipuler les données

1.        Créer une base de données IV.Réaliser des requêtes SQL V.Administrer une base de données

DÉVELOPPEMENT AVEC REACT ET NEXT.JS

 

I.                  Développement avec React

1.        Comprendre les bases de React

2.        Créer des composants réutilisables

3.        Gérer l’état et les événements

4.        Utiliser les hooks

5.        Gestion de l’état global avec Context API ou Redux

II.                  Utilisation de Next.js

 

1.        Concepts de base et installation

2.        Création de pages et routage

3.        Rendu côté serveur (SSR) et génération de sites statiques (SSG)

4.        Création d’API avec Next.js

5.        Gestion des données et intégration avec une base de données

 

III.                  Intégration et Déploiement

 

1.        Introduction aux outils CI/CD

2.        Utilisation de plateformes de déploiement comme Vercel ou Netlify

3.        Déploiement d’applications Next.js

4.        Mise en place des pratiques de sécurité

 

 

IV.                   Projet final

 

1.        Conception et réalisation d’un projet complet

2.        Revue de code et feedback

3.        Présentation du projet

 

Projet Final : Concevoir et réaliser un projet complet intégrant les connaissances acquises pour démontrer les compétences en développement full-stack.