Lyra Labs: Verkkosivun luominen ja web-kehityksen alkeet

Lyra Labs: Verkkosivun luominen ja web-kehityksen alkeet

Moduuli 1: Johdanto verkkosivun rakentamiseen

• Mikä on verkkosivu ja miten se toimii?
  Selitys verkkosivujen perusperiaatteista ja niiden toiminnasta internetissä.
• HTML ja CSS perusteet
  Lyhyt johdanto HTML:ään ja CSS:ään sekä niiden rooleihin verkkosivun rakentamisessa.

Moduuli 2: HTML – Verkkosivun rakenne

• HTML-tunnisteet ja niiden käyttö
  Käydään läpi tärkeimmät HTML-tunnisteet, kuten <h1>, <p>, <img>, <a>, ja niiden merkitys verkkosivun rakenteessa.
• Sisällön lisääminen ja muotoilu
  Harjoitellaan tekstin, kuvien ja linkkien lisäämistä sivulle.
• Harjoitus: Ensimmäinen verkkosivu
  Osallistujat luovat yksinkertaisen HTML-sivun, jolla on otsikko, tekstiä ja kuva.

Moduuli 3: CSS – Verkkosivun ulkoasu

• CSS perusteet
  CSS rakenteen ja käyttötapojen selitys.
• Värit, fontit ja tekstin muotoilu
  Miten muuttaa tekstin väriä, fonttia ja tyyliä.
• Asettelun luominen ja muotoilu
  Käydään läpi layoutin perusteet, kuten sivun jako eri osioihin (header, main, footer) ja kuvien asettelu.
• Harjoitus: Verkkosivun tyyli
  Lisätään CSS-tyylit aikaisempaan HTML-sivuun ja parannetaan sen ulkoasua.

Moduuli 4: Verkkosivun visuaalinen suunnittelu

• Hyvän visuaalisen suunnittelun periaatteet
  Väriharmonia, typografia, ja käyttäjäystävällisyys.
• Responsiivisuus ja mobiiliystävällisyys
  Miten suunnitella sivu, joka näyttää hyvältä eri laitteilla.
• Käytännön vinkit verkkosivun suunnitteluun
  Yksinkertaisia vinkkejä ja työkaluja, kuten väri- ja fonttivalinnat sekä layout-suunnittelu.

Moduuli 5: Verkkosivun julkaisu

• Hosting ja verkkotunnukset
  Mitä ovat hosting ja verkkotunnukset, ja miten ne valitaan.
• Ilmaiset julkaisuympäristöt
  Käytännön opastus siihen, miten oma sivu julkaistaan ilmaisilla alustoilla, kuten GitHub Pages tai Netlify.
• Verkkosivun julkaisuohjeet
  Vaiheittainen ohjeistus, miten valmis verkkosivu ladataan verkkoon ja saadaan julkaisukuntoon.

Moduuli 6: Kertaus ja verkkosivun viimeistely

• Sivuston viimeistely ja tarkistus
  Kuinka testata, että sivusto toimii oikein ja näyttää hyvältä eri laitteilla.
• Tietoturva ja päivitykset
  Perusasiat tietoturvasta ja verkkosivun päivittämisestä.
• Loppuprojekti: Oma verkkosivu tai blogi
  Osallistujat kokoavat kaikki oppimansa ja julkaisevat oman verkkosivun tai blogin kurssin päätteeksi.

Jos aihe omien verkkosivujen idea kiehtoo, hyviä ohjesivuja aiheesta antavat mm.

W3Schools, Helppolukuinen ja aloittelijaystävällinen resurssi HTML-, CSS- ja JavaScript-opetukseen. Tarjoaa myös interaktiivisia esimerkkejä.

MDN Web Docs, Mozillan kattava dokumentaatio web-teknologioista. Erinomainen resurssi oppimaan HTML:n, CSS:n ja JavaScriptin perusteita.

CodePen, Interaktiivinen ympäristö, jossa osallistujat voivat kokeilla HTML-, CSS- ja JavaScript-koodia reaaliaikaisesti. Soveltuu hyvin testaukseen ja luovuuden harjoitteluun.

Kannattaa tutustua tarjontaamme muistakin kursseista, kuten Vega Vision, joka auttaa  kuvankäsittelyssä ja antaa rohkeutta julkaisuiden tekemiseen SoMessa niin yksityisen kuin yrityksenkin näkökulmasta. Casiopeia Code keskittyy taas käyttöliittymä- ja käyttäjäkokemussuunnitteluun osana omia verkkosivuja.