Build Your Own Website for Free with AI | Beginner's Guide

Build Your Own Website for Free with AI: Complete Beginner's Guide (Part 1)

Have you ever wanted to build your own website but felt that web development was too complicated? Perhaps you don't know HTML, CSS, JavaScript, or any programming language. Or maybe you think creating a professional website requires hiring a developer and spending a lot of money.

The good news is that AI has made website development more accessible than ever.

Today, you can use AI coding tools to plan, design, and build a website—even if you are a complete beginner. You can also publish your website online using platforms that offer free hosting plans.

In this guide, we are starting a new tutorial series: Build Your Own Website From Scratch. We will explore how to use AI tools and modern development platforms to create a website step by step.

Whether you want a personal portfolio, business website, blog, educational platform, or online store, this series will help you understand the complete process.

What Is This Website Development Series About?

The goal of this series is simple: help you build your own website with the assistance of AI.

Instead of following only one fixed website design, you will learn how to create a website based on your own ideas, requirements, and preferences.

For example, you might want to build:

• Personal Portfolio: Showcase your skills, experience, projects, and contact information.
• Business Website: Present your company, services, products, and business details.
• Blog or News Website: Publish articles, tutorials, reviews, and updates.
• Educational Website: Share courses, learning resources, and tutorials.
• Online Store: Display products and build an online shopping experience.
• Custom Web Application: Develop a website with features designed around your specific requirements.

You will be able to choose the type of website you want to create.

Example: My Own Website — Complex To Easy

Before we start building anything, let me introduce you to my own website: Complex To Easy.

You can visit it here:

https://complextoeasy.com

Complex To Easy is a technology-focused website where I share tutorials, useful tools, and educational content to make technology easier to understand.

The website includes different sections, such as:

• Home Page: Introduces the website and its content.
• Tools: Provides useful online tools.
• Blog: Contains tutorials, guides, and technology-related articles.
• Product Pages: Showcases digital products and projects.

I will use this website as a practical example throughout the series to explain website structure, design, development, and other concepts.

However, you do not need to build the same type of website. You can create any website according to your own idea.

Can You Really Build a Website for Free Using AI?

Yes, you can get started without spending money.

Several tools and platforms offer free plans that are suitable for learning and building personal projects.

Here are some tools we may use during this series.

1. OpenCode — AI Coding Assistant

OpenCode is an AI coding agent that can help you work with your codebase.

You can describe what you want to build, ask it to create or modify files, explain existing code, and help troubleshoot errors.

Instead of writing every line manually, you can work with an AI assistant while learning how your website is developed.

2. Visual Studio Code — Code Editor

Visual Studio Code is a popular, free code editor.

We can use it to:

• Open and manage website projects.
• Edit HTML, CSS, JavaScript, and other files.
• Install useful extensions.
• Work with Git and terminal commands.
• Review and modify AI-generated code.

3. GitHub — Code Storage and Version Control

GitHub helps you store and manage your project source code.

It also provides version control through Git, allowing you to track changes and maintain different versions of your project.

GitHub is particularly useful when working with deployment platforms such as Vercel.

4. Vercel — Free Website Hosting

Vercel offers a free plan for deploying supported web projects.

You can connect a GitHub repository and deploy your website online.

For eligible projects, you can start with a free Vercel subdomain, such as:

your-project.vercel.app

You do not necessarily need to purchase a domain name to publish your first website.

Important: Free plans have usage limits and may include restrictions. A custom domain, additional resources, or certain advanced features may require payment. Always check the current pricing and terms of each platform.

How Will We Build Our Website?

We will follow a practical, step-by-step process.

Here is the general roadmap:

Step 1: Plan Your Website

First, decide what type of website you want to create.

We will identify:

• Website purpose and target audience.
• Required pages and sections.
• Design preferences and layout.
• Features and functionality.
• Technology and architecture requirements.

Step 2: Prepare Your Computer

Before development, we need to prepare our Windows computer.

We will install and configure the essential tools:

• NVM for Windows.
• Node.js and npm.
• Visual Studio Code.
• OpenCode.

We will also verify that everything is working correctly.

Step 3: Choose Your Technology Stack

Different websites require different technologies.

Depending on your project, we can explore options such as:

• HTML, CSS, and JavaScript.
• React.
• Next.js.
• TypeScript.
• Tailwind CSS.
• Backend technologies and databases when required.

You do not have to use every technology. We will choose the appropriate stack according to the website requirements.

Step 4: Build the Website with AI

Now comes the interesting part!

We will use OpenCode and AI assistance to turn our website requirements into a working project.

We will work on:

• Project structure.
• Website layout and navigation.
• Responsive design.
• Pages and components.
• Required features.
• Error fixing and improvements.

We will not simply copy and paste AI-generated code. We will also learn how the important parts work.

Step 5: Test and Improve

Before publishing, we need to make sure the website works properly.

We will check:

• Desktop and mobile responsiveness.
• Navigation and links.
• Page loading and performance.
• Basic accessibility.
• SEO essentials.
• Errors and functionality.

Step 6: Publish Your Website Online

Finally, we will push our project to GitHub and deploy it using a suitable hosting platform.

Once deployment is complete, you will have a live website that people can visit through a web address.

Complete Tutorial Series Roadmap

Here is what you can expect from this series:

Part	Topic
Part 1	Introduction: Build Your Own Website with AI
Part 2	Set Up Windows for Web Development: NVM, Node.js, VS Code and OpenCode
Part 3	Website Planning, Requirements and Technology Selection
Part 4	Create Your Website Project with AI
Part 5	Build Website Pages and Navigation
Part 6	Add Features and Improve the Design
Part 7	Responsive Design, SEO and Performance
Part 8	Testing, Fixing Errors and Final Improvements
Part 9	Upload Your Project to GitHub
Part 10	Deploy Your Website and Make It Live

The roadmap may expand depending on the website we build and the features we implement.

Do You Need Programming Experience?

No, you do not need to be an experienced programmer to get started.

However, understanding basic programming concepts will help you make better decisions, review AI-generated code, and troubleshoot problems.

AI can assist with development, but it does not guarantee perfect or secure code. You should always test your website and understand the important parts of your project.

Our goal is not just to generate a website using AI. Our goal is to learn how to build, improve, and manage our own websites.

Frequently Asked Questions

Can I build a website without coding?

Yes. AI coding assistants can help generate and modify website code based on your instructions. You should still learn the basics so you can understand and maintain your project.

Can I publish my website without buying hosting?

Yes. Platforms such as Vercel offer free hosting plans for eligible projects. Their free plans have limitations, so check the current terms before choosing one.

Do I need to buy a domain name?

No. You can initially use a free subdomain provided by your hosting platform. You can purchase a custom domain later.

Can I build an online store using AI?

AI can help you develop an online store, including product pages and shopping features. However, payment processing, security, inventory, and order management require additional planning and implementation.

Which AI tool will we use?

We will use OpenCode as one of our AI coding assistants, along with development tools such as Visual Studio Code. The exact tools and technology stack will depend on the project.

Start Building Your Own Website!

Building a website is no longer limited to professional developers. With the right tools, proper planning, and AI assistance, beginners can also start creating their own web projects.

In this series, I will guide you through the process with practical demonstrations and real examples using Complex To Easy.

Your turn!

What kind of website would you like to build?

• Personal Portfolio
• Business Website
• Blog or News Website
• Educational Website
• Online Store
• Something Different

Leave your idea in the comments. Your suggestion may become our next practical project!

If you found this guide useful, share it with someone who wants to learn website development.

Stay connected with Complex To Easy — Everything Will Be Just Easy!

---

Watch the Video Tutorial

Watch Part 1 of our Build Your Own Website series on YouTube.

https://www.youtube.com/watch?v=aYDO0z0JiFI

Next Tutorial: Part 2 — Set Up Your PC for Web Development: Install NVM, Node.js, Visual Studio Code, and OpenCode.

https://www.youtube.com/watch?v=nC4z1ygPk5w

Set Up Your PC for Web Development: Install Node.js, NVM, VS Code & OpenCode on Windows (2026)

Getting started with website development? Before writing your first line of code, you need to prepare your computer with the right development tools.

Whether you're a complete beginner, a student, or someone interested in building professional websites, setting up a proper development environment is your first important step.

In this tutorial, we'll install four essential tools on Windows:

1. NVM for Windows
2. Node.js
3. Visual Studio Code
4. OpenCode AI Coding Agent

This is Part 2 of the Build Your Own Website series by Complex To Easy, where we'll gradually learn how to plan, develop, and publish our own website.

Let's get started!

---

What Do You Need Before Starting?

Before installing anything, make sure you have:

• A Windows 10 or Windows 11 computer.
• An active internet connection.
• Administrator access to install software.
• Basic knowledge of using Windows.
• Some free disk space for development tools and projects.

No previous programming experience is required for this setup tutorial.

1. What Is NVM for Windows?

NVM stands for Node Version Manager.

NVM for Windows is a utility that allows developers to install and switch between multiple Node.js versions on the same computer.

Why is this useful?

Different website development projects may require different Node.js versions. Instead of uninstalling and reinstalling Node.js every time, NVM makes it easier to manage multiple versions.

Download NVM for Windows

Official GitHub repository:

https://github.com/coreybutler/nvm-windows

Installation Steps

1. Open the official GitHub repository.
2. Navigate to the Releases section.
3. Download the latest nvm-setup.exe installer.
4. Run the installer.
5. Follow the installation instructions.
6. Complete the installation.
7. Open a new PowerShell or Command Prompt window.

Verify NVM Installation

Run:

nvm version

If the installation is successful, Windows will display the installed NVM version.

Useful NVM Commands

Check the installed NVM version:

nvm version

Display available Node.js versions:

nvm list available

Install the latest Long-Term Support version:

nvm install lts

List installed Node.js versions:

nvm list

Switch to an installed Node.js version:

nvm use <version>

For example:

nvm use 22.14.0

Check the active Node.js version:

node -v

Important: When using NVM for Windows, manage Node.js installations through NVM. Avoid installing a separate standalone Node.js installation that could conflict with NVM's PATH configuration.

2. What Is Node.js?

Node.js is a JavaScript runtime that allows JavaScript code to run outside a web browser.

Modern web development tools and frameworks use Node.js for many development tasks.

For example:

• Next.js
• React development tools
• Angular CLI
• Vite
• npm packages
• Build and development servers

Node.js also includes npm (Node Package Manager), which helps developers install and manage JavaScript packages.

Install Node.js Using NVM

Since we already installed NVM, we don't need to download a separate Node.js installer.

Open PowerShell and run:

nvm install lts

After installation, activate the installed version:

nvm use <installed-version>

Check Node.js:

node -v

Check npm:

npm -v

If both commands display version numbers, Node.js and npm are ready to use.

Why Use the LTS Version?

LTS means Long-Term Support.

For most beginners and general web development projects, an actively supported LTS release is a sensible starting point.

You can also switch Node.js versions later whenever a project requires a different version.

3. Install Visual Studio Code

Visual Studio Code (VS Code) is a popular, lightweight code editor used by developers around the world.

We will use it to:

• Write and edit code.
• Manage project files.
• Open integrated terminals.
• Install useful extensions.
• Work with HTML, CSS, JavaScript, TypeScript, and more.
• Review changes made by AI coding tools.

Download Visual Studio Code

Official website:

https://code.visualstudio.com/

Installation Steps

1. Visit the official VS Code website.
2. Download the Windows installer.
3. Run the installer.
4. Accept the license agreement.
5. Select your preferred installation options.
6. Complete the installation.
7. Launch Visual Studio Code.

Recommended VS Code Extensions

You can install these extensions according to your development requirements:

1. Prettier – Code Formatter

Helps format your code consistently.

2. ESLint

Identifies potential JavaScript and TypeScript code problems.

3. Tailwind CSS IntelliSense

Provides suggestions and autocomplete for Tailwind CSS classes.

4. GitLens

Provides additional Git information directly inside VS Code.

5. Error Lens

Makes certain code errors and warnings easier to notice.

You don't need to install every extension immediately. Start with the ones that support your project.

4. Install OpenCode – Your AI Coding Agent

Now let's introduce one of the most interesting tools in our development environment: OpenCode.

OpenCode is an open-source AI coding agent that can help developers understand code, create files, modify existing projects, troubleshoot errors, and implement features using natural language instructions.

Instead of manually writing every line of code, you can describe what you want to build and ask OpenCode to help implement it.

What Can OpenCode Do?

• Generate website components.
• Create project structures.
• Write HTML, CSS, JavaScript, and TypeScript.
• Help develop Next.js applications.
• Analyze existing code.
• Identify and fix programming errors.
• Explain unfamiliar code.
• Help improve existing projects.

Remember that AI-generated code still needs review, testing, and verification.

Download OpenCode

Official website:

https://opencode.ai/

Official documentation:

https://opencode.ai/docs

OpenCode offers different installation options, including a Windows desktop application and command-line installation.

For the command-line version using npm, the current OpenCode 2 documentation provides:

npm install -g @opencode/cli

After installation, verify it:

opencode --version

You can start OpenCode using:

opencode

Check the official documentation for the appropriate installation method and version before installing. OpenCode 1 and OpenCode 2 use different npm package names, so don't mix their installation instructions.

Connect an AI Model

OpenCode needs an AI model provider to generate and modify code.

Depending on your selected provider, you may need to:

1. Open OpenCode.
2. Run the /connect command.
3. Select a supported provider.
4. Complete its authentication process.
5. Select an available model.
6. Start using OpenCode.

Some AI providers require paid API usage or a subscription. Check the provider's pricing before using it.

Official documentation explains supported providers and configuration options.

---

5. Verify Your Complete Development Environment

Now let's verify that everything is installed correctly.

Open PowerShell and execute these commands:

nvm version
node -v
npm -v
code --version
opencode --version

If each installed command displays its version information, your development environment is ready.

Note: The code command requires VS Code's command-line launcher to be available in your PATH. If it isn't recognized, you can still launch VS Code from the Windows Start menu.

6. What Have We Installed?

Let's quickly review our development environment.

Tool	Purpose
NVM for Windows	Manage Node.js versions
Node.js	Run JavaScript development tools
npm	Install and manage packages
VS Code	Write and manage code
OpenCode	AI-assisted development

These tools provide the foundation for our upcoming website development project.

7. What's Coming in Part 3?

Now that our development environment is ready, it's time to understand the technologies we will use to build our website.

In Part 3, we'll explore:

• What is frontend development?
• What is backend development?
• What is HTML, CSS, and JavaScript?
• What is TypeScript?
• What is Next.js?
• What is a static website?
• Which technology stack should beginners choose?

We'll also decide which technologies to use for our actual website project.

Our objective is to understand the technologies before starting development rather than blindly copying AI-generated code.

---

Frequently Asked Questions (FAQs)

1. Is Node.js necessary for website development?

Not every website requires Node.js. However, many modern frontend frameworks and development tools use Node.js, making it useful for our learning project.

2. Why should I use NVM instead of installing Node.js directly?

NVM allows you to install and switch between multiple Node.js versions without manually reinstalling Node.js every time.

3. Is Visual Studio Code free?

Visual Studio Code is a free code editor available for Windows, macOS, and Linux.

4. Is OpenCode a replacement for Visual Studio Code?

No. They serve different purposes. VS Code is a code editor, while OpenCode is an AI coding agent that can work with your project files and development environment.

5. Can beginners use OpenCode?

Yes. Beginners can describe their requirements in natural language. However, learning basic programming concepts will help them understand, review, and troubleshoot the generated code.

6. Do I need a powerful computer for website development?

You can start learning frontend development on an ordinary modern computer. More demanding AI models, virtual machines, and large projects may require additional resources.

---

Final Thoughts

Setting up your development environment is the first practical step toward becoming a web developer.

With NVM, Node.js, Visual Studio Code, and OpenCode installed, you now have the essential tools needed to begin our website development journey.

Remember, the goal of this series is not just to generate a website using AI. It's to understand how websites work and learn how to build, customize, test, and publish them.

Let's learn, build, and grow together with Complex To Easy!

🌐 Website: https://complextoeasy.com

📺 YouTube: Complex To Easy

Continue to Part 3: Let's Build Website.

~ This is Main Master ~ UNIVERSAL WEBSITE BUILDER — MASTER PROMPT

ROLE: Act as a senior frontend developer, UI/UX designer, accessibility specialist, SEO expert, and software architect. Your task is to build a complete, professional, responsive single-product ecommerce landing page based on the configuration below.

The website must be visually appealing, mobile-first, conversion-focused, accessible, and ready for deployment without requiring paid backend subscriptions or complex databases.

---

STEP 1: PROJECT CONFIGURATION

1. Website Type: Selected Website Type: Single-Product E-commerce Storefront (High-Converting Sales Landing Page)

2. Project Information: Website Name: Apex Pulse (Smart Hydration Tracker) Website Purpose: Showcase a single hero product, highlight its features and benefits, answer buyer FAQs, and convert visitors into buyers via a zero-cost checkout flow. Target Audience: Fitness enthusiasts, professionals, and tech-focused consumers looking to improve daily health habits. Brand Description: Minimalist, premium health-tech brand focused on sleek design and everyday utility. Preferred Language: English Reference Websites: Clean, modern landing pages similar to modern consumer hardware launches (e.g., Apple product pages, Oura, Minimalist DTC brands). Existing Project: NO

3. Design Preferences: Design Style: Modern, clean, tech-forward, high contrast Primary Color: Deep Slate / Obsidian (#0F172A) Secondary Color: Electric Cyan / Aqua accent (#06B6D4) Theme: Dark mode default (clean, premium tech aesthetic) Typography: Clean sans-serif (Inter or similar system font stack) Layout: Single-page long-form narrative landing page with sticky navigation and sticky CTA Animation: Subtle (smooth scroll, hover transitions, fade-in on scroll)

4. Technology Stack: Framework: Next.js (App Router) or clean Static HTML/Tailwind Language: TypeScript Styling: Tailwind CSS Icons: Lucide React (lightweight, consistent) Package Manager: npm / pnpm Architecture: Static site generation (JAMstack) suitable for free hosting (Vercel, Netlify, or GitHub Pages).

5. Backend and Database Requirements: Selected Architecture: Static Website with External Services (No paid backend or database). Order Handling: Direct WhatsApp Order Link pre-filled with product name and customer message, plus an optional modal form (Google Form or Formspree integration) for cash-on-delivery details.

6. Required Sections (Single Page Architecture):

1. Sticky Header: Brand logo, quick jump links (Features, Specs, Reviews, FAQ), and "Order Now" action button.
2. Hero Section: Compelling headline, value hook, high-resolution product mockup container, pricing callout, and primary CTA button.
3. Social Proof Bar: Trust badges (Free shipping, 30-day money-back guarantee, 5-star rating summary).
4. Feature Highlights: 3 to 4 core benefits with icon grid and visual layout.
5. Interactive Showcase / Specs: Technical specifications table (battery life, materials, connectivity).
6. Customer Reviews: 3 realistic testimonial cards with star ratings and verified buyer tags.
7. FAQ Accordion: 4 to 5 common pre-purchase questions (shipping time, warranty, return policy).
8. Sticky Mobile Bottom Bar: Visible on mobile devices showing price and a quick "Buy via WhatsApp" button.
9. Footer: Copyright, basic disclaimer, and links.

1. Required Features:

• 100% Mobile-responsive layout (optimized for one-thumb scrolling)
• Working WhatsApp order generator link (pre-configured with URL query: https://wa.me/?text=Hi,%20I%20want%20to%20order%20the%20Apex%20Pulse)
• Working interactive FAQ accordion (expand/collapse)
• Product image gallery/selector (thumbnail switcher)
• Clean, semantic HTML with meta tags and Open Graph preview setup

---

STEP 2: IMPLEMENTATION INSTRUCTIONS

1. Do not use generic Lorem Ipsum; generate realistic, persuasive copy for the "Apex Pulse" smart hydration bottle.
2. Build the entire landing page with self-contained, modular components.
3. Ensure high contrast and fast loading with clean Tailwind classes.
4. Provide the complete code ready to preview immediately.

Prompt for Building a Website

UNIVERSAL WEBSITE BUILDER — MASTER PROMPT

ROLE

Act as a senior frontend developer, UI/UX designer, accessibility specialist, SEO expert, and software architect.

Your task is to build a complete, professional, responsive website based on the user's requirements.

The website must be visually appealing, easy to use, mobile-friendly, accessible, maintainable, and ready for deployment.

Do not assume that every project needs a backend or database. Choose the simplest architecture that fully meets the requirements.

---

STEP 1: PROJECT CONFIGURATION

Use the following configuration to customize the website.

A. Website Type

Choose one or replace it with your own:

• Personal Portfolio
• Business Website
• Company Website
• Educational Website
• Blog or Documentation Website
• SaaS Landing Page
• E-commerce Storefront
• Agency Website
• Restaurant Website
• Real Estate Website
• News or Magazine Website
• Dashboard UI
• Nonprofit Organization Website
• Event Website
• Custom Website: [DESCRIBE YOUR TYPE]

Selected Website Type: [REPLACE THIS]

B. Project Information

• Website Name: [YOUR WEBSITE NAME]
• Website Purpose: [WHAT SHOULD THE WEBSITE ACHIEVE?]
• Target Audience: [WHO WILL USE IT?]
• Brand Description: [DESCRIBE YOUR BRAND]
• Preferred Language: [ENGLISH / URDU / OTHER]
• Additional Languages: [OPTIONAL]
• Reference Websites: [OPTIONAL URLS]
• Existing Project: [YES / NO]
• Existing Repository Path: [PATH OR NOT APPLICABLE]

C. Design Preferences

• Design Style: [MODERN / MINIMAL / CORPORATE / CREATIVE / CUSTOM]
• Primary Color: [COLOR OR LET AI RECOMMEND]
• Secondary Color: [COLOR OR LET AI RECOMMEND]
• Theme: [LIGHT / DARK / BOTH]
• Typography: [LET AI CHOOSE OR SPECIFY]
• Layout: [LET AI CHOOSE OR SPECIFY]
• Animation: [NONE / SUBTLE / MODERATE]
• Reference Design: [OPTIONAL]

Do not copy another website's branding or content. Use references only to understand design direction and user experience.

D. Technology Stack

Use these defaults unless the project requires something different:

• Framework: Next.js with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Content: Markdown or MDX when appropriate
• Icons: A consistent, lightweight icon library
• Version Control: Git
• Package Manager: Use the existing project's package manager or select one consistently

For a simple static website, prefer static generation and static hosting.

Do not add a backend, database, authentication system, or paid service unless required by the selected website type and features.

E. Backend and Database Requirements

Select one:

• Static Website: No backend or database
• Static Website with External Services
• Website with Backend API
• Full-Stack Website with Database
• Existing Backend Integration
• Let AI Recommend the Simplest Suitable Architecture

Selected Architecture: [REPLACE THIS]

If a backend is required, choose the technology based on the project requirements rather than adding unnecessary infrastructure.

Possible backend options include ASP.NET Core Web API, Node.js, or another suitable framework.

Possible databases include PostgreSQL, SQL Server, MySQL, or another appropriate database.

Explain any additional hosting, security, or maintenance requirements.

F. Required Pages

Select or customize the pages required by the website:

• Home
• About
• Services
• Products
• Features
• Pricing
• Blog
• Blog Article
• Tutorials
• Contact
• FAQ
• Privacy Policy
• Terms and Conditions
• Custom Pages: [LIST YOUR PAGES]

Only create pages relevant to the selected website type.

G. Required Features

Select or customize:

• Responsive navigation
• Mobile-friendly layout
• Search
• Filtering and sorting
• Contact form
• Form validation
• Image gallery
• Testimonials
• Pricing cards
• Newsletter subscription
• Blog and categories
• Code syntax highlighting
• Dark mode
• Authentication
• User dashboard
• Database integration
• Payment integration
• Admin panel
• Analytics
• Other Features: [LIST YOUR FEATURES]

Do not implement features that are unnecessary for the project.

For forms, payments, authentication, and data persistence, implement the required real functionality rather than creating decorative UI that only appears to work.

---

STEP 2: PROJECT ANALYSIS

Before writing code:

1. Inspect the existing repository if one is provided.
2. Identify the current framework, dependencies, folder structure, routes, assets, and existing functionality.
3. Preserve useful existing work.
4. Identify missing requirements and technical constraints.
5. Determine whether static generation is sufficient.
6. Identify which features require server-side processing or persistent data.
7. Check the current project documentation and installed framework versions.
8. Never overwrite existing files without understanding their purpose.

If this is an existing project, do not rebuild it from scratch unless explicitly required.

If essential information is missing, ask concise clarification questions. Otherwise, make sensible assumptions and document them.

---

STEP 3: PLAN THE WEBSITE

Create a practical implementation plan containing:

1. Project architecture
2. Page and route structure
3. Component hierarchy
4. Design system
5. Content structure
6. Data model, if required
7. Feature implementation order
8. SEO strategy
9. Accessibility requirements
10. Testing and deployment plan

For a simple static website, avoid unnecessary architectural complexity.

Present the plan before making substantial changes to an existing project.

---

STEP 4: DESIGN AND IMPLEMENTATION

Build the website using reusable components and clean, maintainable code.

Design Requirements

• Establish a consistent visual identity.
• Use clear typography and visual hierarchy.
• Maintain consistent spacing, colors, borders, and component styles.
• Create an intuitive navigation system.
• Make important actions visually clear.
• Use appropriate, optimized images.
• Avoid excessive animations and unnecessary visual effects.
• Prevent horizontal scrolling on mobile devices.
• Ensure text is readable on all supported screen sizes.
• Provide loading, empty, error, and success states wherever applicable.

Responsive Requirements

Test the layout at representative mobile, tablet, laptop, and desktop widths.

Use responsive layouts rather than designing only for desktop.

Code Quality Requirements

• Use TypeScript types appropriately.
• Prefer reusable components over duplicated code.
• Keep components focused and understandable.
• Use semantic HTML.
• Avoid unnecessary dependencies.
• Remove unused code and assets.
• Do not leave broken links, placeholder buttons, or unfinished sections.
• Do not claim a feature works unless it has been implemented and tested.

Content Requirements

Write clear, useful, original content appropriate for the selected website.

Do not use repetitive filler text or generic placeholder paragraphs.

When real business information is unavailable, use clearly identified sample data and make it easy to replace.

---

STEP 5: SEO AND PERFORMANCE

Implement the SEO features relevant to the project:

• Unique page titles
• Meta descriptions
• Canonical URLs when appropriate
• Semantic heading structure
• Descriptive image alt text
• Open Graph metadata
• Social sharing metadata
• Sitemap where appropriate
• robots.txt
• Structured data only when applicable and accurate
• Descriptive, stable URLs
• Internal linking
• Appropriate image optimization

For content websites, ensure that important text and links are available to search engines.

For static websites, use static generation wherever practical.

Avoid claiming that SEO implementation guarantees search rankings.

---

STEP 6: SECURITY AND ACCESSIBILITY

• Never expose API keys, passwords, tokens, or private configuration.
• Keep secrets in appropriate environment variables.
• Validate and sanitize untrusted input where applicable.
• Use secure authentication and authorization if required.
• Do not store sensitive data unnecessarily.
• Use accessible labels and keyboard navigation.
• Maintain sufficient color contrast.
• Respect reduced-motion preferences.
• Provide meaningful error messages.
• Follow secure defaults for forms, APIs, and integrations.

Do not introduce authentication, databases, or security-sensitive functionality into a project that does not need them.

---

STEP 7: TESTING AND QUALITY CHECKS

Before declaring the project complete:

1. Install dependencies using the appropriate package manager.
2. Run the production build.
3. Run available linting and type checks.
4. Fix errors introduced by your changes.
5. Test all navigation links.
6. Test forms and interactive elements.
7. Verify responsive layouts.
8. Check browser console errors.
9. Check image loading and accessibility basics.
10. Verify metadata and canonical URLs.
11. Confirm that deployment requirements are documented.

If a check cannot be run, explicitly report it instead of claiming success.

---

STEP 8: DOCUMENTATION AND DELIVERY

Provide:

• Summary of the completed website
• List of implemented pages
• List of implemented features
• Technology stack
• Project folder structure
• Installation instructions
• Local development commands
• Build and testing commands
• Environment variable documentation, if required
• Deployment instructions
• Known limitations
• Recommended future improvements

Include a README.md with setup and maintenance instructions.

Do not expose secrets in documentation.

---

STEP 9: WORKING RULES FOR OPENCODE

1. Work in small, understandable stages.
2. Inspect before modifying.
3. Follow existing project conventions.
4. Explain significant architectural decisions.
5. Avoid unnecessary dependencies and complexity.
6. Do not delete existing content or files without justification.
7. Do not perform destructive database operations without explicit approval.
8. Never deploy to production or incur paid costs without authorization.
9. Do not invent credentials, integrations, or test results.
10. If a requirement is ambiguous but nonessential, choose a sensible default and document it.

For a new project, create the initial structure and implement the website in stages.

For an existing project, preserve working features and make incremental improvements.

---

FINAL OBJECTIVE

Deliver a professional website that satisfies the selected requirements, works on mobile and desktop, has appropriate SEO foundations, and can be maintained by its owner.

Prioritize usability, correctness, simplicity, accessibility, and real functionality over unnecessary complexity.

Begin by reviewing the project configuration and repository. Then follow the appropriate planning and implementation workflow.