Vefskólinn · The Fundamentals
You describe. It builds. You decide.
press → to begin
then we install it together.
The rule
You have always been allowed to use AI.
From this guide on, you are required to.
And for the first time, we teach you how.
no more sneaking. it's the job now.
Know what you want before you ask. Pages, content, breakpoints, what “done” means.
Tell the assistant precisely. Give it the design. Correct it when it drifts.
Run it. Resize it. Compare it to the design. Ask why when the code and the browser disagree.
The assistant types. You specify, direct and verify. That is what a developer is now.
Use an agent for this guide. Chat is the fallback when you run out of tokens.
Any assistant is allowed. These three get the best support.
Anthropic · Smári uses this
npm i -g @anthropic-ai/claude-code
Terminal agent. Also in VS Code.
OpenAI · Jakub uses this
npm i -g @openai/codex
Terminal agent. Also in VS Code.
GitHub · free with the student pack
VS Code → Extensions → Copilot
Agent mode inside VS Code.
Recommendation: one basic subscription. If you cannot, the next slide is for you.
Copilot free for verified students, plus JetBrains, cloud credits and more. You are enrolled at an accredited school, so you qualify.
education.github.com/pack
A free year for students in 140+ countries until the end of 2026. Check whether Iceland is on the list.
OpenAI's student offer is US only. Anthropic has no student discount. Both have free tiers that run out fast.
Expect to hit a limit mid-task. Save your work, switch tool, keep going. That is normal, not failure.
a subscription costs less than the coffee you'll drink debugging without it.
> make me a website for a coffee shop
> Build the two pages in design.png (home, menu) as a static site
using Tailwind. Match the layout, colours and type sizes in the design.
Mobile-first: one column under 768px, the three-card grid above it.
Use semantic HTML and make every link reachable with the keyboard.
When you are done, tell me how to run it locally.
📎 Give it the design. A screenshot or Figma export beats any description.
📏 Name the constraints. Framework, breakpoints, pages, accessibility.
🏁 Say what “done” is. Otherwise it decides for you.
❓ Ask “why”. Not just “what”. The explanation is the lesson.
The project
Step 1
Utility classes in your HTML. md:grid-cols-3 and done. The most common choice today.
CSS with variables, nesting and mixins. Not a framework, a preprocessor. Ask the AI why that matters.
Ready-made components and a 12-column grid. The classic. Everything looks like Bootstrap unless you fight it.
Copy-in components built on Tailwind and React. Modern, but you will need a build step.
Bulma, UnoCSS, Open Props, plain CSS with custom properties. Ask the AI what it would pick and why.
> I have a two-page design (attached). Explain the difference between Tailwind, Sass,
Bootstrap and shadcn for a beginner, and recommend two of them for this design. Explain why.
Step 2
tailwind/, sass/…The AI writes every line.
You do not fix things by hand. You describe what is wrong and let it fix them. Directing is the skill.
(yes, even the one-character typo.)
Step 3
<div class="grid grid-cols-1
md:grid-cols-3">.cards { display: grid; }
@media (min-width: 768px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}Same behaviour, two very different places in the code. Find it in both of yours.
When the browser disagrees with the code, ask: “why does it look like this?”
Step 4
Where is the responsiveness controlled in each version? Show me the exact lines.
Compare this to my design. List three differences and fix one.
What would have to change to move this from framework A to framework B?
Can I use this page with only the keyboard? Prove it.
Pick anything you find interesting. “What does this do and why is it here?”
Which of the two took more prompts to get right? Why?
Every answer goes on your teaching site, linked to the lines in each build.
Step 5
the AI's comparison from step 1
snippets from both, with links to the lines
and which one got fixed
your curious questions, answered
📖 The AI generates it. One page, every question you asked, every answer it gave.
🔗 Links to all builds. Every explanation points at the exact code in each version.
👀 Made for your reviewers. They use a different AI. Review two classmates and you have three explanations of the same thing.
your own textbook, written for you.
Hand-in
the AI writes. you judge.
Right now, together
Claude Code, Codex or Copilot. Apply for the student pack while you wait.
npm i -g @anthropic-ai/claude-code
claude
# or
npm i -g @openai/codex
codexIn an empty folder, ask it to create index.html with your name in it. Open the file. It wrote it.
Nobody leaves until their agent has written one file.
You describe. It builds. You decide.
good code. brighter tomorrows. ☕