PLB CONSULTANT : 02. HTML5, CSS3, Responsive – Création de pages web

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

Le 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

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

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é

Travaux pratiques

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…

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 :

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

Travaux pratiques

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

Formulaires

Éléments et fonctionnement d’un formulaire

Méthodes d’envoi et traitement

Les champs de formulaire

Nouveaux types de champs HTML5

Travaux pratiques

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

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)

Écriture de code avec auto complétion avec Emmet

Outils d’analyse de performance avec Google Speed

Optimisation des images

Qu’est-ce qu’un CDN

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

Travaux pratiques

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

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

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

Travaux pratiques

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

HTML/CSS avancé

Animations et transformations

Transformations de base (rotation, translation, etc.)

Transformations 3D (perspective)

Transitions : changement progressif d'un style

Animations autonomes

Travaux pratiques

Ajoutons des Interactions et animations 

Création de transitions et animations et insertion dans la page

Vectoriel

Utilisation d’images vectorielles SVG

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

Mise en ligne

Transfert des fichiers via FTP

Configuration de son hébergement

Travaux pratiques

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