fff

Combien de stagiaires suivront cette formation ?

Valider Annuler

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

Cette formation vous permettra de développer les compétences suivantes :

  • 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

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 :

Formation disponible en intra-entreprise

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

À la suite de cette formation, nous vous suggérons :

Découvrez les autres formations susceptibles de vous intéresser :

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

Contactez-nous