Formation HTML5 et CSS3 les fondamentaux


  • CRÉER DES SITES WEB DYNAMIQUES ET RESPONSIVES AVEC HTML5, CSS3 ET CSS GRID
REFERENCE
 
 
IHTS
DUREE
 
 
5 jours
TARIFS
 
 
2390 € HT
Niveau : Débutant
Certification: MCSA Web Applications
Cours à distance: Possible
Eligible CPF: Oui
BestSeller : oui
OBJECTIFS :
 

La formation HTML / CSS / Responsive est destinée à toute personne souhaitant maitriser la conception de sites Internet et d’applications web modernes tirant parti de toutes les nouvelles spécifications et technologies apportées par le Web d’aujourd’hui.  
Le HTML est un langage texte qui permet de décrire le contenu d’une page WEB grâce à des balises (structure du document, données, images, formulaire, programme, etc.). Les feuilles de style CSS permettent d’en définir la présentation. L’idée de fond est de ne pas mélanger les données et leur visualisation pour faciliter la mise en place d’un site et son évolution. Indépendamment de la complexité des architectures les langages HTML et CSS demeurent des standards depuis des années. Les nouvelles versions du HTML5 et du CSS3 ont encore renforcé cette hégémonie en étendant leurs possibilités pour prendre en compte les équipements mobiles, le référencement, le dessin vectoriel, la vidéo, le rendu 3D, les animations, etc.. Bref il devient possible maintenant de proposer des applications clients/serveurs et des pages WEB attractives grâce à l’utilisation conjointe de HTML5 et CSS3.
Lors de cette formation, vous comprendrez dans un premier temps comment les navigateurs échangent avec les serveurs WEB, puis comment créer des sites WEB dynamiques et modernes en utilisant les possibilités du HTML et du CSS que vous compléterez avec les apports des nouveautés proposées par le HTML5 et le CSS3 et plus récemment les CSS Grid. Leur utilisation vous sera présentée sous un angle professionnel avec notamment le souci de répondre à la question "Comment faire de la mise en page Web avec les technologies et les outils modernes du moment ?". Ce qui vous le verrez n'est pas si trivial si on se limite à la simple présentation des technologies.
De même nous vous aiderons à préparer votre veille technologique post-formation et à analyser avec recul les tendances du moment.
Nous vous présenterons une série d’outils et méthodologies visant à professionnaliser vos développements, être plus efficace et gagner en productivité.
Vous apprendrez également à pallier aux problèmes redondants de rétrocompatibilités afin de concevoir des sites et des applications nativement compatibles dans le plus grand nombres de navigateurs.

A l’issue de cette formation vous serez capable de :

  • Utiliser dès maintenant les nouveautés du web, en restant rétro-compatible
  • Tirer Partie des nouveautés, et ainsi alléger les besoins en JavaScript
  • Faire de la vidéo, du son et des animations, sans Flash
  • Faire du graphisme avancé et certaines images, sans Photoshop
  • Améliorer son référencement dans les moteurs de recherche
  • Créer des mises en page avec les CSS Grid
  • Adapter l'affichage des versions mobile / tablette (responsive design)
  • Optimiser vos sites pour un chargement plus rapide
  • définir quelle technologie de mise en page est la plus adaptée au projet
  • utiliser des outils pour coder plus rapidement et automatiser les tâches de déploiement
  • Tester facilement vos sites sur de nombreux navigateurs et sur mobile pour valider sa conformité
  • Faire une veille efficace pour suivre le rythme effréné des nouvelles possibilités
PRÉ-REQUIS :
 

Il peut être intéressant d’avoir suivi le Cours Ergonomie et UX web et mobile. mais ce n'est pas impératif (c'est un plus, sans pour autant être indispensable)
Cependant il est quand même nécessaire d'avoir une expérience pratique du Web.

PUBLIC :
 

Cette formation s'adresse aux développeurs et chefs de projets.

PROGRAMME :
 

Les bases du web

Fonctionnement d’un échange entre navigateur et serveur
Les protocoles http et https
Les Navigateurs Web
Présentation des différents langages Web
Les logiciels pour coder et mettre en ligne
L’inspecteur de code
Ressources web utiles

HTML 5

Qu’est-ce que le HTML et quel est son rôle
Que sont les balises ?
Structure de base d’un document (Doctype, head, body)
Comment écrire son premier document HTML
Les balises principales (liens, images, tableaux, blocs, paragraphes, listes…)
Hiérarchie et imbrication des éléments, parents / enfants, tabulations
Nouvelles normes HTML5 d’écriture

CSS 3

Qu’est-ce que le CSS ?
HTML, CSS : le fond/ la forme
Rôle du CSS
Lier une feuille de style à une page HTML
Arborescence de projets web, structure des dossiers standards
Principe de base : Sélecteurs, propriétés, valeur
Principales propriétés CSS
Mise en forme du texte, paragraphes et caractères
Nommer ses styles : Classes, identifiants
Les sélecteurs CSS
Quelques sélecteurs CSS avancés
Nouvelles propriétés CSS3
Nouvelles syntaxes CSS3
Pseudo classes
Préfixes et compatibilité

Structurer une page avec HTML et CSS

Les blocs et divisions
Le modèle de boite CSS
Positionnement (statique, absolu, fixe)
Principaux modes de positionnement :

Float

Principe de positionnement
Protection des conteneurs
Positionnement gauche / droite des images
Positionnement de blocs
Structurer une page en colonnes

Flexbox

Principe moderne
Compatibilité des navigateurs
Bases et box-sizing
Les conteneurs et les éléments
Possibilités de positionnement
Structurer une page simple avec des colonnes
Comparatif Float / Flex
Grille simple de mise en page Float et Flex

Formulaires

Eléments et fonctionnement d’un formulaire
Méthodes d’envoi et traitement
Les champs de formulaire
Nouveaux types de champs HTML5

Graphisme avancé

Polices de caractères personnalisées
Couleurs avancées et dégradés
Ombres et opacité
Bordures et arrière-plans avancés

Compatibilité des technologies

Tester la compatibilité du navigateur
Comment connaître la compatibilité d’une technologie

Outils, méthodes d’optimisation, et bonnes pratiques

Contrôler la compatibilité des technologies (canIuse)
Compatibilité CSS : autoprefixer
Ecriture de code avec auto complétion avec Emmet
Introduction aux préprocesseurs
Compilation et minification des fichiers
Outils d’analyse de performance avec Google Speed
Optimisation des images
Qu’est-ce qu’un CDN
Validation W3C
Faire de la veille : bénéfices, outils

Les Frameworks CSS

Normaliser les styles de base avec Normalize.css
Une base saine avec HTML5 Boilerplate
Approche de twitter Bootstrap et Foundation

Responsive Web Design

Introduction au RWD, enjeux, état des lieux
Principe de base
Mise en place des bases code
Un design fluide
Les média queries
Fonctions utiles (calc)
Outils utiles au responsive : browser refreshing, serveur local, prepoc.io
Créer une grille responsive
Conception de structure fluide
Coupures avec les media queries et les breakpoints
Tests sur navigateurs et mobile en temps réel

HTML/CSS avancé

Animations et transformations

Transformations de base (rotation, translation, etc.)
Transformations 3D (perspective)
Transitions : changement progressif d'un style
Animations autonomes

Vectoriel

Utilisation d’images vectorielles SVG
Dessiner en vectoriel grâce à JavaScript et Canvas

Nouvelles balises audio/video

Balise audio et options
Balises video et options
Formats pris en charge

Techniques

Notation BEM
CSS Orienté Objet
Code maintenable
Futur du CSS : Polymers et web composants

CSS Grid

Limites des tableaux apports des CSS Grid
Positionnement explicite et implicite des objets sur une grille CSS
Alignement des boîtes avec les grilles CSS
Utiliser les lignes ou les zones de la grille ?
Complémentarité Flexbox et Grid
Compatibilité avec les anciens navigateurs

Mise en ligne

Transfert des fichiers via FTP
Configuration de son hébergement

REMARQUES :
 

Certification Microsoft MCSA Web Applications

Cette formation prépare à l'examen 70-480 - Programming in HTML5 with JavaScript and CSS3.
Avec la formation ASPN (ou M20486) elles forment le cursus de Certification Officielle Microsoft MCSA Web Applications.

Certification IT - Développement de sites web avec le langage de balises HTML et des feuilles de styles CSS

Cette formation prépare également au passage de l'examen de certification "Certification IT - Développement de sites web avec le langage de balises HTML et des feuilles de styles CSS"

Dans les deux cas, la préparation aux examens de certification peut être suivie en mobilisant vos heures de CPF.
Voir toutes nos formations éligibles au CPF

TRAVAUX PRATIQUES :
 

Cette formation est ponctuée de nombreux Travaux Pratiques:

Créer une première page web avec HTML
L’objectif est de réussir à écrire les bases nécessaires au HTML et d’expérimenter les balises indispensables et leur imbrication.

Création d’une base réutilisable
Afin de gagner du temps, création d’une base HTML qui servira de base à tous les prochains projets

Ajout des styles
Créer une première feuille de style et l’ajouter
Ajouter des styles sur des textes, caractères, blocs et autres balises…

Formulaire
Création d’un formulaire complet avec mise en forme de sections, libellés, différents types de champs et mise en page ergonomique.

Mise en forme et structure
Création d’une grille simple de structure par colonne en float et en flex
Création de modèles simples de pages par sections et colonnes

Utilisons des CSS Grid 
Création de blocs de présentation flexibles afin de bien comprendre la puissance des grilles CSS par rapport aux tableaux traditionnels

Page Web complète
Utilisation du système de grille précédemment crée pour la création d’une page web complète structurée

Vers une page responsive
Adaptation de cette page pour du design fluide
Ajout des media queries pour une page responsive
Tests sur différents navigateurs, périphériques et résolutions

Ajoutons des Interactions et animations
Création de transitions et animations  et insertion dans la page

En route pour Internet
Mise en ligne de la page web

Application Web
Intégration d’une mini application web en mode plein écran afin de voir les différences de codage HTML/CSS par rapport à une page standard
Rendre son application responsive

Les avis figurant ci-dessous 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. Avis des participants à la formation HTML5 et CSS3 les fondamentaux : Note moyenne : 5/5
5/5
Avis certifié A suivi un cours chez PLB
Danielle

Mon avis sur le contenu du stage :

"Le stage a complètement répondu à mes attentes, même plus. "

Mon avis sur le formateur :

"Explications complètement à la portée d'un débutant, claires, ordonnées. Le formateur d'adapte aux besoins du participant."

Mon avis sur la salle de formation :

"Rien à redire de l'environnement, c'est bien situé, c'est propre, le café est bon."

Ce que j'ai le plus apprécié :

"Le petit nombre de participants (nous étions 3 puis 2), qui rend la formation beaucoup plus efficace."

5/5
Avis certifié A suivi un cours chez PLB
HUSSET Arnaud - CLUB SOLUTION SAS

Mon avis sur le contenu du stage :

"Des journées riche en savoir et connaissances."

Mon avis sur le formateur :

"Très disponible et à l'écoute étant donné que nous étions 3 puis 2 personnes en cours lors de cette semaine de formation. "

Mon avis sur la salle de formation :

"Très bonne implantation."

Ce que j'ai le plus apprécié :

"Une salle de pause grandiose!"

Ce que j'ai le moins apprécié :

"Aucun"

S'INSCRIRE À CETTE
FORMATION HTML CSS
Cliquez sur une date pour vous inscrire
Information pratiques sur
LA FORMATION
Lieu de la formation Paris - LA DEFENSE
Nous contacter 01 43 34 90 94
CETTE FORMATION SUR-MESURE Ce cours est réalisable en intra-entreprise, dans vos locaux ou nos salles de cours CONTACTER NOTRE SERVICE INTRA
D'autres formations
SUR LE MÊME THÈME

5 j

 
La formation HTML5 est destinée aux développeurs et intégrateurs souhaitant mettre à jour leurs connaissances pour créer des sites Internet performants et...

2 j

 
ECMAscript provient de la standardisation du langage Javascript selon les normes ECMA. La version 6 (ES6 / ES2015) a amené de nombreux changement car elle était séparée...

3 j

 
Langage de l'Internet côté client, le JavaScript permet la manipulation interactive des éléments constituant une page WEB. Jadis considéré comme un...

4 j

 

Web - Digital

JavaScript avancé
Avec l'essor des interfaces riches et les nombreuses nouveautés JavaScript apportées par le HTML5, qui permettent désormais de faire jusqu'à une application...
Plus de formations sur le même thème

Des questions ?

ON VOUS RAPPELLE

Tampon du Fafiec indiquant que PLB Consultant est partenaire de ses actions collectives

Votre formation Java prise en charge à 100% ! *

Depuis le mois de mars  2011, le Fafiec a sélectionné PLB Consultant pour vous proposer les meilleures formations autour du développement objet avec Java.

Sessions inter-entreprise sur  Paris, Lyon et Lille. 

Sessions intra-entreprise sur  toute la France.

*100% des coûts pédagogiques, offre valable dans la limite des fonds mutualisés dédiés aux actions collectives, en application des critères de prise en charge en vigueur (voir conditions détaillées sur le site du FAFIEC)

 

0

Formations
Informatique
et Management
en ligne à ce jour

+ 0

Stagiaires dans nos
salles de cours sur
l'année

0%

De participants
satisfaits ou très
satisfaits de nos
formations

0

Formateurs experts
validés PLB