Foundation
Another mature responsive front-end framework.
Foundation is taught here in 3 lessons, running from The XY grid and layout through to Choosing Foundation. Each lesson takes one topic, shows the working code, and links onward to the next, so the course can be read straight through in order.
| Track | Front-end Development |
| Lessons | 3 |
| Level | Beginner |
| Reading time | about 39 minutes |
| Prerequisites | Helpful, but not required: Bootstrap 5 |
Lessons
- The XY grid and layoutInstall Foundation, build a responsive layout with the XY grid, and learn the cell classes the whole system is built on.
- Components and utilitiesWire up the JavaScript plugins, know which components are CSS-only, and use the visibility and flex helpers instead of hand-written media queries.
- Choosing FoundationWhere Foundation fits against Bootstrap, Tailwind and Bulma, and the maintenance question you should answer before adopting it.
More in Front-end Development
HTML CSS JavaScript TypeScript HTML DOM AJAX JSON Tailwind CSS Bootstrap 5 Vue.js React Next.js Angular jQuery ECharts Chart.js SVG Font Awesome
FAQ
How long does the Foundation course take?
It has 3 lessons, about 39 minutes of reading. Expect roughly twice that if you type out and run every example.
Do I need prior experience for Foundation?
Not strictly. It helps to have read Bootstrap 5 first, because some lessons build on it, but every lesson explains its own assumptions.
What should I read after Foundation?
Continue with Vue.js (13 lessons), the next course in Front-end Development.
Last refreshed 2026-09-18.