Ideasta verkkosivuksi: Tekoälyavusteinen koodaus aloittelijoille

1 Asenna OpenCode (työpöytäsovellus)

Käytämme OpenCodea — avoimen lähdekoodin tekoälykoodausagenttia, joka toimii terminaalissa, työpöytäsovelluksena ja IDE-laajennuksissa. Tätä työpajaa varten asenna työpöytäsovellus (beta).

macOS

1. Avaa opencode.ai/download
2. Lataa prosessorillesi sopiva versio (Apple Silicon tai Intel)
3. Avaa asennusohjelma ja vedä OpenCode Ohjelmat-kansioon
4. Salli sovellus ensimmäisellä käynnistyksellä, jos macOS pyytää

Windows

1. Lataussivulta valitse Windows (x64)
2. Suorita asennusohjelma loppuun
3. Käynnistä OpenCode Käynnistä-valikosta

Linux

1. Lataa .deb- tai .rpm-paketti lataussivulta
2. Asenna paketinhallinnalla ja avaa OpenCode

Valinnainen: OpenCode on saatavilla myös terminaalisovelluksena (curl -fsSL https://opencode.ai/install | bash). Työpöytäsovellus riittää tähän työpajaan.

2 Hanki Neuralwatt API-avain

Neuralwatt Cloud tarjoaa OpenAI-yhteensopivan rajapinnan koodausmalleille. Rekisteröityminen on ilmaista — uudet tilit saavat $5 kokeilusaldoa, voimassa 30 päivää.

Luo API-avain

1. Mene osoitteeseen portal.neuralwatt.com/auth/register ja luo tili
2. Kirjaudu portaaliin ja avaa Dashboard → API Keys

3. Napsauta Create Key, anna avaimelle nimi (esim. workshop)

4. Kopioi avain ja säilytä sitä turvallisesti — et näe koko avainta uudelleen

Pidä avain yksityisenä. Älä liitä sitä chattiin, dioihin tai GitHubiin. Kohtele sitä kuten salasanaa.

3 Yhdistä OpenCode Neuralwattiin

Kun OpenCode on asennettu ja sinulla on Neuralwatt API-avain, yhdistä se työpöytäsovelluksessa — konfiguraatiotiedostoja tai ympäristömuuttujia ei tarvita.

OpenCode Desktopissa

1. Avaa OpenCode ja napsauta sivupalkissa asetukset-kuvaketta (ratas)
2. Valitse Server-kohdasta Providers
3. Etsi Neuralwatt ja napsauta sen vieressä olevaa +-painiketta
4. Liitä API-avaimesi ja napsauta Continue
5. Napsauta chattiruudun alapuolella olevaa mallin nimeä (Build-kohdan vieressä), etsi Neuralwatt-kohdasta ja valitse Kimi K2.6 — sitä mallia käytämme tämän päivän työpajassa

Käytä Kimi K2.6-mallia kaikissa tämän päivän harjoituksissa, jotta kaikilla on sama asetus. Voit kokeilla muita Neuralwatt-malleja myöhemmin mallivalitsimesta.

Lisätietoja: Neuralwatt × OpenCode -opas ja OpenCoden palveluntarjoaja-dokumentaatio.

4 Luo GitHub-tili

GitHub on paikka, johon tallennamme tänään rakentamasi verkkosivun. Ilmainen tili riittää — työpajan aikana siirrämme projektisi sinne, jotta voit säilyttää sen ja jakaa sen.

Rekisteröidy

1. Siirry osoitteeseen github.com/signup
2. Syötä sähköpostisi, luo salasana ja valitse käyttäjänimi (tästä tulee osa julkista profiilisi osoitetta)

3. Ratkaise vahvistustehtävä tai syötä GitHubin sähköpostiisi lähettämä koodi
4. Vastaa lyhyisiin aloituskysymyksiin (valinnaiset vaiheet, kuten paketin valinta, voi ohittaa — ilmainen taso riittää)
5. Vahvista sähköpostiosoitteesi, jos GitHub pyytää vahvistamaan sen postilaatikostasi

Onko sinulla jo tili? Kirjaudu osoitteessa github.com/login ja varmista, että muistat käyttäjänimesi ja salasanasi (tai miten kirjaudut Google-/Apple-tilillä).

5 Luo Vercel-tili

Vercel julkaisee sivustosi internetiin ja antaa jaettavan linkin (esim. sinun-sivusi.vercel.app). Ilmainen Hobby-paketti riittää tämän päivän yksisivuiselle sivustolle.

Rekisteröidy (suositus: käytä GitHubia)

1. Siirry osoitteeseen vercel.com/signup
2. Napsauta Continue with GitHub — tämä on helpoin tapa, koska loit GitHub-tilin jo osiossa 4

3. Valtuuta Vercel, kun GitHub kysyy (Vercel tarvitsee luvan lukea repojasi ja julkaista niistä)
4. Viimeistele Vercelin lyhyt aloitus (tiimin nimi voi olla nimesi; ilmainen paketti on oletuksena valittuna)
5. Pitäisi avautua Vercelin Dashboard — olet valmis; julkaisemme sivustosi yhdessä työpajan aikana

Älä liitä salaisuuksia. Neuralwatt API-avain pysyy vain OpenCodessa — älä koskaan tallenna API-avaimia GitHubiin tai verkkosivutiedostoihisi.

6 Kehotteiden kirjoittaminen

Tekoäly toimii parhaiten, kun kirjoitat kuin ohjeistaisit avuliaan tiimikaverin: selkeä tavoite, riittävästi kontekstia ja yksi pyyntö kerrallaan.

Heikko: "Tee verkkosivustostani parempi."
Vahva: "Paranna index.html-tiedoston hero-osaa: isompi otsikko, enemmän väliä, säilytä nykyinen teksti, mobiiliystävällinen."

Vinkki: Suuremmissa ominaisuuksissa vaihda Plan mode -tilaan (Tab-näppäin), tarkista suunnitelma, palaa Build-tilaan ja sano "Jatka.". Pysyt ohjaksissa — lue vastaus, testaa selaimessa ja lähetä seuraava kehote.

7 Esimerkkikehotteet

Valitse yksi polku alta. Kopioi jokainen kehote OpenCodeen järjestyksessä. Korvaa kaikki [hakasulkeissa] olevat tiedot omillasi ennen lähettämistä.

Luo yksisivuinen portfolio-verkkosivusto yhteen tiedostoon: index.html.

Käytä vain HTML:ää ja CSS:ää (ei kehyksiä). Sisällytä nämä osiot:
- Hero-osio nimelläni [Nimesi], lyhyellä iskulauseella [esim. "Aloitteleva web-kehittäjä"] ja ystävällinen kuvapaikka
- Tietoa minusta (3–4 lausetta tästä tiedosta: [liitä lyhyt esittely])
- Taidot (6–8 taitoa tageina tai yksinkertaisena listana: [esim. viestintä, asiakaspalvelu, Canva])
- Projektit (2–3 projektikorttia otsikolla, yhden lauseen kuvauksella ja "Katso" -linkkipaikalla)
- Yhteystiedot (sähköposti [sinun@email.com] ja linkit [LinkedIn / GitHub / valinnainen])

Tyyli: selkeä, moderni, paljon tyhjää tilaa, luettavat fontit, mobiiliystävällinen. Käytä rauhallista väripalettia yhdellä korostusvärillä.

Päivitä index.html oikealla sisällölläni:
- Nimi: [Nimesi]
- Iskulause: [Iskulauseesi]
- Tietoa minusta: [Esittelykappaleesi]
- Taidot: [listaa taitosi]
- Projektit: [Projekti 1 otsikko + kuvaus], [Projekti 2 otsikko + kuvaus]
- Sähköposti: [sinun@email.com]

Säilytä sama asettelu. Paranna typografiaa niin, että otsikot erottuvat ja leipäteksti on helppolukuista.

Paranna index.html:n visuaalista ulkoasua muuttamatta tekstiäni:
- Lisää hienovaraiset hover-efektit painikkeisiin ja projektikortteihin
- Käytä johdonmukaista välistysjärjestelmää (padding/margins)
- Lisää yläreunaan yksinkertainen navigaatiopalkki, joka linkittää jokaiseen osioon (Tietoa, Taidot, Projektit, Yhteystiedot)
- Tee hero-osiosta tervetullut, ei ahdas

Kerro selkokielellä mitä muutit.

Tee index.html:stä hieno puhelimilla:
- Pinota osiot pystysuunnassa mukavalla paddingilla
- Varmista, että teksti on mobiilissa vähintään 16px
- Tee napautuskohteista (linkit, painikkeet) helppoja painaa
- Testaa, ettei mikään ylitä vaakasuunnassa

Selitä mobiiliin lisäämäsi CSS.

[Osion nimi] -osio ei näytä oikealta ruudullani. [Kuvaile mitä näet, esim. "teksti on liian pientä" tai "kortit menevät päällekkäin"].

Tee pienin mahdollinen korjaus. Älä kirjoita koko sivua uudelleen.

Luo yksisivuinen ravintola-verkkosivusto yhteen tiedostoon: index.html.

Käytä vain HTML:ää ja CSS:ää (ei kehyksiä). Ravintolan tiedot:
- Nimi: [Ravintolan nimi]
- Iskulause: [esim. "Tuoretta pastaa ja puu-uunipizzaa keskustassa"]
- Keittiötyyppi: [esim. italialainen, kahvila]
- Osoite: [katu, kaupunki]
- Puhelin: [puhelinnumero]
- Aukioloajat: [esim. ma–la 11–21, su 12–20]

Sisällytä nämä osiot:
1. Hero ravintolan nimellä, iskulauseella ja kahdella painikkeella: "Katso valikko" ja "Soita / Varaa"
2. Tietoa (lämpimät 2–3 lausetta ravintolasta)
3. Valikon kohokohdat (4–6 suosittua annosta lyhyillä kuvauksilla ja hinnoilla valuutassa [valuutta])
4. Aukioloajat ja sijainti (osoite, aukioloajat, upotettu karttapaikka tai "Hae reittiohjeet" -linkki Google Mapsiin)
5. Yhteystiedot ja some (puhelin, sähköposti valinnainen, Instagram/Facebook-paikat)

Tyyli: herkullinen ja luotettava — hyvät ruokakuvapaikat, selkeä typografia, toimii mobiilissa.

Päivitä index.html oikeilla tiedoillamme:

Ravintola: [Ravintolan nimi]
Tietoa: [2–3 lausetta tarinastanne, kokkista tai erikoisuudesta]

Valikkokohteet (käytä näitä tarkalleen):
1. [Annos] — [hinta] — [yhden lauseen kuvaus]
2. [Annos] — [hinta] — [kuvaus]
3. [Annos] — [hinta] — [kuvaus]
4. [Annos] — [hinta] — [kuvaus]
5. [Annos] — [hinta] — [kuvaus]
6. [Annos] — [hinta] — [kuvaus]

Aukioloajat: [aukioloajat]
Osoite: [koko osoite]
Puhelin: [puhelin]
Varausohje: [esim. "Kävelyasiakkaat tervetulleita" tai "Varaa puhelimitse"]

Säilytä yksi sivu. Tee hinnoista helposti luettavia.

Paranna index.html:ää niin, että asiakkaat tietävät mitä tehdä seuraavaksi:
- "Katso valikko" vierittää sujuvasti valikko-osioon
- "Soita / Varaa" käyttää tel:[puhelin], jotta mobiilikäyttäjät voivat soittaa napauttamalla
- Lisää kiinteä tai yläreunan navigaatio: Valikko, Aukioloajat, Sijainti, Yhteystiedot
- Lisää lyhyt rivi [kotiinkuljetus / nouto / ravintolassa syöminen, jos soveltuu]

Älä muuta valikkotekstiämme. Keskity selkeyteen ja toimintakehotuksiin.

Tee ravintolasivustosta premium-tuntuinen ja paikallinen:
- Valitse väripaletti, joka sopii [keittiötyyppiin] (lämpimät sävyt leipomolle, raikkaat vihreät terveelle jne.)
- Käytä laadukkaita kuvapaikkoja hero-osioon ja 2–3 annokseen (placeholder-URL:t käyvät)
- Lisää yksinkertainen alatunniste tekijänoikeuksilla, osoitteella ja toistetuilla aukioloajoilla

Säilytä kaikki sisältö yhdessä index.html-tiedostossa.

Mobiilissa [kuvaile ongelma — esim. "valikon hinnat rivittyvät huonosti" tai "Soita-painike on vaikea napauttaa"].

Korjaa vain tämä ongelma index.html:ssä. Näytä tarkalleen mitä CSS:ää muutit.

Lisää kuva [osion nimi] -osioon. Käytän tätä kuvan URL:ää: [liitä linkki] tai paikkakuvaa. Pidä se responsiivisena ja lisää alt-teksti saavutettavuutta varten.

Selitä index.html yksinkertaisesti aloittelijalle. Mitä kukin pääosa tekee? Mitä minun pitäisi muokata, jos haluan vaihtaa puhelinnumeroni tai valikon hinnan?

Vaihda vain korostusväri arvoon [värin nimi tai hex] ja pääotsikon fonttityyli. Älä muuta asettelua tai kirjoita osioita uudelleen.

8 Työpajan aikana

Hyödylliset OpenCode-komennot

• Settings → Providers — lisää tai vaihda tekoälypalveluntarjoaja (esim. Neuralwatt)
• Model picker (chattiruudun alapuolella) — pitäisi näyttää Kimi K2.6 Neuralwatt-kohdassa tänään
• /init — auttaa OpenCodea ymmärtämään projektisi (aja kerran per kansio)
• /undo — peru viimeisin muutos

Jos jokin menee pieleen

• Todennusvirheet — avaa Settings → Providers → Neuralwatt ja liitä API-avain uudelleen
• Saldo loppunut (Neuralwatt) — tarkista saldo portaalin hallintapaneelista; kokeilusaldo kestää 30 päivää
• Mallia ei löydy — napsauta chattiruudun alapuolella olevaa mallin nimeä, etsi Kimi K2.6 Neuralwatt-kohdasta ja valitse se listasta (älä kirjoita mallitunnuksia käsin)
• Kysy fasilitaattorilta — olemme täällä auttamassa