Ensimmäinen ohjelmointikieli jonka opettelin oli JavaScript. Tutustumatta silloin yhtään tarkemmin eri koodikielien käyttötarkoituksiin, taikka suosituksiin siitä minkä ohjelmointikielen kanssa kannattaisi vasta-alkajana ensimmäiseksi aloittaa, muistan googlanneeni miltei ensimmäiseksi ‘programming languages to learn in 2020’. JavaScript taisi olla silloin suosituin ohjelmointikieli, joka toimi sekä palvelin- että käyttäjäpuolella.

JavaScriptin ohella harjoittelin myös CSS:n (Cascading Style Sheets) ja HTML:n (Hypertext Markup Language) toimintaa W3School-sivuston, sekä Youtuben kautta. Pian minulla oli kaikki työkalut käytössä jonkin konkreettisen asian koodaamiseen. Mitä jos tekisin omat nettisivut, jotka voisivat toimia portfoliona tulevaisuudessa?

Omat verkkosivut olivat ensimmäinen suurempi ohjelmointiprojektini, johon päätin käyttää paljon aikaa. Vierailin yhteensä tuhansilla eri verkkosivuilla, niin StackOverflown artikkeleissa kuin Youtube-kanavilla, jotka käsittelivät web-ohjelmoinnin tekniikoita ja verkkosivujen rakentamista. Opin nopeasti googlaamaan niin ratkaisuja eri ohjelmointiongelmiin kuin käyttämään myös versionhallintaa, sillä tallensin aina keskeneräisen koodin Githubiin. Näistä molemmista taidoista on minulle vielä tänäkin päivänä hyötyä, jopa nykyisessä työssäni. Myös responsiivisen suunnittelun kulmakivet, sekä erilaiset dynaamisia elementtejä tarjoavat JavaScript-kirjastot tulivat äkkiä tutuiksi. Rakentelin sivuja kaiken kaikkiaan noin vuoden ajan, ja julkaisin ensimmäisen version sivuistani tammikuussa 2023.

Koodaako kukaan enää verkkosivuja?

Ajatus omien nettisivujen koodaamisesta herättää yhä kiinnostusta, ja miksipä ei. Verkkosivut ovat yksi mitä mainioimmista tavoista kehittää ohjelmointiosaamista, sekä nähdä oma käden jälki heti selaimessa. Tekninen tietämys ohjelmoinnista kehittyy koko prosessin ajan, ja web-kehittämisen salat tulevat ihan huomaamattakin tutuiksi. Nettisivujen rakentelun yhteydessä opin käyttämään myös Chrome DevTool -työkalua, joka sittemmin on jäänyt yhdeksi suosikkityökaluksi mm. verkkosivujen sisällön tarkastelemiseen eri laitteilla, sekä elementtien latautumiseen kuluvien nopeuksien analysoimiseen.

Koodaaminen tarjoaa vapaat kädet oikeastaan kaikkeen, ja erilaisten toiminnallisuuksien rakentaminen ja suunnittelu ovat lopulta ainoastaan omasta kiinnostuksesta ja ohjelmointitaidoista riippuvainen. Tekoälyn yleistyttyä kenenkään ei tarvitse lähteä liikkeelle enää täysin nollasta, vaan prompteja esimerkiksi valmiin lomakepohjan tai painikkeiden koodaamiseen voi antaa vaikkapa ChatGPT:lle. Nettisivut ovat ehdottomasti yksi motivoivimmista projekteista niille, jotka nauttivat koodauksesta ja haluavat jatkuvasti kehittää omia taitojaan.

Monet suosivat kuitenkin tänä päivänä valmiita low code / no code -alustoja, jotka ovat tehneet verkkosivujen luomisesta huomattavasti nopeampaa ja helpompaa, eikä ohjelmointiosaamista alustoilla tarvita välttämättä lainkaan. Verkkosivualustojen avulla voit luoda erilaisia sivuja käyttäen visuaalisia työkaluja, vetämällä ja pudottamalla elementtejä, sekä määrittelemällä toiminnallisuuksia: ilman että koodaisit riviäkään. Alustat ovat nopeuttaneet verkkosivujen kehittämistä huomattavasti, ja harva koodaa pienempiäkään nettisivuja tyhjästä nyhjäisten enää tänä päivänä.

Staattinen vai dynaaminen verkkosivu?

Kun puhutaan verkkosivuista, käsitteet staattinen- ja dynaaminen sivu nousevat esille. Suunnitellessasi ensimmäisiä verkkosivujasi, on hyvä miettiä alkuun mm. seuraavia kysymyksiä:

Mikä on sivujesi tarkoitus?

Kenties hyvin simppeli, staattinen portfolio työnhakuun, vai ehkäpä blogi kommentointimahdollisuudella tai uutiskirjeiden lähettäminen tilaaville asiakkaille?

Millaisia toiminnallisuuksia haluaisit sivuille?

Olisiko sivustolla vierailijoiden mahdollista kommentoida vaikkapa julkaisemiasi artikkeleita, tai ottaisivatko lukijat sinuun yhteyttä suoraan sähköpostilla vai reaktiivisen lomakkeen kautta?

Kuinka usein päivittäisit verkkosivujasi, ja niiden sisältöä?

Päivittäisitkö sivuja mahdollisimman usein, vai harvemmin?

Staattisella verkkosivulla tarkoitetaan yksinkertaisimmillaan tiedostoa palvelimella. Tiedoston sisältö ei muutu, ellei sitä muuteta erikseen palvelimelta. Staattinen verkkosivu muodostuu usein pelkistetystä HTML-koodista, sisältäen mahdollisesti myös muita web-tekniikoita. Ennen hyvin yksinkertaisena pidetyt staattiset nettisivut ovat kehittyneet tähän päivään mennessä huimasti, ja ne taipuvat yhä loistavasti esimerkiksi pienyrityksen esittelysivuksi tai portfolioksi. Staattisille sivuille voidaan helposti rakentaa dynaamisia elementtejä esimerkiksi JavaScriptin avulla.

Staattiset sivut ovat lähes aina turvallisin vaihtoehto, sillä ne eivät ole alttiita verkkohyökkäyksille. Sivulla olevat elementit latautuvat myös huomattavasti nopeammin verrattuna dynaamisiin sivuihin. Verkkosivut eivät myöskään tarvitse säännöllistä ‘huoltoa’, ellet itse päätä tehdä muutoksia vaikkapa sivun ulkoasuun.

Staattisten sivujen kanssa et ole sidottu tiettyyn muottiin: vain taivas on rajana sille, mitä voit rakentaa!

Dynaaminen verkkosivu viittaa verkkosivustoon, jonka sisältö muuttuu tai generoituu käyttäjän toiminnan tai muiden tekijöiden perusteella. Hyviä esimerkkejä dynaamisista verkkosivuista ovat esimerkiksi hakukoneet, verkkokaupat ja monimutkaisemmat sovellukset, jotka tarjoavat personoituja sisältökokemuksia käyttäjille. Myös muutaman minuutin välein päivittyvät uutissivustot ovat dynaamisia verkkosivuja.

Dynaamiset verkkosivut mahdollistavat interaktiivisuuden ja reagoinnin käyttäjän tarpeisiin, mikä parantaa toki huomattavasti sivuilla vierailevan käyttäjäkokemusta. Siksi dynaamiset verkkosivut ovat usein rakennettu jonkin sisällönhallintajärjestelmän (eng. Content Management System) päälle. Dynaaminen sivu myös helpottaa tietojen hallintaa sekä niiden päivittämistä, koska sisältö voidaan generoida automaattisesti tietokantojen tai muiden tietolähteiden perusteella.

Valitse sopivin verkkosivualusta

Verkkosivualustoja löytyy markkinoilta tänä päivänä useampia, ja ne taipuvat ominaisuuksiltaan hieman eri tarkoituksiin. Alustat mahdollistavat verkkosivujen suunnittelun, rakentamisen ja ylläpidon ilman (syvällistä) koodausosaamista, ja tarjoavat käyttäjille helpon tavan hallita verkkosivuja käyttöliittymän kautta. Eri alustoja käytetään laajasti niin yritysten kuin yksityishenkilöiden toimesta verkkosivustojen luomiseen. Henkilökohtaiset blogit, yrityssivustot, portfolio-sivustot tai verkkokaupat. You name it!

Tässä muutama suosituimmista verkkosivualustoista:

Squarespace on tunnettu helppokäyttöisen käyttöliittymästään, sekä tyylikkäistä templaateista (mallipohjista), joita voit muokata haluamasi mukaan. Alusta mahdollistaa sivuston tyylielementtien säätämisen tarvittaessa CSS:n avulla, ja integroidut työkalut mahdollistavat myös verkkokaupan, blogin tai vaikkapa valokuvagallerian perustamisen. Saat kaikki tarvittavat lisäosat saman palveluntarjoajan alta, mikä on kätevää!

Webflow antaa enemmän vapautta suunnittelussa ja mahdollistaa hieman monimutkaisempien interaktioiden ja animaatioiden lisäämisen sivuille. Koodaustaidoista on Webflow:n parissa myös hyötyä, sillä HTML ja CSS lisäksi voit lisätä sivuillesi omaa JavaScript-koodia. Webflow kasvattaa suosiotaan markkinoilla jatkuvasti, ja alustan käyttäjillä onkin hyvin aktiivinen käyttäjäyhteisö. Jos sinulta löytyy hieman ohjelmointiosaamista, ja haluaisit käyttää sitä hyödyksi verkkosivujesi rakentamisessa, Webflow on varmasti hyvä valinta!

WordPress on monipuolinen ja skaalautuva, ja samalla myös tunnetuin verkkosivualusta jo useampien vuosikymmenien takaa. WordPress on avoimen lähdekoodin alusta: järjestelmä on kenen tahansa ladattavissa, ja muokattavissa ilmaiseksi. Sivujen rakentaminen maksaa edullisimmillaan 0 euroa (pl. palvelintilan ja verkkotunnuksen hankintakustannukset), ja alustalla on myös muutamia ilmaisia teemoja jotka ovat kaikkien käytettävissä. Wordpress tarjoaa lähes rajattomat mahdollisuudet minkä tahansa sivun pystyttämiselle, joten jos haluat saada kaikki irti tästä alustasta, koodaustaidoista on varmasti apua!

Kuinka rakensin omat verkkosivut?

Nykyiset verkkosivut olen rakentanut leikkaa ja liimaa -periaatteella Squarespacen avulla - yhdessä kuukaudessa. Squarespace tarjosi nopean ja vaivattoman tavan luoda yksinkertaiset mutta tyylikkäät sivut, joihin myös pitkään mielessä pyörineen blogin yhdistäminen oli mahdollista. CSS:n ja HTML:n avulla pienien muutosten tekeminen ulkoasuun onnistui mutkattomasti, ja alustan oma SEO-opas toi paljon lisäarvoa hakukoneoptimointiin.

Nettisivujen luominen ei ole koskaan ollut helpompaa kuin mitä tänä päivänä, ja valinnanvaraa eri alustoilla ja ulkoasuilla riittää runsaasti. Riippumatta siitä, haluatko näyttää osaamisesi portfolio-sivustolla, vai kenties luoda henkilökohtaisen blogin, on tärkeää harkita omia tarpeitasi. Netti on täynnä lukuisia eri artikkeleita, videoita, sekä foorumeita, joiden avulla onnistut varmasti.

Mikäli suunnittelet oman verkkosivusi rakentamista, ja kaipaat lisätietoa tai inspiraatiota, olen luonut GitHub-repositorion, joka sisältää eri väripaletteja, fontteja ja muita hyödyllisiä resursseja, joista voi olla apua projektisi parissa, sekä web-kehittämisen perustyökalujen (HTML, CSS, JavaScript) oppimisessa. Ei pidä myöskään unohtaa Pinterestiä, josta löytyy lukuisia eri ideoita ja teemoja erilaisten verkkosivujen ulkoasuun.

PS. lähetä minulle pull request GitHubissa, niin lisään suosikkisivusi myös repositorioon!