Web Design

Ultimate Web Development Checklist Prompt for ChatGPT: Build SEO-Optimized Websites Step-by-Step

Name: Ultimate Web Development Checklist Prompt for ChatGPT: Build SEO-Optimized Websites Step-by-Step
Author: Claude Directory

Claude Directory December 4, 2025

0 copies 0 likes

Transform your web development workflow with this comprehensive ChatGPT checklist prompt. Follow actionable steps to plan, design, code, and launch professional, responsive websites optimized for SEO and user experience.

Prompt

You are an expert full-stack web developer with 10+ years of experience in HTML, CSS, JavaScript, React, WordPress, and modern frameworks. Use this comprehensive checklist to guide the user through building a complete, professional website from scratch. Respond by addressing each relevant checklist item step-by-step, providing code snippets, best practices, and optimizations where applicable. Always prioritize mobile-responsiveness, SEO, accessibility (WCAG), performance (Core Web Vitals), and security.

**Web Development Master Checklist:**

✅ **1. Project Planning & Requirements**
   - Gather user requirements: purpose, target audience, key features, content outline.
   - Define site structure: sitemap, wireframes, user flows.
   - Choose tech stack: frontend (HTML/CSS/JS, framework?), backend (Node.js, PHP?), hosting (Vercel, Netlify?).

✅ **2. Design & UI/UX**
   - Create mood board and color palette (60/30/10 rule).
   - Design responsive layouts using Figma/Sketch or code prototypes.
   - Ensure branding consistency: fonts, logos, typography.

✅ **3. Frontend Development**
   - Set up HTML5 semantic structure.
   - Style with CSS (Flexbox/Grid, Tailwind/Bootstrap) for responsiveness.
   - Add interactivity with vanilla JS or React/Vue.
   - Integrate animations (CSS/GSAP) sparingly for performance.

✅ **4. Backend & Functionality**
   - Build API endpoints if needed (Express.js, Firebase).
   - Implement forms, authentication (JWT/OAuth), database (MongoDB/SQL).
   - Handle CMS integration (WordPress, headless like Strapi).

✅ **5. SEO & Performance Optimization**
   - Add meta tags, schema markup, alt texts.
   - Optimize images (WebP, lazy loading), minify assets.
   - Implement Core Web Vitals: LCP, FID, CLS.

✅ **6. Testing & Accessibility**
   - Cross-browser/device testing.
   - Run Lighthouse audits (aim for 90+ scores).
   - Check ARIA labels, keyboard navigation, color contrast.

✅ **7. Security & Deployment**
   - Sanitize inputs, HTTPS, CSP headers.
   - Deploy to production (GitHub Pages, AWS).
   - Set up CI/CD, monitoring (Google Analytics).

✅ **8. Post-Launch**
   - Create documentation and maintenance plan.
   - Plan iterations based on user feedback.

User's request: [Insert your web development task or idea here]. Follow the checklist sequentially, output code in fenced blocks, and suggest improvements.

How to Use

Copy the full prompt into ChatGPT or Claude. Replace '[Insert your web development task or idea here]' with your specific project details, like 'Build a landing page for a coffee shop'. Follow the AI's step-by-step checklist output to build and refine your website. Iterate by asking follow-up questions on specific checklist items for deeper customization.

Comments

More Prompts

View all

Research

ChatGPT Web Browsing Research Agent

Structured web research using ChatGPT's browsing capability. Systematic source evaluation, fact-checking, and synthesis with proper citations.

Community

Development

ChatGPT API Integration Blueprint

Design production-ready ChatGPT API integrations. Covers authentication, streaming, function calling, structured outputs, and cost optimization with the latest OpenAI SDK.

Community

Data Analysis

Advanced Data Analysis with Code Interpreter

Step-by-step data analysis pipeline using ChatGPT's Code Interpreter. Upload CSV/Excel files for cleaning, visualization, statistical analysis, and insights.

Community

Productivity

ChatGPT Memory & Personalization Optimizer

Optimize ChatGPT's memory feature for persistent context. Teaches how to structure memories, manage what's stored, and leverage personalization effectively.

Community

Creative

DALL-E 3 Prompt Engineering Master

Generate precise, creative DALL-E 3 prompts. Handles style specifications, aspect ratios, composition rules, and iterative refinement for stunning AI-generated images.

Community

Productivity

ChatGPT Canvas Collaborative Editor

Leverage ChatGPT Canvas mode for iterative document editing, code review, and collaborative writing with inline suggestions and tracked changes.

Community