Formation HTML 5, CSS 3, JavaScript

Créer un site web dynamique avec HTML5 CSS3 et Javascript

  • 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

Avoir une bonne pratique de l’outil informatique et connaître la navigation sur le Web

Avoir des notions de développement


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 video 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

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, Angular2…

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

Menu de navigation animé

Pour aller plus loin

Présentation de Bootstrap 3 et 4, le Framework cadriciel de Twitter