Websites · Two hours together
Let's make something useful.
A one-page portfolio you can open in your browser.
Same setup, every workshop
Open your workshop folder.
Download OpenCode Desktop, then open your unzipped starter folder in the app.
Download: opencode.ai/download
A small first instruction
Watch the agent take an action.
A useful reply is a start. A visible tool action shows what the agent actually did.
Read brief.md. Tell me what we will make and list the input files. Do not change anything yet.
From brief to website
Describe the page you want.
Give the agent the audience, sections and visual direction.
Read brief.md. Propose a one-page layout and list the files you will create.
Vibe coding
Build the first version.
Let the agent turn your instructions into browser files.
Build index.html and styles.css from brief.md. Use no external libraries, tracking or contact form.
Inspect the result
Open it in a browser.
A preview tells you more than the agent saying it looks good.
Explain how I can open index.html locally and what I should check on the page.
Iteration
Change something specific.
Request one visible improvement and compare the result.
Make the services section easier to scan with three cards. Keep the existing content and save the changes.
Responsive design
Check the small screen.
A useful website should still work on a narrow window.
Check the CSS for a 390-pixel-wide screen. Fix overflowing text or cards without adding a framework.
Save it and check it
Open what you made.
Look at the actual file. What worked, and what did you need to correct?
Keep exploring
Try another kind of work.
Same agent. Different tools, files and possibilities.