Présentation de la formation HTML 5, CSS 3, JavaScript
Découvrez notre formation de 4 jours sur HTML5, CSS3 et JavaScript pour maîtriser les fondamentaux du développement web moderne. Vous apprendrez à créer des sites web dynamiques et responsives grâce aux dernières normes du web, en combinant la puissance de HTML5 pour structurer votre contenu, CSS3 pour un design élégant et JavaScript pour des interactions interactives. À travers des ateliers pratiques et des projets réels, vous acquerrez les compétences nécessaires pour construire des interfaces web attrayantes et performantes. Idéale pour les débutants et ceux cherchant à affiner leurs techniques, cette formation vous offre une base solide pour exceller dans le développement front-end.
Objectifs de la formation HTML 5, CSS 3, JavaScript
Objectifs pédagogiques :
- Créer des pages en HTML5 et utiliser les nouvelles balises
- Mettre en page et en forme avec CSS3
- Utiliser les nouvelles API JavaScript
- Gérer la mobilité et maîtriser le responsive web design
Objectifs opérationnels :
- Créer un site web dynamique avec HTML5 CSS3 et Javascript
Programme de la formation HTML 5, CSS 3, JavaScript
Introduction
Rappel sur les évolutions de HTML et CSS depuis 20 ans
Le processus de normalisation : le W3C et le WHATWG
Les apports de HTML5, CSS3 et JavaScript
Les fondamentaux HTML
La syntaxe HTML
Le nouveau Doctype
Encodage des caractères
Le support navigateur
Créer un template de base réutilisable pour tous les projets
HTML5 : Structurer un document
Évolution de l’imbrication des balises : disparition des notions de inline et block
Les nouvelles balises : header, footer, structure, aside, nav, hgroup, etc.
Les balises obsolètes : center, font, frame, acronym, etc.
Structurer une page avec les nouvelles balises
Les formulaires HTML
Les nouveaux champs de formulaire et leur structure
Les nouvelles pseudo-class CSS (valid, invalid, checked…)
Créer un formulaire de contact type
Accessibilité des éléments dynamique (ARIA)
Le multimédia
La balise video
La balise audio
Le ShadowDom
Les balises object, embed et svg
Conteneur (MP4, OGG, WEBM) et codec (.h264, Vorbis, Theora, VP8…)
Inclure une vidéo dans une page et créer une interface de contrôle personnalisée
Graphique et dessin
La balise canvas
SVG et ses filtres
WebGL
Créer un graphique
API JavaScript
Extension du DOM : getElementByClassName, querySelector, contenteditable
Les WebWorkers
Drag n’ Drop
Gestion des fichiers et de l’historique
Communication bi-directionnelle asynchrone (WebSocket)
Stockage de données (côté client)
Web Storage (sessionStorage et localStorage) et IndexedDB
appcache : fonctionnement déconnecté
Géolocalisation
Device API et Web API
Créer une liste d’articles fonctionnant sans connexion
La mobilité avec HTML5
Stockage permanent et stockage dans la session
Utilisation d’une base de données en HTML 5
Cartes (Google & Bing Maps)
Utiliser la localisation en HTML 5
Intégrer une carte Maps
Utiliser le multitouch
CSS3 : Introduction & selector
Les préfixes
Cascade et compatibilité
Rappel sur les sélecteurs
Les nouveaux sélecteurs CSS3
Les nouvelles pseudo-class CSS3 (last-child, nth-child, nth-of-type, not…)
Mise en forme
Fonction calc() et propriété box-sizing
Mise en forme tabulaire et multi-colonnes
Le modèle de boite flexible
Les modèles de mise en page CSS
La mise en page en grille CSS
La mise en forme d’un modèle de site vitrine
Responsive web design
Les bonnes pratiques du Responsive Web Design
Adaptabilité des pages et web application
Framework et librairies : iUi, Less, FitVids, Modernizr, Angular…
Adaptabilité du contenu et du contenant
Le viewport
Créer une page adaptive
Habillage CSS3
Couleurs et polices de caractères
Coins arrondis, ombres portés, dégradé de couleurs
Bordures en images
Fonds multiples
Transformations 2D et 3D
Génération de contenu
Les tooltips
Animations CSS & JavaScript
Les transitions
Les animations
Le menu de navigation animé
Pour aller plus loin
Présentation de Bootstrap 4 et 5, le Framework cadriciel de Twitter
