Formation Développeur Web Front-End éligible CPF

Prise en main d'un éditeur de code

Visual Studio Code est l'éditeur de code incontournable pour les développeurs web. Cette formation vous guidera pas à pas pour configurer votre environnement de travail, découvrir les fonctionnalités clés, et tirer pleinement parti de cet outil puissant et personnalisable.

• Installer et configurer Visual Studio Code.
• Découvrir les fonctionnalités principales de l'éditeur (explorateur de fichiers, terminal intégré, etc.).
• Gérer les extensions pour enrichir l'expérience de développement.
• Personnaliser l'interface utilisateur (thèmes, raccourcis clavier, etc.).
• Utiliser les outils de débogage intégrés.
• Naviguer efficacement dans les projets grâce à la recherche avancée et les fonctionnalités de navigation.

Apprendre Emmet pour coder plus rapidement

Accélérez votre écriture de code avec Emmet, une extension indispensable pour générer rapidement des balises HTML et CSS. En seulement 30 minutes, apprenez à utiliser les raccourcis et les astuces qui optimiseront votre flux de travail.

• Comprendre les bases d’Emmet et son rôle dans la productivité des développeurs.
• Générer rapidement des balises HTML et CSS avec des raccourcis.
• Utiliser des sélecteurs et des abréviations avancés pour coder efficacement.
• Structurer des fichiers HTML complexes en quelques commandes.
• Optimiser les flux de travail pour les projets web courants.
• Gagner en rapidité et en précision dans la rédaction de code.

Comment mettre en ligne facilement son site

Une fois votre projet réalisé, savoir le mettre en ligne est crucial. Cette formation vous explique, étape par étape, comment héberger votre site de manière simple et efficace, afin qu'il soit accessible à tous.

• Comprendre les bases de l’hébergement web et des noms de domaine.
• Choisir une solution d’hébergement adaptée à ses besoins.
• Utiliser un client FTP pour transférer des fichiers vers un serveur.
• Configurer un site web sur un serveur distant.
• Gérer les mises à jour et les sauvegardes d’un site en ligne.
• Résoudre les erreurs courantes liées au déploiement.

Les bases du langage HTML

Développez une compréhension solide de la structure des pages web en HTML.

• Comprendre la structure de base d'une page HTML.
• Utiliser les balises HTML courantes pour organiser du contenu.
• Ajouter des images, des liens et des listes dans une page.
• Appliquer des attributs pour enrichir les balises HTML.

Les bases du CSS

Apprenez les bases théoriques du CSS pour styliser vos pages. Explorez les sélecteurs CSS les plus utiles pour cibler efficacement vos éléments. Maîtrisez les différents types de positionnements en CSS pour un layout précis. Adaptez vos sites à différents écrans grâce aux medias queries.

• Comprendre les bases de la syntaxe CSS.
• Découvrir les propriétés CSS pour la couleur, la taille et la typographie.
• Identifier les règles de priorité entre les styles.
• Différencier les classes, ID et sélecteurs d’éléments.
• Différencier les comportements block et inline en CSS.
• Appliquer des styles en fonction du type d’affichage des éléments.
• Structurer des layouts efficaces avec des éléments CSS adaptés.
• Utiliser des sélecteurs CSS basiques (classe, ID, éléments).
• Découvrir des sélecteurs avancés (pseudo-classes, attributs).
• Cibler des éléments spécifiques avec précision dans des projets complexes.
• Comprendre les différents types de positionnement (static, relative, absolute, fixed).
• Utiliser les positionnements pour créer des layouts complexes.
• Résoudre les problèmes courants liés au positionnement CSS.
• Adapter vos pages web à différentes tailles d’écrans.
• Maîtriser les bases des media queries CSS.
• Concevoir un design responsive pour une meilleure expérience utilisateur.

RGAA : les règles de l'accessibilité

Découvrez les bonnes pratiques pour rendre vos sites accessibles à tous, conformément au RGAA.

• Comprendre les enjeux de l’accessibilité numérique.
• Identifier les règles principales du RGAA.
• Appliquer des pratiques d’accessibilité dans vos projets web.

Découverte de Flexbox

Flexbox, ou Flexible Box Layout, est un outil incontournable pour créer des mises en page modernes, fluides et adaptées à tous les écrans. Les cours dédiés à Flexbox dans ce module couvrent les bases, les cas pratiques et les fonctionnalités avancées, permettant aux apprenants de maîtriser cet outil en profondeur.

• Comprendre les bases du modèle Flexbox.
• Appliquer Flexbox pour aligner et répartir les éléments sur une page.
• Créer des mises en page flexibles adaptées aux écrans modernes.
• Utiliser Flexbox dans des cas concrets de mise en page.
• Structurer des colonnes, des lignes et des zones flexibles.
• Résoudre des problèmes courants liés au positionnement avec Flexbox.
• Appliquer les media queries pour gérer les différents formats d’écran.

Découverte de CSS Grid

CSS Grid Layout est une méthode puissante et moderne pour structurer des mises en page complexes avec une précision inégalée. Les cours consacrés à CSS Grid dans ce module abordent les bases, les applications pratiques et les combinaisons avec d'autres outils, offrant une maîtrise complète de cet outil essentiel au développement web.

• Comprendre le modèle CSS Grid et ses avantages.
• Utiliser les propriétés de Grid pour organiser des layouts complexes.
• Maîtriser la gestion des lignes, des colonnes et des zones.
• Construire des mises en page complètes avec CSS Grid.
• Utiliser Grid pour concevoir des interfaces modernes.
• Résoudre des problèmes pratiques liés à l’utilisation de CSS Grid.

Aller plus loin avec Flexbox et Css Grid

Les derniers cours de ce module combinent les notions avancées de CSS Grid et Flexbox pour permettre aux apprenants de concevoir des projets complexes, responsives et modernes. Ils visent à approfondir les compétences pratiques et stratégiques pour structurer efficacement des mises en page professionnelles en combinant même ces 2 technologies. Cela vous permettra de pouvoir intégrer des pages complexes en responsive design.

• Comparer les forces et limites de CSS Grid et Flexbox.
• Utiliser Grid pour structurer l’ensemble de la mise en page.
• Intégrer Flexbox pour gérer les éléments internes et les alignements.
• Intégrer CSS Grid et Flexbox dans des projets complexes.
• Créer des zones structurées avec Grid tout en optimisant les détails avec Flexbox.
• Résoudre des problématiques spécifiques de design grâce à des exemples concrets
• Créer un site web responsive de bout en bout.

• Créer et styliser des tableaux en CSS pour des affichages structurés et esthétiques.
• Concevoir des formulaires modernes avec des effets interactifs et ergonomiques.
• Réaliser des animations fluides pour des headers et des éléments interactifs.
• Concevoir des menus de navigation discrets et dynamiques.
• Créer des toggle switches (interrupteurs) interactifs avec CSS pur.
• Personnaliser les barres de défilement (scrollbars) pour les adapter au design du site.
• Intégrer des labels toujours visibles pour améliorer l’accessibilité des formulaires.
• Mettre en place des effets parallaxes pour dynamiser les arrière-plans des sites.
• Styliser des images en formes rondes ou avec des bordures spécifiques.
• Ajouter des icônes dans les champs de formulaire pour un design fonctionnel.
• Créer des effets de zoom interactifs sur des images.
• Appliquer des transitions et des transformations CSS pour enrichir l’interactivité.
• Concevoir des champs de formulaire modernes et visuellement attrayants.
• Intégrer des formes géométriques dans des designs multimédias.
• Maîtriser la création de designs responsive et accessibles sans programmation supplémentaire.

• Comprendre les bases du langage JavaScript moderne.
• Manipuler le DOM pour interagir avec les éléments d’une page web.
• Gérer les événements utilisateurs (clics, entrées clavier, etc.) pour créer des interfaces dynamiques.
• Utiliser des fonctions et des objets pour structurer le code.
• Maîtriser les fonctionnalités modernes de JavaScript (ES6 et au-delà).
• Appliquer les promesses et les async/await pour gérer des appels asynchrones.
• Comprendre et manipuler les collections de données, comme les tableaux et les objets.
• Créer des interactions avancées avec des effets et animations JavaScript.
• Utiliser les modules JavaScript pour organiser le code.
• Développer des applications web dynamiques et interactives.
• Débuguer et optimiser le code pour améliorer les performances.
• Travailler avec les APIs pour récupérer et afficher des données externes.
• Gérer les erreurs et les exceptions dans un code JavaScript.
• Structurer des projets JavaScript modernes avec une approche modulaire.
• Intégrer JavaScript dans des projets HTML et CSS pour enrichir l’expérience utilisateur.

• Comprendre et utiliser les expressions régulières pour valider et manipuler des données.
• Gérer efficacement les chaînes de caractères dans des projets JavaScript modernes.
• Créer des menus burger responsive pour améliorer la navigation mobile.
• Utiliser JavaScript pour ajouter des animations et interactions fluides aux menus.
• Comprendre les bases de la communication asynchrone avec XMLHttpRequest.
• Récupérer et afficher des données depuis des APIs externes sans recharger la page.
• Gérer les requêtes HTTP pour des applications dynamiques.
• Créer, lire et manipuler des cookies pour stocker des informations côté client.
• Comprendre les implications de sécurité et les bonnes pratiques liées aux cookies.
• Créer des sliders avancés pour des galeries ou des carrousels.
• Utiliser JavaScript pour animer et contrôler les transitions entre les diapositives.

• Concevoir des modales interactives pour améliorer l’expérience utilisateur.
• Créer des menus burger horizontaux et verticaux avec des animations.
• Fixer une barre de navigation lors du défilement pour une meilleure accessibilité.
• Ajouter des fonctionnalités d’affichage et de masquage de mot de passe dans les formulaires.
• Générer des mots de passe aléatoires via JavaScript pour des projets pratiques.
• Appliquer des effets dynamiques au défilement (scroll) pour enrichir les designs.
• Créer et animer des barres de progression pour des projets interactifs.
• Mettre en place un diaporama avec des options de contrôle (play/pause).
• Concevoir des effets de survol pour des galeries d’images interactives.
• Implémenter un mode sombre (dark mode) pour améliorer l’ergonomie visuelle des sites.
• Construire des pages de vente dynamiques avec des éléments interactifs.
• Intégrer un bandeau de cookies pour répondre aux exigences légales.
• Manipuler les labels dans les formulaires pour améliorer l’expérience utilisateur.

• Comprendre les bases du SEO et son impact sur la visibilité en ligne.
• Optimiser les balises HTML pour le référencement (title, meta description, heading).
• Structurer le contenu avec des balises sémantiques pour un SEO efficace.
• Améliorer les performances techniques d’un site (vitesse de chargement, mobile-friendly).
• Utiliser des outils d’analyse SEO pour suivre et améliorer le classement.
• Appliquer des stratégies de mots-clés pour cibler les bonnes audiences.
• Mettre en place une structure de liens internes pour renforcer la navigation et le SEO.
• Optimiser les images pour le web (alt text, taille, compression).
• Intégrer les bonnes pratiques pour le contenu multimédia et le responsive.
• Adapter le contenu pour répondre aux exigences des algorithmes de moteurs de recherche.