[{"data":1,"prerenderedAt":46},["ShallowReactive",2],{"course-html-et-css-avances-api-techniques-modernes-et-bonnes-pratiques":3,"highlight-JavaScript-// Utilisation de l'":45},{"id":4,"name":5,"slug":6,"location":7,"targetAudienceFormatMarkdown":8,"prerequisitesFormatMarkdown":9,"objectivesFormatMarkdown":10,"descriptionFormatMarkdown":11,"teachingMethodsFormatMarkdown":12,"teachingResourcesFormatMarkdown":13,"evaluationMethodsFormatMarkdown":14,"accessibilityFormatMarkdown":15,"accessMethodsFormatMarkdown":16,"minimumParticipants":17,"maximumParticipants":17,"duration":18,"reference":19,"trainerType":7,"updated_at":20,"created_at":21,"price":22,"organizationMode":7,"theme":23,"code":27,"tags":32,"metadata":36},"/api/courses/19b98fbd-46f1-4905-8a23-82409c8dc1b7","HTML et CSS avancés – API, techniques modernes et bonnes pratiques ","html-et-css-avances-api-techniques-modernes-et-bonnes-pratiques",null,"Développeurs front‑end souhaitant approfondir les fonctionnalités avancées du HTML et du CSS. \n\nIntégrateurs Web et développeurs UI/UX impliqués dans des projets Web interactifs. \n\nDéveloppeurs full‑stack désireux d’améliorer la performance et la qualité des interfaces Web.","-   Maîtrise des bases du HTML5 et du CSS3. \n-   Connaissance de l’utilisation d’un éditeur de code et d’un navigateur pour le développement Web. \n-   Expérience préalable en développement front‑end ou conception d’interfaces Web est un plus. ","-   Comprendre et utiliser les API et fonctionnalités avancées du HTML5. \n-   Exploiter les capacités modernes du CSS pour structurer des interfaces réactives et accessibles. \n-   Utiliser des techniques avancées de mise en forme, d’animations et de responsive design. \n-   Appliquer des API CSS (variables CSS, custom properties, grid, flexbox) pour des mises en page complexes. \n-   Mettre en œuvre des bonnes pratiques pour optimiser le rendu, la réactivité et l’accessibilité des pages. ","--day1--\n\n## Fonctionnalités avancées de HTML \n\n-   Présentation des apports modernes du HTML5 (nouvelles balises sémantiques). \n-   Structure sémantique d’une page HTML et bonnes pratiques d’organisation. \n-   Utilisation des API intégrées (formulaires avancés, attributs data-\\*, templates). \n-   Audio, vidéo et intégration multimédia native. \n-   Atelier pratique : création d’une page structurée avec sémantique et éléments HTML avancés. \n\n--break--\n\n## Sélecteurs et principes avancés du CSS \n\n-   Sélecteurs CSS avancés (nth‑child, attributs, pseudos classes spécifiques). \n-   Héritage, spécificité et cascade expliqués en profondeur. \n-   Fonctions CSS utiles (calc(), var(), clamp()). \n-   Atelier pratique : mise en forme complexe d’un composant d’interface. \n\n--day2--\n\n## Mise en page moderne avec Flexbox \n\n-   Concepts fondamentaux de Flexbox pour disposer des éléments. \n-   Alignements, ordres, répartitions et flexibilité des contenus. \n-   Résolution de mises en page courantes avec Flexbox. \n-   Exercices pratiques : structurer un layout responsive avec Flexbox. \n\n--break--\n\n## Grilles avancées avec CSS Grid \n\n-   Introduction à CSS Grid et comparaison avec Flexbox. \n-   Définition de grilles, zones et lignes de grille. \n-   Alignement de zones et organisation complexe des interfaces. \n-   Démonstrations et exercices : grilles à plusieurs dimensions. \n\n--day3--\n\n## API CSS, variables et thèmes dynamiques \n\n-   Custom properties : syntaxe, portée et utilité. \n-   Thématisation via variables CSS et transitions de thèmes. \n-   Utilisation de media queries pour adaptabilité selon les écrans. \n-   Atelier guidé : mise en œuvre d’un thème dynamique CSS. \n\n  \n\n--break--\n\n## Accessibilité, performance et bonnes pratiques \n\n-   Principes d’accessibilité Web (ARIA, roles sémantiques, contraste). \n-   Optimisation du rendu CSS et minimisation des recalculs. \n-   Intégration progressive des techniques CSS pour la performance. \n-   Revue des bonnes pratiques pour structurer le CSS et maintenir des interfaces maintenables. \n-   Synthèse des acquis, retours d’expérience et pistes pour aller plus loin.","Nos formations, équilibrées entre théorie (50%) et pratique (50%), offrent un apprentissage interactif grâce à des méthodes variées comme les travaux pratiques, les mises en situation et les démonstrations. Des QCM réguliers assurent le suivi des acquis.\n\nVariables suivant les formations, les moyens techniques mis en oeuvre sont :\n\nOrdinateurs Mac ou PC, connexion internet fibre, tableau blanc ou écran (pour le distanciel).\n\nEn cas de formation intra sur site externe à Le Code, le client s'assure et s'engage également à avoir toutes les ressources matérielles pédagogiques nécessaires\n\n(équipements informatiques...) au bon déroulement de l'action de formation visée conformément aux prérequis indiqués dans le programme de formation communiqué","Les supports pédagogiques sont remis aux stagiaires sous format numérique et/ou papier selon les modalités de la formation.\n\n  \n\nIls comprennent des supports de cours, des présentations, des fiches pratiques, des études de cas, des exercices applicatifs ainsi que des QCM d’entraînement selon la formation. (adapté au choix du formateur)\n\n  \n\nLes formations s’appuient sur des moyens techniques adaptés : ordinateurs, logiciels professionnels, connexion internet, écran ou vidéoprojecteur, ainsi que des outils collaboratifs et de visioconférence pour les formations à distance.\n\n  \n\nL’ensemble des supports pédagogiques est accessible pendant et après la formation afin de favoriser l’appropriation et la mise en pratique des compétences acquises.","En amont de la formation, un recueil des besoins permet de récolter des informations sur le stagiaire et ses attentes. L’évaluation se fait en cours de formation, par des études de cas ou des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation et/ou un examen.\n\nUn suivi de qualité est effectué grâce à nos sessions en groupe restreint (entre 2 et 9 participants maximum). Le stagiaire émargera par demi-journée et recevra une attestation de formation.","Nous informons l'ensemble de nos clients et stagiaires que nous sommes dans la capacité d’adapter les sessions selon les handicaps et les situations spécifiques. Nous nous engageons à répondre à toutes vos demandes sous un délai de 48h\n\nouvré.","Si l’une de nos formations vous intéresse, contactez-nous au +33 4 93 65 34 24 ou à l’adresse mail contact@m2g-intellect.fr. Selon votre besoin et vos attentes, nous organiserons un échange téléphonique avec le formateur pressenti afin d’adapter la\n\nformation et ses modules, puis nous vous adresserons un devis.\n\nLes dates de la formation seront à convenir sous 30 jours maximum.",0,"21.00","HTML CSS av","2026-04-23T09:22:56+00:00","2026-04-23T09:19:38+00:00","1800.00",{"id":24,"name":25,"slug":26},"/api/themes/abd712b8-6a6c-4c9b-b382-0aea1eac47d6","Développement Web Frontend","developpement-web-frontend",{"id":28,"label":29,"domain":30},"/api/training_specialities/163","326 - Informatique, traitement de l’information, réseaux de transmission des données",{"label":31},"32 - Communication et information",[33],{"id":34,"name":35},"7732139d-6025-4fde-b145-39298ced3408","MENUFEATURED",{"desc-accroche":37,"Description":38,"icon-color":39,"icon-name":40,"code-langage":41,"code-snippet":42,"courte-description":43,"titre-accroche":44},"Poussez les standards du Web à leur maximum : maîtrisez les APIs HTML5 (Canvas, Web Storage, Geolocation), les techniques CSS de pointe (Variables, Grid avancée, Filtres) et les meilleures stratégies d'optimisation de performance et de SEO technique.","Cette formation de haut niveau s'adresse aux développeurs souhaitant franchir un cap dans leur maîtrise du Front-End. Elle explore les recoins les plus puissants des standards actuels, en mettant l'accent sur les APIs JavaScript natives du navigateur qui permettent d'enrichir l'interactivité sans bibliothèques tierces. Vous découvrirez comment structurer des documents complexes avec une sémantique irréprochable, tout en exploitant les dernières avancées du CSS moderne (Container Queries, fonctions de calcul, animations haute performance). Un volet important est dédié aux bonnes pratiques industrielles, incluant l'accessibilité avancée, le SEO technique et les stratégies de chargement critique pour garantir des interfaces fluides sur tous les supports.","#2962FF","mdi:xml","JavaScript","// Utilisation de l'API Geolocation et des Custom Properties\nconst root = document.documentElement;\n\nnavigator.geolocation.getCurrentPosition(pos => {\n\tconst { latitude, longitude } = pos.coords;\n\troot.style.setProperty('--user-lat', latitude);\n\tconsole.log(`Position mise à jour : ${latitude}`);\n});","Maîtrisez les APIs HTML5 et les techniques CSS de pointe pour concevoir des sites web ultra-performants, interactifs et conformes aux standards modernes les plus exigeants.","Allez au-delà des fondamentaux : exploitez la pleine puissance du HTML5 et du CSS3 pour bâtir des expériences web riches, performantes et innovantes.","\u003Cpre class=\"hljs\">\u003Ccode class=\"language-javascript\">\u003Cspan class=\"hljs-comment\">// Utilisation de l'API Geolocation et des Custom Properties\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> root = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">documentElement\u003C/span>;\n\nnavigator.\u003Cspan class=\"hljs-property\">geolocation\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentPosition\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">pos\u003C/span> =>\u003C/span> {\n\t\u003Cspan class=\"hljs-keyword\">const\u003C/span> { latitude, longitude } = pos.\u003Cspan class=\"hljs-property\">coords\u003C/span>;\n\troot.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-title function_\">setProperty\u003C/span>(\u003Cspan class=\"hljs-string\">'--user-lat'\u003C/span>, latitude);\n\t\u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Position mise à jour : \u003Cspan class=\"hljs-subst\">${latitude}\u003C/span>`\u003C/span>);\n});\u003C/code>\u003C/pre>",1781121857052]