Flexbox (Part 1) — Setup and Fundamental Concepts

Understanding the basics of Flexbox

Live dev notes taken throughout the What the Flexbox course by Wesbos — What the Flexbox

In this series, we’ll be looking at flexbox from the ground up by working through simple sandbox examples to visually understand how it works.

In this post, we’ll be setting up our working environment to use flexbox, as well as the fundamental concepts we’ll be referring to throughout the series.

Setting up our working environment

An ideal working environment for implementing sandbox projects is one that is able to allow us to reload the browser with our changes (without having to rebuild or restart the server manually).

Tools

• Firefox (browser, Chrome will also work fine)
• Node.js — currently using v16.15.1
• Terminal — currently using Command Prompt via Windows Terminal
• Code Editor — currently using VSCode

Starter Files