In this module, we look at building layouts, a crucial aspect of CSS and one you’ll need to become familiar with.
We’ll start by looking at positioning elements on the page using the position property. We also look at using float to place images beside the text and have the text flow around the image.
Then we’ll move on to two significant developments in CSS layouts: Flexbox and CSS Grids.
- Flexbox is a handy tool for creating one-dimensional layouts that run horizontally or vertically. The fact that it so easily creates horizontal and vertical layouts makes it ideal for making responsive sites that can be horizontal on large screens but vertical on smaller screens.
- CSS Grids is a two-dimensional layout system that offers increased flexibility to create even more complex layouts easily.
Take time to get familiar with both Flexbox and CSS Grids.
Finally, we’ll look at a vital part of modern web development: using the media query to create responsive websites. It is important to remember a few key things when working with media queries:
- You must always have the
<meta>viewport tag in the<head>of your HTML document. - Media queries should be placed at the bottom of your stylesheet.
- Don’t repeat styles in your
media querythat don’t need changing.