Pyramyd Formation

CSS3 : les fondamentaux

Par Pyramyd Formation

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

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

Formations de la même catégories (5)

Orsys
HTML, CSS et JavaScript, les fondamentaux du développement WebPar Orsys

L'objectif est de présenter ces trois langages clés du web : HTML pour la construction de pages web, CSS pour la mise en forme des éléments et JavaScript pour ajouter du comportement dynamique. La vidéo commence par une présentation du développement web puis vous amène rapidement à créer une première page web statique. Vous passerez ensuite en revue les balises fondamentales de HTML5 permettant de construire des formulaires et d’afficher diverses informations. Puis, vous utiliserez CSS3 pour agrémenter votre page et lui offrir un rendu plus ergonomique. Enfin, vous étudierez JavaScript qui permet de dynamiser une page en validant les éléments d'un formulaire et en les modifiant dynamiquement à l'écran. À l'issue de cette vidéo, vous serez donc capable de créer vos premières applications web et pourrez ainsi aborder des frameworks de plus haut niveau comme jQuery, Angular ou Ionic.

Data Value
CSS3Par Data Value

Maîtriser le langage CSS3 pour présenter les contenus Web de façon optimisée et adaptative.

M2i Formation
Less et Sass - Rentabiliser vos développements CSSPar M2i Formation
  • Utiliser les préprocesseurs Less et Sass dans le cadre d'applications graphiques
  • Combler les lacunes de CSS (exemple : absence de variables ou de fonctions) avec Less et Sass
  • Rendre le résultat des développements réutilisable.
Demos
Développement Web : Maîtrise des bases (HTML5, CSS3 et JavaScript) - NExT Digital coachéPar Demos
  • connaître les concepts et les langages associés à la création de pages web
  • comprendre et corriger un code conforme aux normes en vigueurs
  • savoir mettre à jour le contenu d'un site web existant
Pyramyd Formation
CSS3 : les fondamentauxPar Pyramyd Formation

CERTIFICATION ENI

La certification valide des compétences et se présente sous la forme d’un questionnaire à choix multiple adaptatif avec plusieurs niveaux de questions.