CSS Layout Examples

Some examples to practice with and learn about making layouts with CSS. These examples cover:

• Basic layouts using the box model.
• Flexbox
• CSS Grid

Setup

NOTE: Make sure you have the latest version (LTS) of Node installed before beginning.

Install Node

If you're not sure if you have Node installed, run the command node -v in Terminal/Command Prompt and it should return the version of Node you have installed.

Install Dependencies

1. In Terminal/Command Prompt, go to the project root directory: css-layout-examples.
2. Run npm install (shorthand: npm i) to install dependencies.

Run the Project

1. 1. In Terminal/Command Prompt, go to the project root directory: css-layout-examples.
2. Run npm start to start the dev server.
3. Go to localhost:7777 in any web browser to explore the examples.

NOTE: Some examples make use of newer features in CSS. It is important that you've updated your browser recently in order to ensure all examples work as expected. These examples were created using Google Chrome Version 65.0.3325.181 and Firefox Quantum 59.0.2.

---

Resources

Here are some resources I've used to learn about web layouts:

Box Model

• CSS Box Model [Tutorial]

Float Layouts

Probably just Google how to do stuff... Everything you find about float layouts is inherently going to be hacky (unless you're flowing content around text). :P

Flexbox

• A Complete Guide to Flexbox - CSS Tricks [Article]
• CSS Flexbox - W3Schools [Tutorial]

Grid

• CSS Grid Course - Wes Bos [Course]
• Layout Land - Jen Simmons, Mozilla Designer and Developer Advocate [YouTube]
• Learn CSS Grid - Jen Simmons [Article]
• CSS Grid Layout Module [Tutorial]

Other Web Stuff

• DevTips [YouTube]
• Jen Simmons [Website]

---

Acknowledgements

The dev environment setup and some styles for these examples was taken from Wes Bos's CSS Grid course and some examples were inspired by it. I strongly encourage you to check out the course. It's free, and has great examples with video tutorials.