A visual reference system for modern frontend engineering.
Frontend Index is an interactive map for understanding how the modern frontend stack fits together: browsers, HTML, CSS, JavaScript, frameworks, build tooling, architecture, performance, Git workflows, AI-assisted development, and production patterns.
- A guided frontend roadmap from browser fundamentals through AI-assisted workflows.
- Interactive labs for Flexbox, CSS Grid, the JavaScript event loop, and CSS specificity.
- A technology stack map with searchable, clickable entries.
- Expanded engineering sections for security, accessibility, testing, API/data fetching, state management, design systems, forms, SEO, deployment, monitoring, and internationalization.
- Visual explainers for browser rendering, Git flow, VS Code workflows, terminal commands, performance, and production UI patterns.
- Dark and light themes with local preference storage.
- Static-site metadata for GitHub Pages, social previews, search crawlers, and installable web app metadata.
frontend-index/
├── assets/
│ └── social-preview.svg
├── scripts/
│ └── validate-index.mjs
├── .editorconfig
├── .gitignore
├── .nojekyll
├── CONTRIBUTING.md
├── favicon.svg
├── index.html
├── LICENSE
├── package.json
├── README.md
├── robots.txt
├── SECURITY.md
├── sitemap.xml
└── site.webmanifest
Clone the repository:
git clone https://github.com/deandreperry/frontend-index.git
cd frontend-indexRun the static site locally:
npm run devThen open:
http://localhost:4173
Run the repo checks:
npm run checkThe check verifies required static files, key SEO/social metadata, valid inline JavaScript syntax, the manifest JSON, and the favicon SVG.
- HTML5
- CSS3
- Vanilla JavaScript
- SVG
- GitHub Pages
The app is intentionally dependency-light. The core experience lives in index.html so it can be hosted as a plain static site.
Planned expansion areas:
- Advanced performance diagnostics
- React and Next.js architecture
- Advanced AI development workflows
- Deeper framework comparison paths
- More interactive labs for security, accessibility, and data fetching
Copyright (c) 2026 De'Andre Perry. All rights reserved.
This project is proprietary software provided for educational and informational purposes only. No permission is granted to copy, modify, distribute, sublicense, sell, or commercially use this software or derivative works without explicit written permission from the author.
Built to be read once, referenced forever.