Formations Web & Cloud Formation HTML5, CSS3, JavaScript

Formation HTML5, CSS3, Responsive : Création de pages web

Noté 5 sur 5
Logo Formation HTML5 CSS3 JS
Prix 1700€ HT / personne
Durée 3 jours ( 21 heures )
Paris | à distance | FNE
Il ne reste que quelques places
NewCafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Je ne veux pas me déplacer ? Option classe virtuelle gratuite

Présentation

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 comportement dynamique.

Les bases ont pour objectif de vous permettre de passer d’une idée à une page HTML. Cette formation vous apporte toutes les clés pour mettre en place des sites Web en utilisant toutes les bonnes pratiques HTML et CSS, ainsi que la mise en place du Javascipt pour le dynamisme.

 

Objectifs

  • Créer des pages en HTML5 et utiliser les nouvelles balises
  • Mettre en place la structure de HTML5
  • Créer des pages compatibles avec les différents navigateurs 
  • Utiliser les nouvelles API JavaScript
  • Gérer la mobilité et maitriser le responsive web design

 

Public visé

  • Développeurs
  • Architectes
  • Concepteurs Web
  • Chefs de projets

 

Pré-requis

  • Connaissances de base en programmation web

Programme de notre formation HTML5, CSS3, Responsive : Création de pages web

 

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

  • 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 selecteurs
  • Les nouveaux selecteurs 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è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
  • Adaptabilité des pages et web application
  • Frameworks et librairies : iUi, Less, FitVids, Modernizr, Angular2…
  • Adaptabilité du contenu et du contenant
  • Le viewport
  • Créer une page adaptive

 

Habillage

  • 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

 

Animation

  • Les transitions
  • Les animations
  • Menu de navigation animé

 

Bonus

  • Présentation de Bootstrap 3 et 4, la framework cadriciel de Twitter

Pour aller plus loin

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

Nos Formateurs Référents

Témoignages

Noté 5 sur 5
25 novembre 2021

Je recommande la formation

Sophie B. de chez SDIS 54
Afficher tous les témoignages
Noté 5 sur 5
25 novembre 2021

Je recommande la formation

Sophie B. de chez SDIS 54
Noté 4 sur 5
25 novembre 2021

Je recommande la formation

Ludovic S. de chez SDIS 54
Noté 5 sur 5
25 novembre 2021

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.

Olivier D. de chez SDIS 54
Noté 4 sur 5
25 novembre 2021

Je recommande la formation

Yannick S. de chez SDIS 54
Noter la formation
Prix 1700€ HT / personne
Durée 3 jours ( 21 heures )

Paris | à distance | FNE
Il ne reste que quelques places
NewCafés et déjeuners offerts en interentreprises
Disponible en intra-entreprise pour former votre équipe
Je ne veux pas me déplacer ? Option classe virtuelle gratuite

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

partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp
partenaire sncf
partenaire hp
partenaire allianz
partenaire sfr
partenaire engie
partenaire boursorama
partenaire invivo
partenaire orange
partenaire psa
partenaire bnp