From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript
Chapter 6.1: Cheat Sheet
One of the key reasons for style-sheets is on controlling the layout of the page. This is made more complicated by the simple fact that web pages are used on a variety of devices with a variety of resolutions and aspect ratios.
The purpose of the cheat sheet is to give you a summary of the main aspects of CSS Layout options and assumes that you are already familiar with the earlier CSS Basics chapter. If you are not sure if you should read through this chapter, take a look at the cheat sheet provided and if you fully understand what is in the cheat sheet then feel free to skim or skip this chapter. I urge those readers to attempt the project just to make sure they really do understand the material but that is up to you.
The cheat sheet is located here and is in my github repository located at https://github.com/BillySpelchan/FromScratchHTML_CSS_JS.
Chapter contents
Chapter 6 Contents
6.1 Layout Cheat Sheets
This chapter's summary cheat sheet.
6.2 The Layout problem
Why layout is complicated for web pages.
6.3 Display blocks
The basic display types.
6.4 Flexible Boxes
A box that contains other components and sizes them to fit the available space.
6.5 Grid
A flexible grid where you can lay out your design.
6.6 Grid Templates
Using templates to make laying out components in a grid easy.
6.7 Multiple columns
Using the columns attributes to easily allow for multiple columns.
6.8 Floating
Having images (or other blocks) have text wrap around them.
6.9 Position
There are other ways of placing elements by using the position attribute.
6.10 Media Queries
Altering CSS based on the properties of the device the page is being rendered on.
6.11 Project: Tic-Tac-Toe
The project for this chapter.
6.12 Project Solution
Solution for this chapter's project