Get the most from each lesson’s live editor with a deliberate loop—the same habits that transfer to real Foundation maintenance and legacy site upgrades.
Recommended workflow
- Read the concept section before touching code.
- Change one class group at a time (cell widths, then
grid-margin-x, then component color). - Resize the preview pane to test breakpoints (
medium-6,show-for-large). - Use DevTools to confirm flex rules on
.grid-xand which breakpoint media query applies. - Reset the editor if you drift too far from the lesson goal.
Review CSS cascade when custom CSS fights Foundation helpers—your overrides need appropriate specificity or Sass variable changes at build time.
Self-check
- Why change one class group at a time during learning?
- Which element should you inspect first when a row does not wrap as expected?
Challenge
Foundation init smoke test
- Add
button primaryand confirm styles apply. - Check that jQuery and Foundation JS load (plugins initialize after init).
Done when: styled button appears and no console errors about missing Foundation.