All courses

Développement

Create Web Page Layouts With CSS

Go beyond basic HTML and CSS skills and learn how to create great layouts using CSS layout techniques!
Easy
10 hours
Interested in this free-access course?

Make your websites look well-organized and structured using CSS layout techniques! CSS (Cascading Style Sheets) is a code language that allows you to control the appearance of your web page. It is used on almost every website.

An important part of every website's appearance is its overall layout, but when you start creating your first web pages, you might be overwhelmed by the number of positioning options for your elements. For example:

  •  If your page shows hotel listings, should you arrange them in rows or columns?

  • If your page shows photos from your recent vacation, how can you add borders and spacing around them?

These types of questions are exactly what we'll answer in this course!

In part one of this course on layouts, we'll explore basic properties that can really make your elements pop, like spacing, borders, and custom styles for mobile and tablet screens. In parts 2 and 3, we'll discover CSS Grid and Flexbox, two powerful CSS systems for arranging elements in rows, columns, or both! Lastly, in part 4, we'll quickly cover some legacy layout techniques you might see in older codebases so that you feel prepared for all possible styling situations.  This is an optional part, but I strongly encourage you to get familiar with legacy layouts.  

If you already feel comfortable with HTML and very simple CSS (like setting colors and fonts), sign up now, and let's get started!

Learning outcomes

  • Define the components of the box model and how they are used in layouts
  • Adjust element properties to achieve a desired appearance
  • Explain how to create layouts with CSS Grid
  • Recognize how to incorporate CSS Grid browser compatibility into your page design
  • Identify how to use flexbox properties

Contributors

Instructor

Emily Reese

Emily's from the US and lives in Paris, France. She's Head of the Technology Academy at OpenClassrooms.

Created by

Last updated: 1/23/2025
License

Développement

Create Web Page Layouts With CSS

Easy
10 hours
Free-access course