À distance
Ref
WM06419

Formation - CSS3 : les fondamentaux

Habiller et modifier des maquettes Web en CSS

Expertise
3 jours - 21 heures
Paris
Le CSS est un des principaux langages informatiques utilisés à travers le monde, en particulier dans la conception de sites web. Après l'HTML, c'est une compétence indispensable à tout webdesigner. PYRAMYD vous propose d'acquérir les bases nécessaires à travers notre formation CSS3 : les fondamentaux. Grâce à ces trois jours d'apprentissage intensif et concret, vous serez en mesure de concevoir et de modifier une maquette web ainsi que sa feuille de style. Grammaire, syntaxe, habillages et optimisation des mises en page : nos experts vous montreront tout ! La formation CSS3 : les fondamentaux est ouverte à tout profil susceptible de travailler sur la conception d'un site web et nécessite un niveau correct en HTML5 (ou d'avoir suivi notre formation sur les fondamentaux).
Objectifs
Localiser les CSS dans le code d’une page
Réaliser et modifier une maquette Web avec sa feuille de style
Habiller un ensemble de pages avec une feuille de style externe
Développer des mises en pages optimisées avec des trucs et astuces de pro

Compétences acquises
Comprendre la syntaxe et la grammaire CSS. Créer ou modifier des feuilles de styles CSS. Intégrer les possibilités graphiques des CSS
Public
Graphistes, webdesigners, traffic managers ou toutes personnes amenées à intervenir ou enrichir des sites Web existants.

Prérequis
Il 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
CSS3 : les fondamentaux

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 des 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 div et span
  • 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

Financement

Plusieurs dispositifs de financement sont accessibles via les OPCO (Opérateurs de Compétences), organismes agréés par le ministère du Travail dont le rôle est d’accompagner, collecter et gérer les contributions des entreprises au titre du financement de la formation professionnelle.

Pour plus d’information, une équipe de gestionnaires ABILWAYS spécialisée vous accompagne dans le choix de vos formations et la gestion administrative.

Nous contacter pour en savoir plus

Points forts
Nos intervenants
default_image_intervenant.png
Intégrateur CSS / Développeur front-end ayant plus de 10 ans d’expérience en enseignement.
Modalités pédagogiques
Matériel et/ou logiciels nécessaires pour suivre cette formation : Formation en présentiel : les ordinateurs sont équipés des logiciels nécessaires au suivi de cette formation.Si vous utilisez votre ordinateur personnel (pour formation en présentiel ou classe virtuelle), merci d'installer au préalable : LA SUITE ADOBE 2022, Navigateur web, Brackets ( GitHub), Visual Studio Code, bloc note, Sublime Text - Il est recommandé de se munir d'un double écran.Équipe pédagogique :Un consultant expert de la thématique et une équipe pédagogique en support du stagiaire pour toute question en lien avec son parcours de formation.Techniques pédagogiques :Alternance de théorie, de démonstrations par l’exemple et de mise en pratique grâce à de nombreux exercices individuels ou collectifs. Exercices, études de cas et cas pratiques rythment cette formation.Ressources pédagogiques :Un support de formation présentant l'essentiel des points vus durant la formation et proposant des éléments d'approfondissement est téléchargeable sur notre plateforme.
Avis sur cette formation
★★★★★
★★★★★
5/5
(2 avis)
anonymous a.
publié le 16/09/2020
5/5
Formatrice au top...
anonymous a.
publié le 17/12/2019
5/5
Stage très dense avec beaucoup d'outils donnés par la formatrice.