Formation HTML5, CSS3 et JS Responsive Avancé
| 2450€ HT / personne |
| 4 jours (28 heures) |
Présentation
La transformation digitale est aujourd’hui un élément central de notre société. Au cœur de ce changement révolutionnaire, des connaissances en développement web peuvent avoir un impact considérable sur le développement de votre activité.
En effet, ces compétences vous permettront de réduire vos coûts en développement qui peuvent représenter un budget important.
L’objectif est de présenter ces trois langages clés du web : HTML pour la construction de pages web, CSS pour la mise en forme des éléments et JavaScript pour ajouter du contenu dynamique.
Notre formation HTML, CSS et JS vous apporte toutes les clés pour mettre en place des sites Web dynamiques et responsives en utilisant les meilleures pratiques de codage.
Notre formation vous enseignera les dernières versions de ces langages à savoir : HTML5, CSS3 et JavaScript 13.
Objectifs
- Créer des pages en HTML5 et utiliser les nouvelles balises sémantiques
- Créer des pages compatibles avec les différents navigateurs
- Utiliser les balises multimédia et graphiques
- Utiliser les nouvelles API JavaScript
- Gérer la mobilité
- Maîtriser la mise en forme et la mise en page
- Mettre en place un affichage adaptative et responsive
- Savoir animer les éléments HTML
Public visé
- Développeurs
- Architectes
- Concepteurs Web
- Chefs de projets
Pré-requis
Connaissances de base en programmation web.
Programme de notre formation HTML5, CSS3 et 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
- La syntaxe HTML
- Le nouveau DOCTYPE
- Encodage des caractères
- Le support navigateur
- Créer un squelette 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
- 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 HTML (ARIA)
Le multimédia
- La balise video
- Conteneurs (MP4, OGG, WEBM) et codecs
- La balise audio
- Le Shadow Dom
- Les balises object, embed et svg
- 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
- 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 (OpenStreetMap et Leaflet)
- Utiliser la localisation en HTML 5
- 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-classes 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èle de mise en page CSS
- La mise en page en grille CSS
- Mise en forme d’un modèle de site vitrine
Responsive Web Design
- Les bonnes pratiques du Responsive Web Design
- Le viewport
- Créer une page adaptive
- Adaptabilité des pages et web application
- Frameworks et bibliothèques : Less, Modernizr, Vuejs, Svelte…
- Adaptabilité du contenu et du contenant
Habillage
- Couleurs et polices de caractère
- 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
Animation
- Les transitions
- Les animations
- Menu de navigation animé
Bonus
- Présentation de Bootstrap, le framework cadriciel de Twitter
Pour aller plus loin
Formation HTML CSS débutant
Formation Flask
Formation Bootstrap
Langues et Lieux disponibles
Langues
- Français
- Anglais / English
Lieux
-
France entière
- Paris
- Lille
- Reims
- Lyon
- Toulouse
- Bordeaux
- Montpellier
- Nice
- Sophia Antipolis
- Marseille
- Aix-en-Provence
- Nantes
- Rennes
- Strasbourg
- Grenoble
- Dijon
- Tours
- Saint-Étienne
- Toulon
- Angers
-
Belgique
- Bruxelles
- Liège
-
Suisse
- Genève
- Zurich
- Lausanne
-
Luxembourg
Témoignages
Je recommande la formation
Afficher tous les témoignages
Je recommande la formation
Les + : Formateur très bon sur le sujet.
Beaucoup d’excercices pour tester
Les – : Enormement de choses à retenir et pas toujours facile de tenir le rythme
Les + : Maîtrise du sujet du formateur, explications claires, divers sujets pris en compte
Les + : Très bien je trouve pour des personnes avec peu d’experience JS/CSS
Les – : Pour des personnes habituées au front… peu de choses apprises.
Je recommande la formation
Je recommande la formation
Je recommande la formation
Les apports théoriques suivis d’exercices pratiques.
Tous les points du programme n’ont pu être abordés. Il manquait un jour.
voir les parties manquantes de la formation. A voir un perfectionnement sur les frameworks (angular, bootstrap, …)
Formateur très compétent , bon déroulé du stage malgré le distanciel.
Je recommande la formation
Noter la formation
| 2450€ HT / personne |
| 4 jours (28 heures) |
UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?
Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.
ILS SE SONT FORMÉS CHEZ NOUS
