HTML et CSS sont les fondations de tout projet Web. Cette formation vous apprend a creer des pages structurees avec les balises semantiques HTML5 et a les mettre en forme avec CSS3, Flexbox et Grid Layout. Vous apprendrez aussi a rendre vos pages adaptatives grace au responsive design et aux media queries, une competence indispensable face a la diversite des ecrans.

Public visé

Webmasters, concepteurs Web, développeurs et chefs de projets techniques.

Prérequis

Avoir suivi cette formation, ou en maîtriser les thèmes abordés :

Initiation à la programmation

Objectifs pédagogiques

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

Structurer efficacement des pages HTML5
Appliquer des styles CSS aux éléments de page
Utiliser les blocs et tableaux
Créer des formulaires avec Web Forms 2
Implémenter les fonctionnalités HTML5 et CSS3
Employer les media queries pour le responsive design
Comprendre les frameworks pour le développement responsive

Programme

Jour 1 - Matin

Les terminaux

Types de terminaux (mobile, tablette, tv, liseuse…) et leur résolution
Périphériques, OS, navigateurs
Le marché mobile et parts de marché
Standards HTML 5, CSS 3 (API, sélecteurs…)

Structure d’une page

Tags principaux
Tags de mise en page et de style
Les éléments et leurs placements

Travaux pratiques

Création d’une page Web simple

Balises structurantes

Blocs div et span
Listes
Tableaux
iFrames

Travaux pratiques

Création d’un menu à partir d’une liste à puces
Création d’un tableau de contacts
Affichage d’un fichier PDF dans une page Web

Jour 1 - Après-midi

Web Forms 2

Champs de saisie
Listes déroulantes
Bouton Radio
Champ Date
Placeholder
Slider
Validation automatique

Travaux pratiques

Création et validation d’un formulaire de saisie d’informations d’un contact

HTML 5

Balises sémantiques
Audio et vidéo

Travaux pratiques

Affichage d’un élément audio et vidéo
Structuration d’une page Web avec les éléments
- Header
- Nav
- Section
- Article
- Footer

Jour 2 - Matin

Styles CSS

Syntaxe des sélecteurs CSS
Fonds, couleurs et bordures
Pseudo-sélecteurs
Principales propriétés CSS
Règles CSS
Frameworks CSS

Travaux pratiques

Analyse du site Zen Garden
Mise en forme avec CSS

Structure des éléments

Le modèle de boîte
Eléments “block” et “inline”
La propriété display
Padding, marges et bordures

Travaux pratiques

Mise en forme d’une page Web avec les propriétés CSS : padding et margin

Positionnement

La notion de flux
Positionnement
- Dans le flux
- Absolu et relatif
- Fixé
- Flottant
- Static

Travaux pratiques

Utilisation des propriétés CSS position
- Left
- Top
- Float
- Clear
Création d’une barre de navigation avec Flexbox

Jour 2 - Après-midi

CSS 3

Nouveaux sélecteurs

Le modèle Flexbox

Positionnement
Arrangement

Grid Layout

Positionnement et organisation de la page

Travaux pratiques

Utilisation des propriétés CSS
- Les ombrages
- Les dégradés de couleurs
- Les angles arrondis
- Les Flex Box
- Grid Layout

Jour 3 - Matin

Présentation des “media queries”

Adaptation des CSS aux caractéristiques du terminal
Règles conditionnelles (orientation, device-width…)
JavaScript et les anciens navigateurs
Réglage complémentaire de rendu visuel (viewport)

Travaux pratiques

Utilisation des “media queries” pour s’adapter à différents hardwares

Principes de grilles fluides, fixes

Conception classique versus conception selon une grille
Importance des blocs, approche contenu / contenant
Unités de mesure (%, em, px), mode Retina
Eviter les débordements et les points de rupture

Travaux pratiques

Test de différents types de grille
Adapter sa grille en fonction du terminal

Jour 3 - Après-midi

Frameworks et librairies responsives

Détecter les ressources avec “Modernizr”
Librairies de substitution (less, CSS 3 PIE…)
Frameworks Tailwind, Bulma, Materialize, Bootstrap, Foundation, Skeleton

Travaux pratiques

Installation de Bootstrap et test de différentes grilles selon des tailles d’écrans différentes

Les fondamentaux de l’accessibilité numérique

Le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) : définition d’un site Web “accessible”
Les outils dédiés
Bonnes pratiques de construction HTML des pages
La sémantique des éléments
Les attributs fondamentaux pour l’accessibilité

Travaux pratiques

Adaptation des pages réalisées pour les rendre accessibles

Modalités d’évaluation des acquis

En cours de formation, par des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation.

Pour aller plus loin

Cette formation donne accès aux formations suivantes :

Voir aussi

Vous serez peut-être intéressés par les formations suivantes :

Formation DEV-WEB-100 — HTML, CSS, Responsive - Création de pages Web. Domaine : Développement. Niveau : Initiation. Durée : 3 jours (21 heures). Mots-clés : html, css, responsive, web, frontend, développement, initiation. Cylian Formation, Dijon.