éF École de FranceFormations CPF & écoles Trouver ma formation
Titre RNCP 100% CPF

Développeur Front-end

CAMPUS26

3 990 €à partir de
Durée variabledurée
1session active
Haute-Loirelieu

Objectifs de la formation

1 - Installer et configurer son environnement de travail
Adapter et paramétrer les outils (éditeurs, serveurs locaux, frameworks, etc.) en fonction des contraintes du projet web ou web mobile.
2 - Maquetter des interfaces utilisateur (UI)
* Réaliser des maquettes ou prototypes d'écrans web / mobile.
* Modéliser l'enchaînement / navigation des écrans (flow, arborescence) en tenant compte de l'expérience utilisateur (UX) et des contraintes d'interface mobile.
3 - Réaliser des interfaces utilisateur statiques et adaptables (responsive)
* Produire des pages statiques en HTML / CSS.
* Veiller à ce que l'interface s'adapte à différents supports (mobile, tablette, desktop).
* Respecter la charte graphique, les normes de design, les standards web.
4 - Développer la partie dynamique de l'interface (comportements côté client)
* Programmer les interactions et comportements avec JavaScript (ou frameworks similaires).
* Gérer les événements utilisateur, manipuler le DOM, réaliser des échanges asynchrones (AJAX / fetch), etc. (implicite dans la compétence « partie dynamique »)
5 - Réaliser une interface utilisateur via une solution de gestion de contenu ou e-commerce
* Installer ou adapter une solution existante (CMS, boutique en ligne) pour qu'elle dispose d'une interface front-end appropriée.
* Développer des modules complémentaires ou adapter le thème pour répondre au besoin spécifique.

Programme

1. Installer & configurer l'environnement de travail - Choisir les outils adaptés (éditeur de code, navigateur(s), outils de test, gestion de version)
- Installer les dépendances, frameworks ou librairies frontend (par exemple, un starter template)
- Configurer le serveur local ou l'environnement de dev (live reloading, build tools, gestion des assets)
- Contrôle de version (Git ou équivalent)
- Mise en place de l'organisation du projet (structure de fichiers, conventions) Être capable de démarrer un projet front-end correctement, avec tous les outils opérationnels, afin de produire code et tests dans de bonnes conditions.
2. Maquetter des interfaces utilisateur (UI) / prototype - Utiliser des outils de maquettage / wireframing (Sketch, Figma, Adobe XD, etc.)
- Concevoir des maquettes pour différents formats (desktop, tablette, mobile)
- Prévoir navigation / interaction (navigation entre écrans, menus, transitions)
- Prise en compte de l'ergonomie utilisateur, UX, contraintes d'usage mobile, d'accessibilité
- Intégration des chartes graphiques, typographies, couleurs, icons Capacité à traduire un besoin fonctionnel/design en maquette claire : qu'un développeur front-end ou même le client puisse visualiser l'interface avant implémentation.
3. Interfaces statiques et adaptatives - HTML5 : balisage sémantique, structure de page
- CSS3 : mise en page, flexbox, grid, animations de base
- Responsive design : media queries, principe "mobile-first", adaptabilité aux écrans variés
- Gestion des images, ressources, optimisation (taille, formats, chargement)
- Intégration de la maquette visuelle dans le navigateur, respecter la charte graphique Produire des pages qui s'affichent correctement sur différents périphériques, avec un rendu fidèle aux maquettes, performant, optimisé.
4. Interface dynamique / comportements interactifs - JavaScript pur (ES6+) ou frameworks/libraries selon la formation
- Manipulation du DOM, gestion d'événements utilisateur
- appels asynchrones : fetch / AJAX pour récupérer des données externes
- Utilisation de modules, bundlers (selon le contexte)
- Validation des formulaires client
- Principes de dégradation gracieuse / progressive enhancement
- Tests de compatibilité entre navigateurs Permettre une expérience utilisateur riche : interactions, retours dynamiques, données externes, confort d'utilisation, robustesse sur différents navigateurs.
5. Interface avec CMS / solution de e-commerce - Comprendre l'architecture d'un CMS ou d'une plateforme e-commerce
- Adapter un thème ou template existant
- Intégrer le front-end d'un CMS (ex : WordPress, Drupal, Prestashop, etc.)
- Personnaliser les templates / modules front-end
- Assurer que l'interface respecte les contraintes de sécurité et performance dans ce contexte (chargement, plugins, etc.) Savoir réutiliser des solutions existantes quand c'est pertinent, sans repartir de zéro, tout en contrôlant la qualité, la sécurité et la cohérence visuelle.

Résultats attendus

Installer et configurer l'environnement de développement
Disposer d'un poste de travail opérationnel avec les outils nécessaires (éditeur, navigateur, gestionnaire de versions, serveur local).
Être autonome pour préparer un projet web ou mobile.
Maquetter l'application
Produire des maquettes ou prototypes fonctionnels et ergonomiques.
Concevoir une navigation claire et adaptée aux différents supports (mobile, tablette, desktop).
Réaliser une interface utilisateur statique et responsive
Intégrer une charte graphique à l'aide de HTML5 et CSS3.
Produire des pages web adaptées aux différents écrans (responsive design).
Respecter les bonnes pratiques d'ergonomie et d'accessibilité.
Développer une interface dynamique côté client
Rendre l'interface interactive avec JavaScript (gestion d'événements, manipulation du DOM, appels asynchrones).
Mettre en œuvre des comportements dynamiques qui enrichissent l'expérience utilisateur.
Implémenter une interface avec une solution CMS ou e-commerce
Installer, configurer et personnaliser un CMS (ex. WordPress, Prestashop, Drupal).
Adapter un thème ou un module pour répondre aux besoins du projet.
Respecter les contraintes de sécurité et de qualité
Appliquer les recommandations de sécurité côté client (prévenir XSS, injections, vols de données).
Intégrer les normes d'accessibilité (RGAA/WCAG).
Produire un code structuré, maintenable et conforme aux standards.
En résumé :
Le résultat attendu est la capacité à concevoir, coder et sécuriser toute la partie visible d'une application web ou mobile, en s'assurant de sa compatibilité multi-supports, de son accessibilité et de son interactivité.

Les points forts

La formation en développement front-end à pour objectif de savoir intégrer des interfaces de sites ou d'applications web en utilisant HTML5, CSS3, SASS. Elle permet également d'apprendre le développement évènementiel à l'aide du langage Javascript.

La certification

TP Développeur web et web mobile

RNCP 37674 RS -1 CertifInfo 114920

Organisme & lieu

Formations similaires