Développeur web full stack : Front End + Back End + UX/UI + ChatGPT

PROGRAMME DU PARCOURS

I/ DEVELOPPEMENT FRONT END

Chapitre 1: Introduction au Développement Front-End

1. Comprendre la Nature du Développement Front-End
2. Configuration de l’Environnement de Travail
3. Outils du Développeur Front-End

Chapitre 2: HTML

1. Fondements du HTML
2. Balises de Base
3. Usage des Commentaires
4. Balises de Structure
5. Balises Sémantiques
6. Balises Méta
7. Manipulation des Tableaux
8. Création de Formulaires
9. Attributs Universels
10. Balises de Mise en Forme
11. Flux HTML
12. Types de Balises
13. Accessibilité

Chapitre 3: CSS

1. Définition du CSS
2. Ajout de CSS à une Page
3. Structure CSS
4. Sélecteurs CSS
5. Propriétés CSS
   • 5.1 Introduction
   • 5.2 Propriétés de Fond
   • 5.3 Propriétés de Position
   • 5.4 Propriétés Float
   • 5.5 Propriétés Flexbox
   • 5.6 Propriété Grid Layout
   • 5.7 Propriétés de Couleurs
   • 5.8 Dégradés
6. Unités de Mesure
7. Polices Personnalisées
8. Organisation du Code
9. Variables CSS
10. Conception Responsive
    • 10.1 Introduction
    • 10.2 Images Flexibles et Adaptatives
    • 10.3 Typographies Responsives
    • 10.4 Mobile-First vs Desktop-First
11. Effets de Transitions et Animations
12. Utilisation des Filtres
13. Préprocesseurs
14. Librairies/Frameworks

Chapitre 4: Javascript

1. Introduction à Javascript
2. Variables et Types de Données
3. Opérateurs Javascript
4. Structures de Contrôle Javascript
   • 4.1 Conditions
   • 4.2 Boucle for
   • 4.3 Boucle while et do while
   • 4.4 Boucle foreach
   • 4.5 Boucle for in
   • 4.6 Exemples
5. Fonctions en Javascript
6. Manipulation du DOM
   • 6.1 Cibler un Élément HTML en JS
   • 6.2 Récupérer et Modifier le Contenu d’une Balise
   • 6.3 Récupérer et Modifier l’Attribut d’une Balise
   • 6.4 Modifier le Style d’une Balise
   • 6.5 Ajouter/Supprimer un Élément
   • 6.6 Gestion des Événements
7. Programmation Orientée Objet
8. Utilisation de Fetch
9. Stockage Local avec Localstorage
10. Présentation des Frameworks
    • 10.1 Introduction
    • 10.2 Vue.js
      • 10.2.1 Présentation de Vue.js
      • 10.2.2 Installation
      • 10.2.3 Revue de Code d’un Projet Vue.js
      • 10.2.4 Projet Final Vue.js

II/ Développement Back-End

Module 1 : Php Initiation

1.0 Qu’est-ce que le php ?
Présentation du langage PHP
1.1 Environnement de travail
Présentation des environnements de travail disponibles pour travailler en local sur PC comme sur MAC
1.2 Premiers pas
Les premiers pas et les premières fonctions PHP comme echo. Intégrer le l’html dans du PHP afin de servir une page HTML au client.
1.3 Les variables et les types de données
Déclaration et utilisation des variables en PHP. Présentation des principaux types de variables, string, integer, array, boolean, etc.
1.4 Les opérateurs et les conditions
Les conditions en php comme les conditions if ou encore switch et les différents opérateurs
Opérateurs arithmétiques : Ces opérateurs permettent de faire des calculs
Opérateurs d’affectation : Le but de ces opérateurs est de pouvoir affecter et/ou modifier des valeurs de variables.
Opérateurs de comparaison : Comme l’indique le nom, ces opérateurs permettent de comparer de valeurs de variables. Ils sont utilisés sans des conditions.
Opérateurs logiques : Ces opérateurs permettent de rendre les conditions plus opérationnelles, notamment en permettant de spécifier plusieurs conditions au sein d’un condition if.
Opérateurs d’incrémentation et de décrémentation : Ils permettent tout simplement d’ajouter ou de soustraire 1 à la valeur d’une variable.
Opérateur de concaténation : Cet opérateur permet d’additionner des chaînes de caractères entre elles ou bien encore avec la valeur de variables.
1.5 Les tableaux
Les tableaux sont comme dans beaucoup de langages un élément essentiel de la programmation en permettant de stocker et de structurer des données qui pourront ensuite être manipulées et parcourues avec des boucles notamment.
1.6 Les boucles 
Autre incontournable de la programmation, les boucles permettent d’automatiser des tâches dans le code et d’opérations de manière itérative. On note les boucles for, foreach, while, do while.
1.7 Les chaînes de caractères
La manipulation de chaînes de caractère est importante, que ce soit pour harmoniser des données dans une table ou dans un affichage dans une page web, comme par exemple s’assurer que les noms de famille sont en majuscule ou bien encore que tous les prénoms sont bien en minuscule en commençant par une majuscule.
1.8 Les dates
Les dates et leurs manipulations ne sont pas forcément des choses aisées, notamment de par le fait que les dates doivent être stockées au format US et, dans notre cas, affichées au format FR. Il est donc important de savoir les manipuler afin de les conformer aux attentes du projet.
1.9 Les fonctions
Encore un incontournable de la programmation, les fonctions permettent de rationaliser et de structurer le code en définissant des morceaux de code qui peuvent être appelés à loisir, diminuant ainsi le nombre de lignes de nos scripts

Module 2 : Php avancé
2.0 Qu’est que mysql ?
Lorsque qu’on parle de PHP, on ne peut faire l’impasse de SQL qui est un langage de requêtes sur les bases de données, qui, pleinement intégré à Php permet de mettre en place des pages web dynamiques.
2.1 PhpMyAdmin
PhpMyAdmin est une interface graphique permettant de vérifier et d’opérer des opérations sur les données des tables dans les bases de données.
2.2 Création de bases de données
PhpMyAdmin de par son interface graphique permet de s’initier à l’écriture des différentes requêtes SQL, parmi lesquelles, CREATE DATABASE, qui permet de créer une base de données dans un serveur Mysql ou encore MariaBD par exemple.
2.3 Création de tables
Créer une base de données est une chose, il faut ensuite la peupler avec des tables qui vont contenir les données de l’application ou du site Web. On peut utiliser directement l’interface graphique de PhpMyAdmin
2.4 Requêtes SQL de base de données
Utiliser l’interface graphique de PhpMyAdmin pour s’exercer avec les requêtes SQL relatives aux bases de données
2.5 Requêtes SQL de tables
Utiliser l’interface graphique de PhpMyAdmin pour s’exercer avec les requêtes SQL relatives aux tables.
2.6 Le CRUD : Create :
Le CRUD représente les 4 opérations primaires que l’on peut faire sur des données, la première d’entre elles, Create permet d’ajouter des données dans une table.
2.7 Le CRUD : Read :
La seconde opération qui peut être effectuée sur des données dans une table est la lecture de ces dernières dans le but de pouvoir les afficher dans une page we
2.8 Le CRUD : Update :
Cette opération consiste en la mise à jour de données dans une table, comme par exemple la disponibilité d’un article ou la mise à jour d’un prix d’un produit dans un site marchand.
2.9 Le CRUD : Delete :
Dernière opération pouvant être effectuée sur des données dans une table, DELETE permet de supprimer physiquement des données. Il existe néanmoins un concept de suppression logique passant non pas par une opération delete mais par une opération de mise à jour update.
2.10 Fonction SQL :
Le langage SQL est également doté de nombreuses fonctions permettant de traiter des données avant de les obtenir dans php. Il existe deux types de fonction, les fonctions d’agrégation et les fonctions scalaires.
2.11 Jointures de tables :
Afin d’organiser et de structurer les données d’un site web ou d’une application, il est possible de procéder à la mise en relation de tables entre elles. On parle alors de jointures de tables, de clés primaires et de clés étrangères.
2.12 Connexion à une base de données.
Lorsqu’on sait écrire des requêtes SQL afin de manipuler les données d’une base de données et de ses tables, on peut utiliser php pour générer des pages web dynamique, il faut alors se connecter à la base de données avec laquelle on souhaite travailler.
2.13 MySqli vs PDO :
Il existe deux manières de s’interfacer avec une base de données et de travailler avec le contenu de tables avec Php, MySqli et PDO. Chacune de ces manières comporte ses avantages. Nous aborderons tout d’abord MySqli
2.14 Les formulaires :
Entrée en course de l’html dans la gestion dynamique d’un site web. Les formulaires sont un éléments important de la mise en place d’un backend en permettant de mettre en place des interfaces disponibles aux administrateurs du site afin d’opérer deux (ou trois) des opérations du CRUD, avec la mise en place de formulaires d’ajout (Create) , de modification (Update), voire, de suppression (Delete).
2.15 Traitement des formulaires :
Traiter le contenu des formulaires HTML se fait par le langage php et ses superglobales. Ces dernières sont utilisées pour récupérer le contenu d’un formulaire et pouvoir mettre en place les requêtes SQL permettant les transactions avec la base de données.
2.16 Sessions et header :
Un site web et basé sur un principe de changement et de chargement de page. On utilise les sessions afin de pouvoir passer des informations d’une page à une autre, comme par exemple, mettre en place des messages de confirmation

III/ UX/UI Design d’interfaces utilisateur

Partie 1: L’UX design

1. Qu’est-ce que l’UX design ?
   • Définition (UX VS UX)
   • Histoire de l’UX design
   • Le principe d’affordance
   • Application dans un projet
   • L’importance du facteur humain
   • L’utilisateur en tant qu’être humain
   • La psychologie cognitive
   • Les neurones miroirs
   • La notion d’attention
   • La prise de décision chez l’être humain
   • La recherche utilisateurs
2. Pourquoi mener une recherche utilisateurs ?
   • Préparer le terrain
   • Les différents types de recherche
   • Les limites de la recherche utilisateurs
   • Cas pratique (mener une recherche utilisateurs)
3. Les personas
   • Pourquoi utiliser des personas ?
   • Comprendre les personas
   • Les différents types de personas
   • Utiliser les personas en UX design
   • Cas pratique (création de personas)
4. Travailler en collaboration avec les utilisateurs
   • Les méthodes de collaboration
   • Scrum et les méthodes agiles
   • Le Design Thinking

Partie 2: L’UI design

1. Qu’est-ce que l’UI design ?
   • Définition de l’UI design
   • Le graphisme et l’UI design
   • Les différentes interfaces d’applications
   • Application dans un projet
   • L’identité visuelle
2. Qu’est-ce que l’identité visuelle ?
   • Présentation d’une identité visuelle complète
   • Les couleurs et leurs codes
   • Les différentes familles de typographies
   • Vectoriel VS marticiel
   • Les règles fondamentales du webdesign
3. Introduction aux règles du webdesign
   • Le responsive design
   • Le positionnement et le sens de lecture avec la loi de Fitts
   • La familiarité avec la loi de Jakob
   • La quantité avec les lois de Miller et de Hick
   • Choisir ses couleurs
   • Choisir ses typographies
   • Hiérarchiser ses informations
   • Ergonomie et accessibilité
   • Utiliser un logiciel de prototypage
4. Découverte de Figma
   • Les différents panneaux de l’interface
   • Les frames et sections
   • La manipulation des calques et des groupes
   • Naviguer dans l’interface de Figma
   • Les grilles et repères
   • Les formes géométriques simples
   • L’alignement
   • Contraintes et autolayout
   • L’outil plume
   • Afficher, masquer et combiner des formes
   • Créer et styliser du texte
   • Importer des fichiers
   • Enregistrer des styles pour son projet
   • Les plugins
   • Les composants
5. Démonstration de création d’une maquette (recopier de l’interface de Spotify)
   • Cas pratique (recopier l’interface de Netflix)
   • Créer une maquette de site web
6. Recherche graphique et moodboard
   • Choix des couleurs et typographies
   • Zoning
   • Wireframe
   • Réaliser un header et un menu
   • Créer une bannière
   • Réaliser une section de pricing
   • Réaliser une section témoignages
   • Prévoir la version responsive de sa maquette
   • Créer d’autres pages pour la suite
   • Exporter et partager sa maquette
   • Cas pratique (créer la page d’une application web)
7. Animer sa maquette de site web
   • Prototyper avec Figma
   • Les variantes de composants
   • Créer une navigation entre ses pages
   • Présentation de quelques possibilités d’animations
   • Créer un carrousel animé
   • Créer un menu déroulant
   • Animer sur une maquette mobile
   • Cas pratique (animer sa maquette d’application web)
8. Ressources utiles
   • L’onglet Community
   • Quelques bons plugins
   • Les UI kits
9. Conclusion générale

III/ Introduction à ChatGPT : Maîtriser l’IA pour une Performance Professionnelle

1. Introduction à ChatGPT
2. Utilisation de base et commandes
3. Cas pratiques pour une application pratique
4. Personnalisation et paramètres avancés
5. Utilisations professionnelles de ChatGPT
6. Quiz et évaluation finale

• Connaissance de base en Informatique
• Motivation et curiosité
• Goût pour la résolution de problème
• Capacité à apprendre par soi-même

Les critères d’acceptation ne prennent pas en compte le niveau scolaire, mais plutôt, la curiosité, la motivation, le projet professionnel, la rigueur et la logique ainsi que l’attrait auprès des nouvelles technologies. Les bases de l’anglais sont requises. Cette formation est destinée aux candidats les plus curieux et motivés.

Un entretien individuel est effectué suite à chaque demande de candidature pour valider ces prérequis et évaluer le degré de motivation des candidats.

Suite à l’entretien individuel, si ce dernier est concluant, des tests d’aptitudes sont effectués basés sur de la logique, logique avancée, problèmes mathématiques et bases de l’Anglais.

Une personne est désignée en qualité de référent pour les publics en situation de handicap, un aménagement spécifique des matériels est possible au cas par cas.

L’aboutissement logique de ce parcours de formation est le passage des examens de validation des blocs de compétences suivants issus de la certification RNCP37805 Développeur WEB de notre partenaire WEBECOM

• bloc n°1 RNCP37805BC01 intitulé « Développement Front End sites et applications Web »
• bloc n°2 RNCP37805BC02 intitulé « Développement back end d’applications Web »
• bloc n°4 RNCP37805BC04 intitulé “Design d’interfaces utilisateur (UI/UX)”

En suivant cette formation, vous vous engagez à passer l’examen de cette certification. Il devra être passé après la formation et après vos révisions personnelles.

Dans le cadre de cette certification professionnelle inscrite au RNCP il vous sera demandé de fournir les données suivantes :

Nom et prénom, date de naissance, lieu de naissance, coordonnées, expérience professionnelle avant et après la certification, fonction/statut, type de contrat, nom de l’entreprise, rémunération brute annuelle à 6 mois et à 1 an/2 ans.

Ces informations sont collectées afin d’éditer le parchemin de certification, d’alimenter le passeport de compétences, et pour répondre à l’obligation de l’évaluation de l’impact économique et social de la certification professionnelle.

Modalités de Passage du bloc de la certification

L’évaluation est composée d’une note de contrôle continu et d’une mise en situation professionnelle sous forme d’étude de cas.

• 1. Contrôle continu

Des évaluations formatives à visée pédagogique sont réalisées par les formateurs.

Elles sont effectuées tout au long de la formation via des exercices pratiques réalisés en

autonomie par les candidats.

À L’issue du parcours de formation, le responsable de la formation renseigne pour chaque bloc de compétence une appréciation ainsi qu’un niveau d’acquisition du bloc de compétence.

sur une échelle de 0 à 5.

• 2. Mise en situation professionnelle sur la base d’une étude de cas

« Développement Front End sites et applications web »

Le candidat réalise l’intégration complète du site internet ou de l’application en utilisant les dernières versions des langages de balisage HTML et CSS. Il développe en utilisant le JavaScript les animations et différentes interactions utilisateur demandées dans le cahier des charges. Il réalise le déploiement du site internet ou de l’application sur le serveur. Le candidat présente le résultat de son travail, le code source et argumente son travail effectué concernant le référencement naturel et le respect des normes d’accessibilité (Critères RGAA) auprès des membres du jury composé de professionnels.

• Éléments fournis : Les maquettes à intégrer, le cahier des charges, les éléments graphiques non optimisés à intégrer

• Éléments attendus : Déploiement complet et fonctionnel du site internet ou de l’application sur le serveur.

« Développement Back-End d’applications web »

Le candidat conceptualise et développe from scratch (Depuis une page blanche sans code préconstruit) l’application web spécifique demandée et sa base de données, à l’aide d’un langage de programmation serveur. L’application est développée en paradigme objet, incluant l’héritage et en utilisant une architecture MVC.

“Design d’interfaces utilisateur (UI/UX)”

Le candidat réalise en autonomie les maquettes d’interfaces de site web ou d’application, adaptées aux différents périphériques en suivant et analysant le cahier des charges fourni.Le candidat doit être force de proposition auprès du client représenté par le correcteur de l’examen.Le candidat présente ensuite à l’oral/ en vidéo les maquettes aux jurys et argumente ses choix graphiques, ainsi que sa réflexion en termes d’interface / expérience utilisateur.

• Éléments attendus : maquettes, liste des propositions validées par le client, tous supports permettant d’appuyer l’argumentation, sources d’inspiration, analyse de la concurrence, schéma de conception (wireframe), fichier validant les choix colorimétriques, typographiques …(Brand Board), prototypage des différentes interactions des éléments interactifs, export des éléments graphiques optimisés en vue de l’intégration (assets)

L’examen se déroule sur la plateforme de Skills4all.

• 3. Modalités de validation d’un bloc

La note globale d’un bloc est pondérée de la manière suivante :

– Mise en situation : 5/8

– Contrôle continu : 3/8

Inscription à l’examen

Il n’est pas nécessaire de vous inscrire à l’examen. Il est accessible dans le cours à la section “Examen de validation du bloc de compétences”.

Délais pour passage de l’examen

Le passage de l’examen est compris dans le temps de votre formation. Il devra être passé à la date de fin de formation.

Correction de votre examen et jury de certification

Après avoir soumis vos réponses, elles seront évaluées par un correcteur.

La note obtenue vous sera communiquée au bout de 3 semaines maximum après la date de fin de la formation.

Votre résultat à cet examen est soumis à un jury de certification organisé par l’organisme certificateur.

Obtention de l’attestation de validation du bloc de compétences

L’obtention officielle de la certification vous sera notifiée par le jury de certification après l’évaluation.

L’émission de votre attestation de validation du bloc de compétences correspondant à l’examen est déclenchée suite à la décision du jury de certification. Les délais peuvent aller jusqu’à plus de 2 mois après la fin de formation à 4 mois en fonction de la tenue des jurys de certification (uniquement 4 jurys de certification par an).

L’objectif de ces parcours est de vous permettre de préparer le passage des certifications de notre partenaire WEBECOM

• bloc n°1 RNCP37805BC01 intitulé «Développement Front End sites et applications web»
• bloc n°2 RNCP37805BC02 intitulé «Développement back end d’applications Web»
• bloc n°4 RNCP37805BC04 intitulé “Design d’interfaces utilisateur (UI/UX)”

À l’issue de cette formation, vous serez en mesure de :

1. Développement Front End sites et applications web

• Comprendre les concepts essentiels du web, savoir faire la différence entre le développement front-end et back-end.
• Choisir un éditeur de code (IDE), de gérer les raccourcis clavier et de travailler efficacement avec la console du navigateur.
• Acquérir des compétences en HTML pour créer et structurer des pages web, y compris l’utilisation de balises de base, de formatage, de listes, de tableaux, de liens, de formulaires et de média.
• Utiliser CSS pour styliser les pages web, incluant l’application de styles de base, l’utilisation de sélecteurs avancés, la gestion de la mise en page, et la création de styles adaptatifs.
• Utiliser JavaScript, incluant les variables, les types de données, les fonctions, les objets, les événements, la manipulation du DOM et le chargement de données à partir de serveurs.
• Maîtriser l’utilisation de Vue.js, un framework JavaScript côté client, pour créer des applications web interactives de manière efficace.
• Résoudre des problèmes courants de développement front-end, et de concevoir des solutions techniques pour des cas pratiques.
• Créer un portefeuille de projets concrets et variés démontrant les compétences en développement front-end.

2. Développement back end d’applications Web

• Synthétiser les données utiles à l’application en analysant le cahier des charges afin de formaliser le modèle de données
• Construire la base de données à l’aide d’un outil d’administration de base de données, dans le but de permettre la bonne circulation des données nécessaires au fonctionnement de l’application.
• Interroger la base de données par l’intermédiaire d’un langage de requêtes (SQL) pour permettre la manipulation et l’exploitation des données par l’application.
• Respecter le cadre légal en utilisant les normes imposées par le règlement général sur la protection des données (RGPD) afin de garantir l’intégrité des utilisateurs et la protection des données
• Conceptualiser l’application, formaliser son schéma fonctionnel, à partir du cahier des charges fourni et des échanges avec le client, dans le but d’optimiser la charge serveur et les temps de réponse.
• Développer une application en utilisant un langage de programmation adapté dans le but d’en construire l’architecture et les fonctionnalités côté serveur.
• Développer une application en utilisant la programmation orientée objet et les héritages afin de produire un code réutilisable et structuré
• Développer une application à l’aide d’une architecture Modèle-Vue-Contrôleur (MVC) dans le but d’assurer un code facile à maintenir et évolutif.
• Identifier un utilisateur et délimiter ses champs d’action dans le but de sécuriser l’application par l’attribution de rôles spécifiques.
• Travailler en équipe en utilisant des outils de collaboration et de gestion des versions afin de construire une application efficacement au sein d’une équipe de développeurs en entreprise.
• Préparer l’application pour la livraison en s’assurant de sa conformité à la demande du client et son bon fonctionnement.

3. Design d’interfaces utilisateur (UI/UX)

• Maîtriser les fondamentaux de l’UI/UX design et être capable de les appliquer dans la conception d’applications
• Connaître les bases du fonctionnement psychologique de l’humain lorsqu’il navigue sur des applications
• Utiliser les outils de l’UX design pour comprendre ses utilisateurs
• Effectuer une recherche utilisateurs, faire des tests, concevoir des questionnaires
• Connaître les bases du webdesign (couleurs, typographie, alignement, hiérarchisation)
• Concevoir des interfaces orientées utilisateur
• Maîtriser les outils principaux du logiciel Figma
• Créer des prototypes d’applications grâce au logiciel Figma
• Concevoir des maquettes interactives avec le logiciel Figma

Formation en digital-learning, 100% en ligne, formée de vidéos, de quiz, de lectures et contenus complémentaires, d’un forum et selon les cas, de webinaires.

– conformément aux CGU du CPF (https://www.moncompteformation.gouv.fr/espace-public/conditions-generales-dutilisation) votre formation a une date de début et une date de fin contractuelle et convenues au moment de votre demande auprès du CPF. La formation doit avoir été réalisée entièrement à la date de fin de la formation.

– conformément aux CGU du CPF, vous serez présenté automatiquement à la fin de la période de formation au certificateur français inscrit au CPF. La planification de l’examen sera réalisée avec le certificateur français directement.

– si votre formation comprend une ou plusieurs certifications internationales, vous devrez nous en passer commande au maximum 1 mois après la date de fin de votre formation. Cette demande se fait par mail à l’adresse contact@skills4all.com. Si cette date est dépassée, il ne sera plus possible de passer commande de(s) la certification(s) internationale(s).

– nous vous encourageons à lire attentivement nos conditions d’usage de notre plateforme disponibles ici (https://lms.skills4all.com/admin/tool/policy/viewall.php). Ces conditions rappellent également les cas de force majeure acceptables en cas d’impossibilité de suivre la formation ou de passer sa certification.

Skills4All est un certificateur et organisme de formation en digital learning, qui vous prépare aux certifications les plus reconnues sur le marché : PMI, AXELOS, IASSC, DevOps Institute, PEOPLECERT, GASQ, CFTL, BESTCERTIFS, dans les domaines de la cybersécurité, de l’IT, la data, l’IA, l’agilité, Scrum, Prince2, Lean Six Sigma, Gestion de projet et bien plus encore.

Avec nous, c’est quand vous voulez, où vous voulez, 24/7/365, à votre rythme.

Nous proposons des formations certifiantes, éligibles au CPF et reconnues dans le monde entier.

Skills4All est accrédité par le COFRAC (Comité Français d’Accréditation) en tant que certificateur dans le domaine de la sécurité de l’information : nos certifications sont les meilleures du marché et répondent à la norme ISO 17024, la plus exigeante aujourd’hui. Obtenir une certification Skills4All ou BestCertifs aujourd’hui c’est le gage d’une reconnaissance forte du marché qui valorisera vos compétences.