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

Understand legacy layouts

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