Accueil    Formations    Informatique    Langages et développement    Développeur Web HTML 5, CSS 3 et JavaScript    HTML 5, CSS 3, Responsive - Création de pages Web

Partager cette formation Télécharger au format pdf Ajouter à mes favoris




La formation HTML 5 et CSS 3 - Création de pages Web vous apprendra à créer des pages web basées sur HTML5 et CSS3.

Cette formation HTML 5 et CSS 3 pourra être ponctuée par la certification ENI-CIT5HTM. La certification ENI-CIT5HTM vous permet de valoriser vos compétences pour construire des pages web statiques avec un langage de balises et à les mettre en forme avec une feuille de style.

La certification ENI-CIT5HTM est un label qualité attestant officiellement de votre expertise et répondant aux demandes actuelles du marché.

Objectifs pédagogiques / Compétences visées

  • Décrire la structuration d'une page HTML 5
  • Ajouter des styles CSS aux éléments d'une page
  • Utiliser les blocs et les tableaux
  • Créer des formulaires avec Web Forms 2
  • Tester les nouveautés HTML 5 et CSS 3
  • Exploiter les Media Queries pour s'adapter aux tailles d'écran
  • Expliquer la philosophie des framemorks HTML / CSS pour le développement responsive.

Niveau requis

Aucun.

Public concerné

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

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, HTML 5, CSS 3 (API, sélecteurs...)

Structure d'une page

  • Tags principaux
  • Simplification avec HTML 5
  • Les éléments et leurs placements
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
  • Bouton Radio
  • Champ Date
  • Placeholder
  • Slider
  • Validation automatique
Exemples 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
Exemple 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
    • Absolu et relatif
    • Fixé
    • Flottant
Exemples 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 Flex Box
    • 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)
Exemple 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 et les points de rupture
  • Principe des box, layout avec CSS 3
Exemple 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, CSS 3 PIE...)
  • Frameworks CSS 960 Grid, HTML 5 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

Certification (en option)

  • Prévoir l'achat de la certification en supplément
  • L'examen (en français) sera passé le dernier jour, à l'issue de la formation et s'effectuera en ligne
  • La durée moyenne est de 1h00 et le score obtenu attestera d'un niveau de compétence

Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.

Modalités d’évaluation des acquis

  • En cours de formation, par des études de cas ou des travaux pratiques
  • Et, en fin de formation, par un questionnaire d'auto-évaluation ou une certification (M2i ou éditeur)

Partager cette formation Télécharger au format pdf Ajouter à mes favoris

Vous souhaitez suivre cette formation ?

Cette formation est disponible en présentiel ou en classe à distance, avec un programme et une qualité pédagogique identiques.

Choisissez la modalité souhaitée pour vous inscrire :

Votre société a besoin d'une offre personnalisée ? Contactez-nous

Faites évoluer vos compétences


4 jours
Perfectionnement / Avancé

Présentiel Classe à distance

Complétez votre formation

Faites-nous part de votre projet de formation, nous sommes là pour vous guider.

Contactez-nous