🏗️
Project Structure
Master web project organization through our interactive file explorer. Learn the purpose of every folder and file with educational tooltips.
Explore Structure →Aprende Desarrollo Web A Través de Ejemplos Interactivos
Este sitio mismo es tu libro de texto - cada componente enseña un concepto, cada página demuestra una técnica. Construido completamente con tecnologías estáticas desplegables en GitHub Pages.
Qué Aprenderás
Ejemplos interactivos que enseñan desarrollo web moderno a través de código real y funcional
⚡
Interactive Playground
Edit HTML, CSS, and JavaScript in real-time with instant feedback. Perfect for experimenting and learning through hands-on practice.
Start Coding →🧩
How It's Built
Dive deep into the technical architecture, component patterns, and build process that powers this educational platform.
See Architecture →Your Learning Journey
Follow this progressive path to master modern web development
1. Explore This Site
Navigate through each page to see real examples of HTML, CSS, and JavaScript in action. Every element is documented and explained.
// Enable learning mode for interactive tooltips
localStorage.setItem('bsb-dev-mode', 'true');
// Refresh page to see component documentation2. Examine the Source
View the source code to understand how each feature is implemented. All code includes educational comments.
git clone https://github.com/madfam-io/branded-static-boilerplate.git
cd branded-static-boilerplate3. Experiment & Build
Start the development server and modify components to see how changes affect the site.
npm install
npm run dev
# Site opens at https://localhost:3000