Téléchargez le parcours au format PDF
3 jours
Perfectionnement / Avancé
Présentiel Classe à distance
AC
Partager
Accueil › Formations › Informatique › Langages et développement › Développeur Web HTML, CSS et JavaScript › HTML, CSS, Responsive - Création de pages Web
Validez les prérequis
Afin de vérifier que vous disposez bien des prérequis nécessaires à cette formation, nous vous invitons à réaliser ce test.
Temps estimé : 4 minutes.
Passer le testObjectifs de formation
A l'issue de cette formation, vous serez capable de :
- 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.
Certification
ENI Créer et mettre en forme des pages Web (HTML5 et CSS3) (+ 180€)Programme de votre formation
-
#
M2I START AVANT VOTRE FORMATION
Contextualisation du projet de formation et prise en compte des besoins de chacun
- Positionnement initial de l’apprenant par rapport aux objectifs
- Définition des priorités et des objectifs personnels de l’apprenant
- Vidéos de mise en situation
- Accès au Chat interactif myM2i pour interagir avec les membres de son groupe
-
#
M2I LIVE VOTRE FORMATION ANIMÉE PAR NOTRE EXPERT ¹
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
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
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électeurs CSS
- Fonds, couleurs et bordures
- 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
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
- La notion de flux
- Positionnement
- Dans le flux
- Absolu et relatif
- Fixé
- Flottant
- Static
Exemples de travaux pratiques (à titre indicatif)
- 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
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
- 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)
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
Exemples de travaux pratiques (à titre indicatif)
- 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
Exemple de travaux pratiques (à titre indicatif)
- 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é
Exemple de travaux pratiques (à titre indicatif)
- Adaptation des pages réalisées pour les rendre accessibles
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.
-
#
M2I BOOST APRÈS VOTRE FORMATION
Réactivation et consolidation des acquis en situation de travail
- 30 jours d’accompagnement personnalisé sur myM2i inclus ²
- Ressources Boosters (Abonnement au M2i’Mag Soft Skills, formations offertes, invitations aux conférences d’actualité…)
- ¹ Les actions et les outils présentés dans ce programme le sont à titre indicatif et peuvent faire l’objet d'adaptation selon les niveaux, prérequis et besoins des apprenants. Les compétences clés de ce programme sont traitées à raison d'une compétence par demi-journée de formation.
- ² Sur myM2i, pendant 30 jours post-fin de formation, les apprenants disposent d’une messagerie sécurisée pour échanger, dans la limite de 4 sollicitations, avec leur formateur.
Modalités, méthodes et moyens pédagogiques
Formation délivrée en présentiel ou distanciel* (blended-learning, e-learning, classe virtuelle, présentiel à distance).
Le formateur alterne entre méthode** démonstrative, interrogative et active (via des travaux pratiques et/ou des mises en situation).
Variables suivant les formations, les moyens pédagogiques mis en oeuvre sont :
- Ordinateurs Mac ou PC (sauf pour certains cours de l'offre Management), connexion internet fibre, tableau blanc ou paperboard, vidéoprojecteur ou écran tactile interactif (pour le distanciel)
- Environnements de formation installés sur les postes de travail ou en ligne
- Supports de cours et exercices
En cas de formation intra sur site externe à M2I, le client s'assure et s'engage également à avoir toutes les ressources matérielles pédagogiques nécessaires (équipements informatiques...) au bon déroulement de l'action de formation visée conformément aux prérequis indiqués dans le programme de formation communiqué.
* nous consulter pour la faisabilité en distanciel
** ratio variable selon le cours suivi
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 et/ou une certification (proposée en option)
Accessibilité de la formation
Le groupe M2I s'engage pour faciliter l'accessibilité de ses formations. Toutes nos formations sont accessibles aux personnes en situation de handicap : les détails de l'accueil des personnes sont consultables sur la page Politique Handicap.
Modalités et délais d’accès à la formation
Les formations M2I sont disponibles selon les modalités proposées sur la page programme. Les inscriptions sont possibles jusqu'à 48 heures ouvrées avant le début de la formation. Dans le cas d'une formation financée par le CPF, ce délai est porté à 12 jours ouvrés.
