Aller au contenu principal

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

Durée

21 heures

Modalités

Formation
  • Classe virtuelle
  • Présentiel
Évaluation

L'évaluation des acquis se fait en cours de formation, par des études de cas ou des travaux pratiques et en fin de formation, par un questionnaire

Prix

Inter
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
882€ HT / personne
Intra
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
3528€ HT / groupe
4 stagiaires minimum

Public

Développeurs, concepteurs web, chefs de projets…

Pré-requis

- Avoir des connaissances internet standard.

- Une expérience pratique du web est souhaitable

Objectifs pédagogiques

- Concevoir et développer des applications Web en HTML5 et CSS3 

- Mettre en place et valider la structure HTML 5 des pages Web 

- Habiller des pages Web en CSS 3 afin de les rendre plus attractives

- Savoir produire des pages compatibles avec les différents navigateurs internet 

- Rendre responsive design les pages Web d'un site 

- Créer des images et des animations vectorielles


Programme détaillé

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, HTML5, CSS3 (API, sélecteurs...)

§ Structure d'une page

Tags principaux

Simplification avec HTML 5

Les éléments et leur placement

Exemple de travaux pratiques (à titre indicatif)

Création d'une page Web simple

§ Balises structurantes

Blocs div et span

Listes

Tableaux

iFrames

Exemples de travaux pratiques (à titre indicatif)

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

Boutons radio

Champs date

Placeholder

Slider

Validation automatique

Exemple de travaux pratiques (à titre indicatif)

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

§ HTML 5

Balises sémantiques

Audio et vidéo

Exemples de travaux pratiques (à titre indicatif)

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élécteurs CSS

Pseudo sélecteurs

Principales propriétés CSS

Règles CSS

Frameworks CSS

Exemples de travaux pratiques (à titre indicatif)

Analyse du site Zen Garden

Mise en forme avec CSS

Mise en forme d'un tableau et d'un formulaire avec Bootstrap

§ Structure des éléments

Le modèle de boîte

Eléments block et inline

La propriété display

Padding, marges et bordures

Exemples de travaux pratiques (à titre indicatif)

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

§ Positionnement

Positionnement dans le flux

Positionnement absolu et relatif

Positionnement fixé

Positionnement flottant

Exemple de travaux pratiques (à titre indicatif)

Utilisation des propriétés CSS position

 -   Left

 -  Top

 -  Float

 -  Clear

Jour 2 après-midi

§ CSS 3

Nouveaux sélecteurs

Fonts, couleurs et bordures

Positionnement en colonnes

Présentation des Media Queries

Exemples de travaux pratiques (à titre indicatif)

Utilisation des propriétés CSS

 -  Les ombrages

 -  Les dégradés de couleurs

 -  Les angles arrondis

 -  Les Flexbox

 -  Mise en forme selon le type de média

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

Exemples de travaux pratiques (à titre indicatif)

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. Points de rupture.

Principe des box, layout avec CSS3.

Exemples de travaux pratiques (à titre indicatif)

Test de différents types de grille

Jour 3 après-midi

§ Frameworks et librairies responsives

Détecter les ressources avec "Modernizr".

Librairies de substitution (less, css3pie...).

Frameworks CSS 960 grid, HTML5 BoilerPlate, Bootstrap, Foundation, Skeleton, 320.

Exemples de travaux pratiques (à titre indicatif)

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

 

Sessions

Filtrer les résultats
Modalités pédagogiques
Formation synchrone se déroulant avec la présence physique du (des) formateur(s) et du (des) apprenant(s) réunis dans un même lieu de formation.
Formation combinant des séquences en présentiel et des séquences à distance synchrones ou asynchrones.
Formation à distance, asynchrone, s’appuyant sur une plateforme d’apprentissage, pouvant être complétée par d’autres modalités de formation à distance (visio-conférence…)
Formation à distance, synchrone, s’appuyant sur un dispositif de visio-conférence. La classe virtuelle recrée à distance les conditions d’une formation en salle traditionnelle.
Type de formation
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
Options
Les compétences professionnelles visées par la formation sont validées via un test permettant d’obtenir une certification officielle.
Ces sessions ne peuvent être ni annulées ni reportées par l’organisme de formation.