01 40 26 00 99 15 rue de turbigo - 75002 Paris Nous contacter

Création de sites / intégration CSS3 : les fondamentaux

Habiller et modifier des maquettes Web en CSS

Icon2018 quiz amont Icon2018 module presentiel Icon2018 quiz classe virtuelle Icon2018 quiz quiz aval
ObjectifsLocaliser les CSS dans le code d’une pageRéaliser et modifier une maquette Web avec sa feuille de styleHabiller un ensemble de pages avec une feuille de style externeDévelopper des mises en pages optimisées avec des trucs et astuces de pro
Public concernéGraphistes, webdesigners, traffic managers ou toutes personnes amenées à intervenir ou enrichir des sites Web existants.
Pré-requisIl est nécessaire d’avoir suivi la formation “HTML5 : les fondamentaux” (page 130), ou de justifier d’un niveau équivalent pour accéder à ce stage.
Programme

Localiser les CSS dans le code d’une page

Distinguer et comparer les feuilles de style inline, internes et externes

Comprendre la relation entre le HTML et les CSS dans une page Web

Afficher une page Internet avec et sans ses styles

Découvrir le principe de cascade et analyser le code CSS d’une page Web

Identifier les formatages CSS par défaut des balises HTML, de la feuille de style navigateur

Étude de cas : visionnage et analyse technique de sites Web avec l’inspecteur du navigateur

Réaliser et modifier une maquette Web avec sa feuille de style

Découvrir la grammaire et la syntaxe d’une feuille de style

Identifier le contenu d’une feuille de style

Découvrir la composition d’un style : le sélecteur, les accolades, les blocs de déclaration

Cibler les éléments d’une page HTML pour les habiller avec les CSS : les sélecteurs

Écrire les sélecteurs simples : universel, de balise, de classe, d’identifiant

Comparer les différentes unités de valeur : couleurs hexadécimales, mots-clés, pixel, %, em, rem

Habiller la page Web et ses contenus

Gérer les couleurs et images de fond d’une page

Formater du texte

Habiller les blocs de titres et les paragraphes

Modifier les tailles, les marges et les remplissages des blocs

Distinguer les fusions de marges des balises et leurs marges par défaut

Mesurer la taille d’une boîte avec le modèle de boîte CSS

Créer des bordures

Créer des menus avec les listes

Coder des listes à puce et numérotées en HTML et faire un reset pour un affichage navigateur unifié

Modifier le display des items de listes pour créer un menu horizontal

Créer un menu avec des états de survol

Déplacer et transformer les contenus d’une page

Habiller le texte avec des images : comprendre le système des flottants

Utiliser et positionner des balises

et

Déchiffrer et manipuler les flottants float, clear et clearfix

Comprendre le fonctionnement des positionnements : relative, absolute et fixed

Exercice : créer une maquette CSS de A à Z

Habiller un ensemble de pages avec une feuille de style externe

Nommer et enregistrer une feuille de style externe

Créer le lien vers la feuille de style externe

Distinguer l’héritage des feuilles de style

Comprendre les sélecteurs plus complexes : pseudos-éléments, sélecteurs descendants

Gérer les conflits de cascade en analysant les spécificités des sélecteurs

Exercice : créer un habillage de site Web

Développer des mises en pages optimisées avec des trucs et astuces de pro

Expérimenter les sélecteurs :hover :before et :after

Créer une image réactive au rollover en CSS

Comparer les techniques pour optimiser les images de fond

Créer des icônes en CSS : fontes, icônes full CSS, sprites, SVG inline

Exercice : coder des mises en forme avancées

Méthodes pédagogiquesLogiciels : WebStorm, Brackets…
Moyens techniquesMoyens spécifiques à cette formation :Analyse de sites Web existants, mise en pratique grâce à de nombreux exercices. Quiz et “jeux de débogage” permettent de mémoriser de manière plus ludique les notions importantes.

Moyens génériques :

  • d’un poste de travail Mac ou PC de dernière génération équipé d’un écran plat 21” ou 27”
  • d’une tablette graphique
  • d’un iPad sur demande
  • d’une connexion très haut débit à Internet
  • d’une clé USB de 8 Go offerte en début de formation
  • Le poste du formateur est relié à un système de vidéo projection
  • 8 participants maximum par stage
  • 9 participants pour les formations certifiantes
  • Toutes les formations sont dispensées sur les dernières versions officielles de chaque logiciel
  • Un support de cours ou un livre est remis à l’issue des principaux stages
Suivi
  • Chaque apprenant bénéficie d’une hotline gratuite et illimitée par e-mail
  • Fiche d’évaluation, feuille d’émargement et attestation de présence
Profil du formateur

Intégrateur CSS / Développeur front-end ayant plus de 10 ans d’expérience en enseignement.

Marketing Digital
Web
Médias sociaux
Voir toutes les formations

CSS3 : les fondamentaux

3 jours 21 heures 1 550 € HT
Option
classe virtuelle
90mn 120 € HT

Sélectionner une date dans la liste :

Vous devez sélectionner une date

Sélectionner votre profil :

Vous devez sélectionner votre profil

CSS3 : les fondamentaux

3 jours 21 heures 1 290 €HT*


* Prix par jour (à partir de)

Organisez cette formation dans votre entreprise selon vos plannings et les disponibilités de nos intervenants (dates continues ou discontinues).

Cliquez ici pour plus d'informations

Ce tarif inclut :

  • La préparation pédagogique de la formation par notre équipe (validation des pré-requis, définition des objectifs et des compétences visées
  • Un entretien téléphonique avec le formateur
  • L’animation de cette formation dans vos locaux pour 3 stagiaires maximum
  • Les supports de cours (si prévus)
  • La gestion administrative de la formation (frais de dossier, devis, conventions…)

Ce tarif n’inclut pas :

  • La mise à disposition du matériel nécessaire au bon déroulé de la formation (ordinateurs, vidéo-projecteur, logiciels…),
  • De rendez-vous de préparation avec le formateur,
  • La conception de supports spécifiques,
  • Les éventuels frais de déplacement et d’hébergement du formateur.

Important :

  • Ces formations peuvent également être organisées dans nos salles de formation exclusivement pour vos collaborateurs (dans ce cadre, nous nous chargeons de tous les aspects logistiques).
  • Dans le cadre de formations « intra / sur mesure », la durée des formations peut bien sûr être modifiée selon vos impératifs et objectifs

Fermer

Demander un devis
L'avis des participants
Stage très utile, j'ai beaucoup de clés pour ensuite développer les connaissances acquises. Encore une fois, ravi d'avoir participé à une formation PYRAMYD
Pablo B. - Graphiste chez BNP Paribas (session du 11 au 12 mai 2017)
Merci pour la formation, c'est le top !
Marc B. - Graphiste chez SEITA (session du 11 au 12 mai 2017)
Ce stage m'a permis de compléter des compétences basiques et éparses de CSS et m'a donc donné une bonne vision globale.
Ingrid P. - Traductrice (session du 8 et 9 février 2017)