The web browser you are using is out of date, please upgrade.

  • Skip to content
  • Select language
  • Skip to search

OpenClassrooms becomes an accredited US university.

Discover what this means for you
OpenClassrooms.comOpenClassrooms.com
Our training programs
Online and at your own pace.
Compare our training programs
Learn a profession
Degree programs
Acquire in-demand skills with real-world projects and one-to-one mentoring.
Discover a topic
Free-access courses
Broaden your knowledge with 500+ regularly updated courses
For employers
Train and recruit talents through an all-in-one space.
Discover our solution
Upskilling & reskilling
Enhance your knowledge
with a library of 500+ self-guided courses - SPARK
Promote hard and soft skills
with mentor-led intensive programs - BOOST
Support career progression
with mentor-led training programs - PIVOT
Create Web Page Layouts With CSS

Table of contents

  • Part 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

  • Part 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

  • Part 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

  • Part 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

Create grids with CSS Grid

Test your knowledge!

Create an account for free or log in to take this course and complete this quiz.
Create an accountLog in

Question 1

Question 2