HTML
Folder Structure
Understand how the OptimAI HTML project is organized.
Understanding the project organization is key for efficient development and maintenance.
OptimAI HTML includes two folder structures:
- Production-ready package (ready to upload or use directly)
- Development source package (used for editing and rebuilding)
Production-ready structure
Example: ai-agency
ai-agency/
├── *.html # Final compiled HTML pages
├── assets/ # Compiled CSS/JS and related assets
├── images/ # Production image files
├── fonts/ # Font files
├── vendor/ # Third-party libraries
├── favicon.ico
├── favicon.svg
├── favicon-96x96.png
├── apple-touch-icon.png
└── site.webmanifest
Use this package when you only need to deploy or edit final output files.
Development structure
Example: ai-agency
ai-agency/
├── public/ # Static assets (images, vendor scripts)
├── src/
│ ├── components/
│ │ ├── auth/ # Login, signup
│ │ ├── about/ # About page sections
│ │ ├── blog/ # Blog listing and details
│ │ ├── case-studies/ # Case study sections
│ │ ├── feature/ # Features pages
│ │ ├── home/ # Homepage sections
│ │ ├── process/ # Process page
│ │ ├── service/ # Services pages
│ │ └── shared/ # Header, footer, CTA, icons, etc.
│ ├── js/
│ │ ├── animation/ # GSAP and scroll animations
│ │ └── utils/ # Accordion, menu, modal, marquee
│ ├── styles/ # Tailwind, typography, variables
│ └── main.js # JS entry
├── *.html # Root HTML pages (Vite inputs)
├── post-build.js # Post-build dist fixes
├── package.json
├── vite.config.js
└── README.md
Use this package when you want to customize source code and rebuild the project.
Key differences
- Production package: only final output files, no source editing workflow
- Development package: includes
src/, tooling, and build scripts dist/folder: appears in development projects after build process, not in the production-ready package