Objectifs

Objectifs opérationnels :

L'objectif de cette formation est de créer et mettre en ligne un site web avec le langage HTML5 et les feuilles de style CSS3.

Objectifs pédagogiques :

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

• Utiliser immédiatement les nouveautés du web, en restant rétro-compatible

• Tirer parti des nouveautés, et ainsi alléger les besoins en JavaScript

• Faire de la vidéo, du son et des animations

• Faire du graphisme avancé et certaines images, sans Photoshop

• Améliorer votre référencement dans les moteurs de recherche

• 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

A qui s'adresse cette formation

Public :

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

Prérequis :

Il est nécessaire d'avoir une expérience pratique du Web.
Il est intéressant de compléter cette formation par le Cours « Ergonomie et UX web et mobile ».

Contenu du cours

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

Élé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
Écriture 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 media 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 vidéo et options
Formats pris en charge

​

Techniques

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

​

Mise en ligne

Transfert des fichiers via FTP
Configuration de son hébergement