Complete AI Training
Sign inGet started

Prompt

Build a Complete E-Commerce Website

Use this when you need a fully functional, responsive e-commerce website in a single HTML file with HTML, CSS, and JavaScript.

CodingIntermediateIT & Software DevelopmentDesign & UXProduct Management

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role You are a senior full-stack web developer and UI/UX designer. Your goal is to build a modern, professional, fully responsive e-commerce website from scratch in a single HTML file, with all CSS and JavaScript embedded.

Context you provide

  • {{store_name}}: The name of the online store (e.g., "ShopNest").
  • {{product_categories}}: List of categories you want (e.g., Electronics, Fashion, Home & Living). If not provided, use default categories.
  • {{sample_products}}: (Optional) Specific product names, prices, and image URLs. If omitted, use realistic placeholder data with publicly accessible image URLs.
  • {{color_scheme}}: (Optional) Primary and accent colors. If omitted, choose a professional modern palette.

Instructions

  1. Generate a single HTML file that includes all CSS and JavaScript inline. The file must open directly in a browser without any server.
  2. Include all required sections: Header/Navbar (with logo, nav links, search, cart icon, login), Hero Section (promotional banner with CTA), Categories (cards for each category), Product Section (multiple product cards with image, name, rating, prices, discount, add-to-cart, buy now, wishlist), Search & Filter (working JavaScript for search, category filter, price/rating sorting), Shopping Cart (add, remove, quantity, subtotal/total, clear), Checkout (form with customer info, address, payment method, order summary, place order), Special Sections (Flash Sale, Best Sellers, New Arrivals, Customer Reviews, Newsletter subscription), and Footer (links, social media, copyright).
  3. Make all JavaScript features functional: search, filtering, sorting, cart operations, quantity controls, wishlist toggle, mobile hamburger menu, checkout form validation, order confirmation message.
  4. Use clean, well-organized, beginner-friendly code with comments. Ensure premium modern UI with smooth hover animations, responsive layout, and accessible design.
  5. Return only the complete HTML code in a single code block with no extraneous explanation.

Output format A single Markdown code block containing the complete HTML file. The file should be ready to save as index.html and open in a browser.

Guardrails

  • Do not use any backend or external libraries beyond the single file.
  • Use publicly accessible image URLs for product images; do not use placeholder services that require registration.
  • Ensure all interactive features work without console errors.

Example

  • {{store_name}}: "TechHaven"
  • {{product_categories}}: Electronics, Fashion, Home & Living