- Certifiant
- Cours pratique
- Informatique
Formation Technologies Web : HTML5, CSS3, JavaScript
HTML, CSS, JavaScript, HTTP, Bootstrap, CSS Grid, Ajax...
- Durée
- 5 jours
- Niveau
- Intermédiaire
- Modalités
- Présentiel / Distanciel
- Certification
- AVIT by ENI - Développement de sites web avec le langage de balises HTML et des feuilles de styles CSS
Description de la formation Technologies Web
Cette formation Technologies Web vous propose de prendre en main de façon progressive les trois technologies « inséparables » utilisées par les développeurs front : HTML, CSS, et Javascript. Les langages sont tout d'abord présentés de manière individuelle, afin que vous puissiez bien comprendre leurs rôles ; puis, ces langages sont envisagés dans une approche globale afin d'illustrer la complémentarité de cette trilogie HTML, CSS et Javascript.
Bien entendu, les bonnes pratiques présentées sont adaptées aux différents supports (responsive design), et vous permettront de développer des applications Web pour tout type d’équipement (mobiles, tablettes, PC, portable). Nous abordons ensemble les nouveautés vastes et puissantes apportées conjointement par le HTML5, le CSS3, le puissant module CSS Grid ainsi que les nouvelles versions de JavaScript et AJAX.
Objectifs pédagogiques
À l'issue de cette formation Technologies Web vous aurez acquis les connaissances et les compétenes nécesaires pour :
- Comprendre les architectures WEB et les technologies sous-jacentes
- Développer en HTML/HTML5
- Créer et utiliser des feuilles de style CSS3
- Proposer des formulaires dans votre application WEB
- Tirer parti des nouveautés HTML5 et CSS3 pour alléger les besoins en JavaScript
- Connaître les possibilités multimédia en HTML5/Javascript (video, son, animation)
- Créer des mises en page avec les CSS Grid
- Adapter l'affichage des versions mobile / tablette avec BootStrap
- Proposer des services géolocalisés dans vos développements
- Faciliter la communication entre le serveur et le navigateur (Ajax)
- Proposer des applications hors ligne (mobile, tablette)
Objectifs opérationnels
Savoir maîtriser les technologies web tels que HTML 5, CSS3 et Javascript.
Cette formation vous prépare au passage de la certification "AVIT by ENI - Développement de sites web avec le langage de balises HTML et des feuilles de styles CSS" qui démontre votre compétence à construire des pages web statiques avec un langage de balises et à les mettre en forme avec une feuille de style.
L’examen de certification se passe en ligne sous forme d’un QCM d’une durée d’1h. Le résultat s’affiche selon un score de 1000 points. Un score supérieur à 600 indique que les compétences sont acquises.
La certification n’est pas obligatoire. L’inscription à l’examen n’est pas incluse dans le prix de la formation.
Programme
Contenu du cours, module par module
13 modules
- Vocabulaire autour des projets Web (front end, back end, backoffice, web services, etc.)
- Les métiers (développeur front, back, full, web master, data manager, référencement, etc.)
- Le modèle client/serveur dans le contexte du Web
- Les technologies côté front (HTML, CSS, JavaScript)
- Complémentarité avec les technologies du back office (Java, PHP, ASP.Net, etc.)
- La place des bases SQL dans les architectures Web (architecture n-tiers)
- Ce qui a changé pour le développeur avec l’arrivée du HTML5 et du CSS3 ?
- Protocoles et formats d’échange entre toutes ces briques (HTTP, XML, JSON, WebServices, Ajax, etc.)
- Développer une application Web selon le modèle MVC : définition et explication
- Synthèse à travers un exemple simple (formulaire) résumant une architecture standard d’application Web où le rôle de chaque brique est mis en évidence avec du code minimal
- Spécificités d’un langage de balises
- Un premier exemple HTML simple pour être concret (texte, titres, hyperliens)
- Format général d’un document (en-tête, corps, etc.)
- Différences entre HTML, XHTML, et XML
- Impacts de la normalisation pour les développeurs
- Pourquoi parle-t-on de DOM (Document Object Model) ?
- Gestion des paragraphes
- Compléments sur les hyperliens
- Comprendre les différences de format des images (gif, jpeg, png, etc.)
- Gestion des images dans une page HTML
- Les listes (puce, numérotée, menu, etc.)
- Les tables (th, tr, td, etc.)
- Le point d’interface avec l’utilisateur
- Comment gérer un formulaire en HTML ?
- Les méthodes GET, POST
- Récupérer et envoyer des données depuis un formulaire (FORM, LABEL, INPUT, TEXTAREA, BUTTON,)
- Concevoir le formulaire
- Mise en œuvre d’un formulaire standard (nom, adresse, téléphone, mail)
- Présentation des feuilles de style
- Pourquoi parle-t-on de cascade ?
- Définition et attributs d'un style
- La problématique du positionnement des éléments
- Normalisation et compatibilité des navigateurs.
- Gestion des caractères (web fonts, ombrage, etc.)
- Gestion des couleurs et des effets
- Les apports des nouveautés CSS3 (survol, animation, transition, etc.).
- Zoom sur les transformations et les animations (rotation, redimensionnement, déformation)
- Découper l’espace en régions superposables avec les CSS Grid
- Tour d’horizon des propriétés CSS (grid-*) et des fonctions (repeat, minmax, fit-content)
- L'approche complémentaire Flex
- Exemple de feuilles CSS dans une charte graphique professionnelle
- Qu’est-ce qu’une feuille de style LESS ?
- Qu’entend-on par « Mobile First » ?
- Philosophie « responsive » de Bootstrap
- L’intégration de Bootstrap (HTML, CSS, Javascript, frameworks divers)
- Installer et utiliser Bootstrap dans son projet
- La dimension grille (ligne/colonne) de Bootstrap
- Mise en œuvre et tests sur différents équipements (mobile, PC, portable)
- Introduction au langage JavaScript
- Présentation d'exemples
- Les versions de JavaScript
- JavaScript embarqué dans les pages HTML
- Les fondamentaux (variables, types, structures, opérateurs, instructions)
- Manipulation de tableaux
- Fonction (définition, appel, passage d’arguments)
- Programmation objet en JavaScript (méthodes, propriétés)
- Dialogues avec l'utilisateur en JavaScript
- Les pièges classiques en JavaScript
- JavaScript et EcmaScript (vocabulaire : ECMA, EcmaScript, ES?, ES201?)
- Le changement net depuis ES6
- Compatibilité avec les navigateurs et les frameworks
- Arrow function, promise, etc.
- Module import
- Les évènements gérés par JavaScript (survol, clic, clavier, etc.)
- Propagation des évènements
- L’objet Event
- Les pop-ups
- Le fonctionnement de l'objet document
- Interactivité, contrôle et transformation des pages HTML
- Manipulation de la page (DOM)
- Manipulation des URL et des redirections
- Sélection d'éléments
- Modification du contenu HTML
- Modification du graphisme CSS
- Gestion des chaînes de caractères à travers l'objet String
- Les principales fonctions mathématiques dans l'objet Math
- Manipulation des dates via l'objet Date
- Manipulation des tableaux via l'objet Array
- Les expressions régulières dans le JavaScript
- Règles de transtypage et comparaisons
- Paramètres obligatoires / facultatifs / indéfinis des fonctions
- Quelques outils pour tester, debugger et mesurer les performances de vos programmes JavaScript
- Rappel des composants d’un formulaire (checkbox, textbox, list, button, etc.)
- Manipulation de l'objet form
- Contrôle des données saisies dans un formulaire
- Le formulaire dynamique
- Liens entre évènements et formulaire (chargement, modification, validation, etc.)
- Validation du formulaire précédent « manuellement » en Javascript
- Pourquoi AJAX (Asynchronous JavaScript And Xml) ?
- Mise en œuvre avec l’objet XMLHttpRequest
- Méthodes de requête http (GET, POST, etc.)
- Récupération de contenus HTML, XML ou JSON
- Géolocalisation
- Glisser / Déposer
- Multi upload
- Historique (pushstate)
- Local Storage
- Web GL
- Web RTC
- Fullscreen
- API branchées mobile
- Détecteur de proximité
- Vibration API
- Utilisation du gyroscope du smartphone
- Accès à la webcam, au micro
- Shadow DOM
- Évolutions attendues
- Limites du JavaScript natif
- Comprendre le rôle des principaux frameworks et les technologies associées : Angular, Vue, React, Node
- Exemples de bases avec Angular
- React, philosophie et principes de fonctionnement
- Les tendances du marché et des projets
Programme mis à jour le 15/03/2022
Public concerné
Cette formation Technologies Web : HTML5, CSS3, JavaScript est destinée aux développeurs web ainsi qu'aux intégrateurs HTML.
Prérequis
Des connaissances générales du web sont nécessaires pour suivre cette formation sur les technologies Web.
Il faut également connaître les bases de la programmation (variables, tests, boucles, fonctions, etc.) pour la partie JavaScript.
J’évalue mes connaissances pour vérifier que je dispose des prérequis nécessaires pour profiter pleinement de cette formation en faisant le test de prérequis.
Faire le testFinancement
Cette formation peut être prise en charge par votre entreprise, seule ou avec l’appui de son opérateur de compétences. Nous fournissons le devis et les pièces attendues par l’OPCO.
4,7/5
12 avis
« Mon avis sur le contenu du stage : "Stéphane a su fournir une grande qualité de contenu mais aussi de supports. J'ai tout particulièrement aimé tous les exemples qu'il a pu nous fournir tout au long de la formation." Mon avis sur le formateur : "Stéphane est très pédagogue et a été très bon tout au long de la formation. Il était aussi intéressant de voir à quel point il était passionné lorsqu'il montrait des cas pratiques. Le fait d'avoir un formateur qui travaille aussi dans ce domaine fut un gros plus vis-à-vis de l'expérience donnée au cours de la formation." Mon avis sur la salle de formation : "Même en télétravail, la formation était très intéressante et bien animée." Ce que j'ai le plus apprécié : "La qualité et la quantité de cas pratiques fournis." »
CAUVIN ThierrySOPRA STERIA ACADEMY « Mon avis sur le contenu du stage : "J'aime le contenu du cours, j'ai déjà eu quelques connaissances en js mais j'ai quand même appris pas mal de nouvelles choses en JS." Mon avis sur le formateur : "Le formateur est vraiment patient et prend le temps de répondre à toutes nos questions mais parfois on trouverait son code est un peu difficile à comprendre, mais dans l'ensemble c'est bien d'apprendre de nouvelles choses." Ce que j'ai le plus apprécié : "Le formateur nous a donné beaucoup de ressources pour étudier et réviser, je trouve cela très utile." »
LW « Mon avis sur le contenu du stage : "Un peu plus challengeant que les autres cours, plus de travaux pratiques. Je me suis amélioré en algorithme." Mon avis sur le formateur : "J'avais quelques lacunes en algorithmie l'année dernière durant ma formation de développeuse web. J'ai l'impression qu'avec le recul et l'expérience je comprends mieux, mais cela est aussi dû aux explications du formateur qui a une bonne méthode d'enseignement." Ce que j'ai le plus apprécié : "Visuel sur le travail des autres, correction des exercices en partage d'écran." »
WM
Les avis figurant ci-dessus sont issus des fiches d’évaluation que remplissent les participants à la fin de la formation. Ils sont ensuite publiés automatiquement si les personnes ont explicitement accepté que nous les diffusions.
Formations liées
- Tester des applications Angular avec les librairies Karma, Jasmine et ProtractorRéf. AKJP2 joursIntermédiaireProchaine session : 30 nov.1 590 €
- Vue.JS - Développement d'applications webRéf. IVJS3 joursIntermédiaireProchaine session : 19 oct.2 090 €
- Adonis JS Réf. ADOS3 joursIntermédiaireProchaine session : 25 nov.2 090 €
- Angular : Développer une application webRéf. ANGR3 joursIntermédiaireProchaine session : 21 oct.2 090 €