Day 1
Learn the basics, then build
Understand how websites work, pick your tools, plan and write great prompts.
DigiCollab · Erasmus+ Workshop
Build a real website with AI — for free
No coding needed. You plan, the AI writes the code, and you check it and make it better. In two short sessions you go from an idea to a real website you can share with anyone.
- 8 short chapters
- 2 workshop days
- Free tools only
The method
The loop: how people really build with AI
AI is fast, but it is not perfect. The secret is a simple loop of six steps. You stay in charge — the AI is your assistant.
- PlanDecide what your site is for, who will visit it and what goes on it. Write it down before you open the AI.
- PromptTell the AI clearly what to build. A prompt is simply the message you type to the AI.
- ReviewOpen the result. Click everything, read every word and check it on your phone.
- FixSomething is wrong? Describe exactly what you see and what you expected. Small things you can fix yourself.
- IterateImprove in small steps — colours, text, a new section. “Iterate” means repeat and improve.
- PublishPut your site online for free and share the link. Then plan your next improvement.
You will go around the amber steps (Prompt → Review → Fix → Iterate) many times. That is normal. Professionals work this way too.
The plan
Your 2-day journey
Two live sessions of about one hour. Read the chapters at your own speed — before, during or after.
Day 2
Make it yours, then publish
Build and edit your own site, understand the code, and put it online.
The guide
All 8 chapters
How the Web Works
What a website really is: HTML, CSS and JavaScript explained with everyday examples.
Your Free AI Toolbox
The best free AI tools right now — what each one is good at, and where the limits are.
Plan Before You Prompt
Turn a vague idea into a short, clear plan that the AI can follow.
Prompt Like a Pro
Write prompts that get great results — with clear goals, details and examples.
Build It Step by Step
Follow one real project, an Erasmus welcome-night page, from first try to polished site.
Understand & Fix the Code
Read code without fear, find what is broken, and ask the AI for the right fix.
Polish & Publish for Free
Make your site look great on phones, then put it online for free.
Use AI Responsibly
Privacy, copyright, honesty and checking the AI’s work — the rules of the game.
Our AI assistant
Meet DigiBot
DigiBot is the AI assistant built into this guide. You just type what you want in normal English — like “make the header purple” or “add a menu section” — and DigiBot writes or changes the code. You see the result right away.
- 🧠 Powered by Mistral AI (Europe)DigiBot uses AI models from Mistral AI, a French company. Codestral, Mistral’s code specialist, writes the code. Ministral, an open-weight model, explains it. “Open-weight” means anyone can download the model and run it on their own computer.
- 🔑 Your own free key — recommendedCreate a free Mistral account (about 10 minutes, 18+) and paste your own API key into the Studio. An API key is a secret code that lets an app use the AI on your account. Mistral’s free plan gives every account $10 of credit per month, with no credit card. So everyone has their own limit, and nobody runs out because of someone else. Your key stays in your browser — it is never sent to our server.
- 🎟️ Or use a class codeNo key yet? Your teacher can give you a class code for the workshop’s shared AI. The whole class shares one budget, so your own key is the better choice.
Free plans change often. The Mistral console always shows your current credit and limits.
Starter templates
What you can build
Over twenty example websites about sustainability, each in its own style, made with plain HTML, CSS and a little JavaScript. Each one comes with a prompt you could use to build something like it. Try the prompt in DigiBot, then change it to fit your own idea.
Loading the examples… If nothing appears, open DigiBot Studio to see them.
About
About this guide
What is DigiCollab?
DigiCollab is a small-scale partnership in vocational education and training (VET). It is co-funded by the European Union through the Erasmus+ programme.
The partners work together to help young people build practical digital skills. This guide is part of the project’s digital-skills activities.
How to use this guide
- Follow the chapters in order, or jump to what you need.
- You don’t need an account to read the guide. Your progress is saved only in this browser.
- New word? Look it up in the Glossary.
- Teachers: press P for presenter mode (bigger text, arrow keys jump between sections).
See our Privacy page to learn how your data is handled.