What you'll learn
- How to request multiple pages in a single prompt
- Using named code blocks to organize pages
- Creating shared CSS and JavaScript files
- Internal linking between pages
- Downloading your entire site as a .zip file
Single file vs. multi-page
LingCode can generate both:
- Single-file projects: One HTML file with everything embedded (CSS, JS, images as data URIs)
- Multi-page projects: Multiple HTML files + shared CSS/JS + image files, all organized in a .zip
Use multi-page for: full websites, product sites, documentation, portfolios, and anything with more than 3-4 pages.
Step 1: Write a multi-page prompt
1
Describe your entire site
Use a prompt like:
Build a multi-page website for an agency. Pages: 1) index.html (home with hero + services); 2) about.html (team + company story); 3) portfolio.html (case studies grid); 4) contact.html (contact form). All pages share: header nav with internal links, footer, consistent branding. Use a shared CSS file for styling. Make it responsive.
Key phrases that trigger multi-page mode:
- "multiple pages"
- "pages:" or "create pages for:"
- "index.html, about.html, etc."
- "shared CSS" or "shared header"
Naming convention: Ask for specific filenames (index.html, about.html, contact.html). The AI will respect these names and create files accordingly.
Step 2: Generate and preview
2
Click "Send"
Select your provider (Claude recommended for multi-page complexity) and click "Send". The AI will generate all pages.
You'll see a page selector appear in the preview pane (or Code tab) allowing you to view each page. Click on page names to switch between them and verify all links work.
Understanding the structure
A multi-page website includes:
- HTML pages: index.html, about.html, contact.html, etc. — each a complete page
- Shared CSS: style.css — loaded by all pages, defines fonts, colors, layout
- Shared JavaScript: main.js (optional) — navigation, form handling, etc.
- Assets: images, icons, fonts (bundled in the .zip)
All paths are relative, so you can unzip and open any .html file directly in your browser.
Step 3: Test navigation
3
Verify internal links
In the preview, click navigation links to verify they work. All links should use relative paths (e.g., href="about.html") so they work both locally and when deployed.
Step 4: Refine with iterations
4
Use "Continue" to improve
Request changes to specific pages:
- "Make the contact form submit to an email"
- "Add a blog page (blog.html) with 3 sample posts"
- "Update the portfolio page to show 6 case studies instead of 4"
- "Add a dark mode toggle that persists across all pages"
Step 5: Download as .zip
5
Export your entire site
Click the three-dots menu and select "Download .zip". You'll get a folder containing:
- All .html files
- style.css
- Any images or assets
Unzip the folder locally, open index.html in your browser, and you're done. All links and styles work instantly.
Deploying your site
Once you have the .zip:
- Local testing: Unzip and open index.html in your browser to test locally
- Netlify/Vercel: Connect your GitHub repo (or drag-and-drop the folder) to deploy
- Static host: Upload files to any web host (GoDaddy, Bluehost, etc.)
- Shared drive: Email the .zip or host on Google Drive / Dropbox
Tips for multi-page sites
- Consistent navigation: Ask for the same header on all pages with active page highlighting.
- Shared footer: Make sure the footer appears on every page with identical links.
- Organized file structure: For large sites, ask for subdirectories:
pages/, css/, images/
- Relative paths: Always use relative paths (e.g.,
href="about.html") not absolute (e.g., href="/about.html")
- Metadata per page: Set unique
<title> and <meta description> for each page for SEO
Common multi-page structures
Company website: index (home), about, services, portfolio, blog, contact
E-commerce: index, products, product-detail, cart, checkout, account
Documentation: index, getting-started, guides, API reference, FAQ
Portfolio: index, work, about, contact