Vous utilisez un navigateur obsolète, veuillez le mettre à jour.

  • Aller au contenu
  • Choisir la langue
  • Aller à la recherche

OpenClassrooms devient une université américaine accréditée.

Découvrez ce que cela change pour vous
OpenClassrooms.comOpenClassrooms.com
Nos formations
100% en ligne et à votre rythme.
Comparer nos formations
Apprendre un métier
Formations diplômantes
Apprenez un métier d’avenir grâce à des projets concrets et un mentor individuel.
Découvrir un sujet
Cours en libre accès
Développez vos connaissances avec plus de 500 cours régulièrement mis à jour
Pour les employeurs
Formez et recrutez des talents grâce à un espace tout-en-un.
Découvrir notre solution
Formation & reconversion
Développer les connaissances
Bibliothèque de +500 cours en autonomie - SPARK
Booster les compétences
Programmes intensifs mentorés - BOOST
Accompagner les reconversions
Parcours de formation mentorés - PIVOT
Create Web Page Layouts With CSS

Table des matières

  • Partie 1

    Apply basic CSS positioning techniques

    • 1

      Discover elements as boxes

    • 2

      Add custom borders to elements

    • 3

      Cushion elements with padding

    • 4

      Add breathing room with margins

    • 5

      Control an element's width and height

    • 6

      Set media queries for different devices

    • Quiz : Understand elements as boxes

  • Partie 2

    Create two-dimensional layouts with CSS Grid

    • 1

      Introduction to CSS Grid

    • 2

      Set up a basic grid

    • 3

      Set columns and rows in shorthand

    • 4

      Define grid element height and width

    • 5

      Create a grid template area

    • 6

      Set columns depending on screen size

    • Quiz : Create grids with CSS Grid

  • Partie 3

    Implement one-dimensional layouts with Flexbox

    • 1

      What is Flexbox?

    • 2

      Set flex direction and wrapping

    • 3

      Align items and justify content

    • 4

      Align multiple lines of content

    • 5

      Adjust element dimensions

    • 6

      Reorder elements

    • Quiz : Flexbox basics

  • Partie 4

    Explore legacy layouts

    • 1

      Manually adjust elements' positions

    • 2

      Float elements

    • 3

      Clear floated elements

    • 4

      Stack elements in an order

    • 5

      Discover third-party solutions

    • Quiz : Understand legacy layouts

Understand elements as boxes

Testez vos connaissances !

Créez un compte gratuitement ou connectez-vous pour suivre ce cours et faire ce quiz.
Créer un compteSe connecter

Question 1

Question 2