What is Website Studio for?
A business website presents your activity, reassures people and makes them want to contact you. Website Studio builds it with you: you fill in simple fields, the preview updates live on desktop, tablet and mobile, and the tool checks the site on 5 axes before you publish it.
You get a full home page (up to 9 sections), a legal notice and privacy page and a 404 page, with everything Google and social sharing need. It is plain HTML and CSS: no database, no plugin to update, and the site is yours.
With the other Yok-Kod tools
- Landing Page Copy Studio writes more advanced sales copy to paste into the sections;
- Brand Identity Studio sets your colour and typefaces: enter your main colour under “Custom colour”;
- Meta Tag Studio and SEO Audit check the site once it is online;
- Naming Studio helps you find a name and an available domain.
Who is it for?
Tradespeople
Services, area covered and quote requests.
Shops
Opening hours, address, access and key products.
Restaurants
Set menus, opening hours and bookings.
Freelancers
A clear offer and easy contact, within a day.
Wellbeing and health
Treatments, prices and appointments.
Web freelancers
Quickly deliver a clean site to a small client.
The steps, one by one
Discover the tool with the demo
🎁 Demo button: every section is filled in with a fictitious web studio. Look at the preview, change the style, switch to mobile. Pro members can start from one of the 8 industry templates (📋 Templates).
Fill in the brief
Name, tagline (your promise in one sentence), intro sentence, activity, target customers and domain name if you have one. Choose the website language: it sets the fixed texts (menu, buttons, legal notice).
Choose the look
One of the 8 styles, an accent colour (or your own), a typeface and your logo. The top of the page switches to two columns when you add a main photo.
Fill in the sections
Services, about, key figures, gallery, reviews, pricing, FAQ, call to action and contact. An empty section is not shown. In 🧩 Sections and order, tick what you want to show and reorder with the arrows.
Follow the recommendations and publish
The score and priorities update with every change. Complete the legal notice, then download the ZIP (Pro) and put it online.
Styles and readable colours
The tool computes contrasts with the WCAG 2 method:
- button text is white or black, whichever reads best on your colour;
- if your colour is too light (or too dark) for text on the style's background, the tool automatically uses a variant of the same hue that reaches 4.5:1 for labels, prices and links. The variant's code is shown under the colours.
“System” typefaces display instantly and contact no external service. Google Fonts offer more choice but send visitors' IP addresses to Google: this is then stated on the privacy page.
Contact and the form
Three modes in the 📞 Contact section:
- “Send an email” and “Call” buttons: nothing to set up, works everywhere;
- Form with the free Formspree service: create a form on formspree.io, copy its ID (the end of its address, e.g.
xyzabcde) and paste it into the tool. Messages arrive in your inbox. The form includes a consent box and a spam trap; - Contact details only.
The “View on the map” option adds a link to OpenStreetMap, with no tracker or cookie.
The 5-axis score
| Axis | What is checked |
|---|---|
| Content | Name, tagline of 15 to 90 characters, intro, at least 3 described services, about, photos, FAQ |
| SEO | Google title of 30 to 65 characters, description of 70 to 160, domain name, activity mentioned, photo descriptions, address for a local business |
| Conversion | Contact method, form, action-oriented button, call to action, prices shown, customer reviews |
| Trust and compliance | Complete legal notice, genuine reviews with consent, example content replaced, logo |
| Accessibility and technical | Button and accent contrast, typefaces without an external service, images hosted with the site, number of sections |
Each check counts in full (✓), by half (!) or not at all (✗). The discovery version shows the score, the 5 axes and the top 3 recommendations; Pro gives every recommendation and the advice for each check.
The legal notice
The ⚖️ section fills a “Legal notice and privacy” page: website publisher (company name, legal form, address, registration, VAT, publication director), host, intellectual property, personal data and cookies. Missing information appears highlighted “To complete”.
Reviews and figures: the rules
- Only publish real reviews, with their author's agreement (tick the box provided). Making up or buying reviews is a misleading commercial practice.
- Templates and the demo contain reviews marked “(example)”: the tool flags them in red until they are replaced or deleted.
- In key figures, only show what you can prove: founding year, projects delivered, area covered. No “98% satisfaction” without a survey.
What the ZIP contains (Pro)
| File | Role |
|---|---|
index.html | Home page with mobile menu, structured data (business, FAQ) and share tags |
legal-notice.html | Legal notice and privacy (mentions-legales.html for a French site) |
404.html | Page for a missing address |
images/ | Your photos and logo, resized to 1600 px |
favicon.png, favicon-32.png, apple-touch-icon.png | Icons generated from your logo (or your initials) |
og-image.jpg | Image shown when the site is shared (1200 × 630) |
robots.txt, sitemap.xml, llms.txt | Search engines and AI assistants (the sitemap needs a domain name) |
site.webmanifest, .htaccess, README.md | Mobile install, HTTPS / caching / 404 page on Apache hosting, instructions |
You can also download a single HTML file (images embedded) or copy the code to paste into another tool.
Putting the site online
With your host: unzip the file, open your FTP software (FileZilla) with your host's credentials and upload every file, including the images folder, to the site's root folder (often www or public_html). Turn on the free SSL certificate in your host's dashboard if HTTPS does not work yet.
On Netlify (free): 🚀 button in the tool, then drag the unzipped folder onto the Netlify Drop page. You get a .netlify.app address, which you can then connect to your own domain.
AI (optional, Pro)
With your own key (Agnes, OpenAI, Claude, Mistral, Groq, Gemini, DeepSeek, OpenRouter or a compatible service), the assistant can write all the copy from the brief, suggest 6 taglines, rewrite your services, write 5 FAQ entries and suggest your Google title and description. It is instructed never to make up reviews, figures, qualifications or guarantees. You then choose to fill only empty fields or replace everything.
Your key stays in your browser and is never stored on our servers. Everything else works without AI.
Discovery or Pro?
The website is divided into sections: the home page header, each active home page section (services, about, reviews, pricing, FAQ…), then the legal notice and the 404 page. In the discovery version, the preview shows about a third of these sections, the first ones in site order (for example 4 out of 11); the others keep their title and show a locked preview. The counter above the preview tells you which.
| Discovery (free) | Pro | |
|---|---|---|
| Full editor | ✓ data entry, 8 styles, every colour, section order | ✓ |
| Demo | ✓ | ✓ |
| Website preview | About a third of the sections | The complete website |
| 5-axis score | Score and 3 recommendations | Every recommendation and the advice for each check |
| Download | — | Full ZIP, single HTML file, copy the code, publish on Netlify |
| Industry templates | — | 8 |
| Projects | 1 | 30, with JSON backup and import |
| AI assistant | — | ✓ |
Pro is a one-off purchase, no subscription: €49 for this tool on its own, or included in the Creative + Dev Pack (€99) and in Full Access (€179, every tool).
Where is my data?
Your projects and photos are saved in your browser, automatically. The server receives the content only to generate the preview and the files, without keeping it. Pro members can save a project as JSON (photos included) and import it on another device.
The discovery version keeps 1 project; Pro keeps 30.
Common problems
- “Browser storage is full”.
- Browsers keep about 5 MB per site. Remove some photos, delete an old project, or export it as JSON before deleting it.
- The form does not appear on the site.
- In form mode you need the Formspree ID (4 to 20 letters and digits). Without it, the contact section only shows your details.
- Menu links go nowhere in the preview.
- The preview shows one page at a time: use the Home, Legal notice and 404 page tabs. On the live site every link works.
- The sitemap is not in the ZIP.
- It needs full addresses: enter the domain name in the Brief and export again.
- A photo added by URL has disappeared.
- The original website removed it. Upload your files instead: they are stored in the ZIP.
- The AI says “invalid key”.
- Check that the chosen provider matches your key, then test it again. Free keys are limited to a few requests per minute.
- I can't find my project.
- Check you are using the same computer, browser and account.
Another question? Write to us, we reply quickly. See the Pro price →