Module 3 Overview
In this module we look at building layouts. This is a crucial aspect of CSS and one with which you’ll need to become familiar.
We’ll start by looking at positioning elements on the page using the position property. We also look at using floats to place images beside text and have the text flow around the image.
Then we’ll move on to two very important developments in CSS layouts: Flexbox and CSS Grids.
- Flexbox is a very useful tool for creating one-dimensional layouts that run either horizontally or vertically. The fact that it so easily creates horizontal and vertical layouts is what 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 and 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, and that is using media queries 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.
- Media queries should be placed at the bottom of your stylesheet.
- Don’t repeat styles in your media query that don’t need changing.