Build Your First Website with AI | Participant Resources

Workshop files

Open Oslo Hack Open Oslo Hack + FAQ Download the workshop photo

Project files: first version / version with FAQ. Each ZIP contains the HTML, CSS, JavaScript, and photo.

Oslo Hack is a teaching example, not an announced event. Adapt the content and use photos you have permission to publish.

Build prompt

Build a one-page website called Oslo Hack.
It helps people in Oslo find others to build small projects with.
Use photo.jpg. Colors: #110F17, #FBF7F0, #FF5A2C.
Include navigation, a headline, an intro, Meet / Build / Share, and a footer.
Add a button that shows and hides a short session plan.
Use index.html, style.css, script.js, and photo.jpg. No libraries.
Make it work on a phone. Do not add login, payments, or a database.
First explain your plan and ask about missing information.

After reviewing the plan: Go ahead. Build it and tell me how to preview it.

Check before publishing

The purpose is clear from the headline.
The photo and styles load.
The plan opens and closes.
The page fits a phone without sideways scrolling.
Links and keyboard navigation work.
No passwords, secret keys, or private information are included.

Download the reusable review checklist. This is a plain instruction, not an installed skill. For packaged skills, review the source and use your tool's supported installation process. Vercel's agent skills directory.

Publish on Vercel through GitHub

Create a GitHub repository named oslo-hack.
Unzip the project. Add index.html, style.css, script.js, and photo.jpg at the repository root, not the ZIP itself. Commit the files.
In Vercel, choose New Project, connect GitHub, and import the repository.
For this plain-file example: use Framework Preset Other, override Build Command with an empty value, and set Output Directory to . (project root). A generated framework app needs its own detected framework settings instead.
Choose Deploy and open the deployment URL.
Test it in a private window and on a phone. If access is restricted, review deployment protection before sharing it publicly.

Vercel getting started / Plain-file build settings / Deployment protection.

Alternative: GitHub Pages can also host a static website.

Make a focused change

Add a three-question FAQ below the content.
Each answer opens when clicked.
Keep the headline, photo, colors, and plan button unchanged.
Check phone layout and keyboard access.
Show me which files changed.

Review locally, then commit the changed files to the connected GitHub repository. Vercel creates a new deployment. Open the live URL again and verify the update.

Keep learning

MDN Learn Web Development explains the same HTML, CSS, JavaScript, testing, and publishing ideas in more depth.

oslovibecoding.tech