Programme Formation CSS (3 Jours)

Objectif de la formation :

• Comprendre et maîtriser les bases du CSS pour structurer et styliser les pages web.

• Créer des mises en page complexes en utilisant Flexbox et Grid.

• Développer des sites web responsives et adaptés aux différents types d’écrans.

• Optimiser le code CSS et intégrer des animations simples pour un meilleur rendu visuel.

INTER ENTREPRISE

– Présentiel dans nos locaux ou les vôtres

– Distanciel Online

Retrouvez-nous sur :

Strasbourg, Lille, Lyon, Reims, Genève, Bruxelles, Luxembourg, Frankfort, Karlsruhe, Berlin, Metz

Prix : 1966 € H.T.
Dates, lieux et inscription
INTRA

(Appelez-nous pour obtenir une offre)

Jour 1 : Introduction à CSS et bases de la mise en forme

Matinée : Introduction à CSS

 •  Qu’est-ce que CSS ?

  • Rôle de CSS dans le développement web
  • Structure d’un fichier CSS
  • Sélecteurs CSS (éléments, classes, IDs)
  • Lien entre HTML et CSS (balise <link>, attribut style)

 •  Syntaxe CSS

  • Propriétés et valeurs
  • Déclaration de règles CSS
  • Comment écrire des règles CSS valides

 •  Sélecteurs CSS :

  • Sélecteurs de base : type, classe, ID
  • Sélecteurs combinés : descendant, enfant, frère
  • Sélecteurs universels et pseudo-sélecteurs (:hover, :first-child, etc.)

Après-midi : Mise en forme de base des éléments

 •  Propriétés de texte :

  • font-family, font-size, font-weight
  • line-height, letter-spacing
  • text-align, text-transform
  • Décoration du texte (text-decoration, text-shadow)

 •  Propriétés de couleur et fond :

  • Couleurs (color, background-color, rgba, hsla)
  • Propriétés de fond (images, positionnement, taille, répétition)

 •  Mise en forme des boîtes (Box Model) :

  • Propriétés margin, padding, border, width, height
  • Modèle de boîte CSS et le rôle de chaque propriété dans l’espacement
  • Différence entre border-box et content-box

Jour 2 : Mise en page et positionnement

Matinée : Disposition des éléments et Flexbox

 •  Positionnement des éléments :

  • Positionnement statique, relatif, absolu, fixe, sticky
  • Utilisation des propriétés top, left, right, bottom

 •  Flexbox :

  • Introduction à Flexbox : Qu’est-ce que c’est ?
  • Propriétés du conteneur flex : display: flex, flex-direction, justify-content, align-items
  • Propriétés des éléments flex : flex-grow, flex-shrink, flex-basis, align-self

Après-midi : Grid Layout et mise en page avancée

 •  CSS Grid :

  • Introduction au Grid Layout : Conteneur et éléments de grille
  • Propriétés du conteneur grid : display: grid, grid-template-rows, grid-template-columns
  • Placement d’éléments dans une grille : grid-row, grid-column, grid-area
  • Utilisation des fonctions fr, auto, et des valeurs de repeat

 •  Techniques avancées de mise en page :

  • Utilisation de position en combinaison avec z-index
  • Techniques de mise en page responsive (travailler avec des unités relatives comme %, em, rem, vw, vh)
  • Alignement et distribution d’éléments avec Flexbox et Grid

Jour 3 : Réactivité, animation et bonnes pratiques

Matinée : Design responsive avec Media Queries

 •  Introduction aux Media Queries :

  • Rôle des media queries dans le design responsive
  • Syntaxe des media queries (@media)
  • Exemples de breakpoints courants (smartphones, tablettes, desktop)

 •  Unités relatives et flexibilité des layouts :

  • Utilisation des unités relatives (%, em, rem, vw, vh) pour une mise en page fluide
  • Techniques de conception réactive avec Flexbox et Grid
  • Structurer un design flexible avec des colonnes et des lignes adaptatives

Après-midi : Animations et bonnes pratiques CSS

 •  Animations CSS :

  • Introduction aux animations CSS : propriétés @keyframes, animation, transition
  • Créer des animations simples (hover effects, transitions entre états)
  • Contrôler la durée, la répétition, et les délais des animations

 •  Bonnes pratiques et optimisation CSS :

  • Organiser son code CSS : comment structurer un fichier CSS
  • Minimiser et combiner les fichiers CSS pour une performance améliorée
  • Utilisation des préprocesseurs CSS (Sass, Less) et leur utilité
  • Validation et débogage de son code CSS

Méthodologie

  • Exercices pratiques : À chaque session, des exercices pratiques permettront aux participants de mettre en œuvre les concepts appris.
  • Projets en groupe : Travailler sur un projet concret tout au long des trois jours pour appliquer les connaissances acquises (création d’une page web complète, intégration de Flexbox et Grid, responsive design, etc.).
  • Questions-réponses : À la fin de chaque journée, une session de questions-réponses permettra de résoudre les éventuelles difficultés rencontrées par les participants.

À l’issue de cette formation de trois jours, vous serez capable de concevoir et de mettre en page des sites web modernes et interactifs, adaptés à tous types d’appareils, tout en respectant les bonnes pratiques du développement web.