Module 1 of 6 · Intermediate · 10 min read

Websites and web development

From a one-line idea to a fast, accessible, deployed website, with AI writing the code and you steering.

Key takeaways

1Write a short spec first: audience, pages, content, style and stack.
2Build one section at a time and review it in the browser before moving on.
3Ask for accessibility, performance and responsive checks explicitly.
4Never paste secrets into prompts or ship code you haven't run.

01Where AI helps

AI can now produce a working landing page in minutes, and a multi-page site with a real framework in an afternoon. It is strongest at boilerplate, layout, styling, copy drafts and explaining errors. It is weakest at knowing what your business actually needs, at taste, and at noticing problems it can't see, such as how the page behaves on a real phone.

Drafting page structure, copy and components.
Turning a sketch or screenshot into HTML and CSS.
Explaining and fixing build errors.
Accessibility and performance reviews.
Writing deployment configuration and documentation.

02The workflow

Keep the spec in the project and point the AI at it whenever you start a new session.

Write a one-page spec: goal, audience, pages, content, style references, stack.
Generate a skeleton: layout, navigation and one complete page.
Review in a real browser at phone and desktop widths, then iterate.
Add pages and components one at a time, keeping the style consistent.
Run accessibility, performance and link checks, and fix what they find.
Deploy to a preview URL, test again, then go live.

03Tools to reach for

For anything you will keep, prefer tools that give you the actual code in a repository you own.

Chat assistants for planning, copy and one-off snippets.
AI app builders that generate and host a site from a prompt, for quick prototypes.
AI code editors and coding agents for real projects you will maintain.
Browser developer tools and automated accessibility and performance audits for checking the result.
Static hosting platforms with preview deploys for shipping.

04Prompt: the spec

Start by having the AI interview you, then write the spec you will reuse.

Example

I want to build a website for {{business}}. Before writing any code, interview me: ask up to 10 short questions about the audience, goals, pages, content I already have, brand style, and technical constraints. Then write a one-page spec in markdown with sections: Goal, Audience, Pages (with the purpose and key content of each), Style, Stack, and Out of scope.

05Prompt: build the first page

Ask for one complete page, not the whole site, so you can judge quality early.

Example

Using the spec in <spec>, build the home page with {{stack, e.g. plain HTML and CSS, or a named framework}}. Requirements: - Mobile-first and responsive down to 360px wide, with no horizontal scrolling. - Semantic HTML, one h1, alt text on images, visible focus states, and colour contrast that meets WCAG AA. - No external libraries unless needed; explain any you add. - Use placeholder images with descriptive alt text. After the code, list anything in the spec you weren't sure how to interpret.

06Prompt: review and harden

Before launch, run a structured review. Paste the code or point a coding agent at the repository.

Example

Review this site before launch. Check and report, with file and line for each issue: 1. Accessibility: headings order, labels, alt text, keyboard navigation, contrast. 2. Performance: image sizes and formats, render-blocking scripts, unused CSS. 3. SEO basics: titles, meta descriptions, canonical URLs, sitemap, robots. 4. Security: secrets in code, unsafe HTML injection, form handling. 5. Broken links and missing pages. Rank issues by impact and fix the top five.

07Pitfalls

AI makes code cheap. Your judgement about what to build, and checking that it works, is now the valuable part.

Building everything at once: you end up with a large codebase you don't understand. Go section by section.
Trusting the preview pane: always check on a real phone and in more than one browser.
Invented packages: check that every library the AI imports exists and is maintained.
Generic design: give style references, colours and fonts, or every site looks the same.
Secrets in code: API keys belong in environment variables, never in the frontend or in prompts.

Watch out

Forms, payments, logins and user data need extra care. Have security-sensitive code reviewed, and use established services rather than AI-written authentication.

Finished reading?

Mark it complete to track your progress, then test yourself with the Build with AI: Software & Media quiz.

Next: Apps and coding agents →