Pannukakku:

- HTML/CSS rungon rakentelua, linkitys CSS tiedostoon.
- Semanttiset tagit haltuun ja tekstin kirjoitus niiden sisälle (header, main, section, footer).
- Kuvatiedoston lisääminen sivulle.
- Lista-elementeillä harjoittelua.

Ajanvarauslomake:

• <form>: lomake-elementti, joka ympäröi kaikki lomakkeen osat
• <label>: käytetty kenttien nimien määrittelyyn
• <input>: tekstikentät sähköpostille ja päivämäärälle sekä valintaruudut ajalle
• <select> ja <option>: luotu valintalista ja sen vaihtoehdot
• attribuutit: oikeat tietotyypit kullekin kentälle, esimerkiksi <input sähköpostille type="email"> ja päivämäärälle type="date">

- Kentät asetettiin pakolliseksi lomakkeen lähettämiseen (reguired) ja luotiin "Lähetä-nappi" <input type="submit">.
- Form-tagista jätettiin action-attribuutti pois, jotta selaimen osoitekentästä näkyy lähetettävät tiedot.
- Kaikki tiedot tallentuivat osoitekenttään, vaikka niitä ei oikeasti palvelimelle lähetettykään.

Kirpputaulu:

- Tehtävän aloitin piirtämällä GIMP:llä "hienon" kirppu kuvan. Ei niinkään se kuvan ulkonäkö vaan miten eli kuva kokoa 100 x 100 px ja läpinäkyvä tausta (transparent) ja kuva .png muotoon.
  HTML & CSS:

• <table>: luotiin kirpputaulu-luokalla ja sen sisältö rakennettiin käyttämällä <tr> ja <td>-elementtejä.
  Taulukon yläosa sisältää rivin, jossa on yksi otsikkosolu <th>, joka yhdistää neljä saraketta colspan="4"
• kaksi sisältöriviä määriteltiin, joissa vuorottelevat tekstit ja kuvat, kummassakin neljä solua
• otsikkosolujen <th> tyylit määriteltiin, kuten reunat, taustavärit, tekstin koot ja värit, sekä korkeus
• sisältösolujen .flea-luokka tyylit määriteltiin, kuten reunat, taustavärit, tekstin koot ja värit, sekä korkeus
• parittomille ja parillisille soluille määriteltiin erilaiset taustavärit ja tekstin värit käyttämällä nth-child -valitsinta

Parkkipaikka:

- Sivuston rakenne suunniteltiin semanttisesti ja tyylikkäästi HTML:n ja CSS:n avulla. HTML-puolella luotiin otsikko, navigointipalkki, parkkipaikkataulukko, takaisin-linkki ja alatunniste.
- Navigointilinkit asetettiin lohkoelementeiksi ja taulukko keskitettiin. CSS:llä määriteltiin perusasetukset, kuten fontit, marginaalit ja taustavärit.
- Otsikolle, navigointipalkille, taulukolle ja alatunnisteelle asetettiin erilliset tyylit, jotka sisälsivät värityksiä, marginaaleja ja reunaviivoja.
- Takaisin-linkille lisättiin hover-efekti ja pyöristetyt kulmat. Lopuksi, CSS:llä parannettiin sivun ulkoasua ja käytettävyyttä eri näyttöleveyksillä.

Semanttiset tagit:

- Tehtävässä luotiin HTML-sivu, joka käytti semanttisia HTML5-tägejä sivun rakenteen määrittämiseen. Tehtävän tarkoituksena oli hahmottaa sivun eri osioiden käyttötarkoitusta ja niiden sijoittumista sivulla.
- HTML-rungolle asetettiin korkeus 100%, jotta sivu täyttäisi koko selainikkunan.
- Semanttisten tägien korkeutta ja leveyttä määriteltiin prosentuaalisesti ja sijoittumista float:
- CSS-tyylit määriteltiin eri osioille, mukaan lukien taustavärit, reunat ja fontit.
- Lisäksi sivulle lisättiin hover-efekti navigointilinkkiin parantamaan käytettävyyttä.
- Sivuston ulkoasu suunniteltiin responsiiviseksi varmistamaan, että se näyttää hyvältä eri näyttölaitteilla.

Navigointi:

- Tässä harjoituksessa tehtävänä oli luoda HTML-sivu, jossa on useita navigointivalikoita ja harjoitella niiden sijoittelua taulukoiden avulla.

• luotiin vaakasuoria valikoita käyttämällä epäjärjestettyä listaa <ul> ja listan osia <li>
• jokaiseen listan osaan lisättiin linkki <a>
• vaakasuorissa valikoissa linkit kellutettiin vasemmalle ja niille annettiin yhtenäinen leveys ja reunus
• pystysuorassa valikossa listan osat (linkit) asetettiin pystysuoraan näyttötilalla display: list-item;
• linkkien pseudovalitsimen :hover -tilan harjoittelua

• yleisin hover-efekti on värin muutos, kuten tekstin tai taustan värin vaihtaminen,
  tämä antaa käyttäjälle selkeän vihjeen siitä, että elementti on vuorovaikutteinen
• voidaan lisätä tai muuttaa reunuksia tai varjoja hover-tilassa, mikä luo syvyysvaikutelman ja tekee elementistä erottuvamman.
  
• siirtymät (transitions) tekevät hover-efektistä sujuvamman lisäämällä viiveen tai animaation. Tämä parantaa visuaalista vaikutelmaa.
• voidaan muuttaa elementin kokoa, muuttaa sen muotoa tai pyöristää sen kulmia hover-tilassa
• tässä muutamia esimerkkejä lukemattomista mahdollisuuksista:
  
  a {
   color: white;
   background-color: black;
   padding: 0.5em 0.6em;
   border: 2px solid blue;
  }
  
  a:hover {
   background-color: white; /* Muuttaa taustavärin */
   color: black; /* Voidaan muuttaa myös tekstin väriä */
   box-shadow: 2px 2px 5px gray; /* Lisää varjon */
   transition: background-color 0.3s ease, color 0.3s ease; /* Lisää sujuvan siirtymän */
   transform: scale(1.1); /* Suurentaa elementtiä hieman */
   opacity: 0.8; /* Muuttaa läpinäkyvyyttä */
   cursor: pointer; /* Muuttaa osoittimen ulkoasun */
   filter: brightness(0.5); /* Himmentää taustaa */
   transform: rotate(10deg); /* Kallistaa elementtiä */
   text-decoration: underline; /* Alleviivaa tekstin */
  }

Värilaatikot:

- Tässä harjoituksessa keskityttiin CSS:n käyttöön eriväristen (Flat UI) laatikoiden luomiseksi ja asettelemiseksi verkkosivulle.
- Värilaatikot luotiin <div class=""> -luokilla ja laatikot sijoitettiin vierekkäin käyttämällä float: left; -ominaisuutta.
- Värilaatikot saivat määritetyn prosenttiarvon leveyttä ja korkeutta.
- Laatikoiden otsikot keskitettiin text-align: center;
- Flat UI -värit ovat osa minimalistista suunnittelutyyliä, jossa käytetään selkeitä, vahvoja värejä ilman gradientteja tai varjostuksia.
- Flat UI -värit ovat tehokas työkalu verkkosuunnittelussa, koska ne tarjoavat visuaalista selkeyttä ja houkuttelevuutta.

• Flat UI -värit ovat selkeitä ja puhtaita, mikä helpottaa käyttöliittymän ymmärtämistä ja navigointia
• Ne antavat sivulle modernin ja ammattimaisen ilmeen
• Voimakkaat värit tarjoavat hyvän kontrastin, mikä parantaa tekstin luettavuutta ja korostaa tärkeitä elementtejä

Taulukkoharjoitus:

Tässä taulukko-harjoituksessa harjoiteltiin seuraavia keskeisiä asioita:

- Kaikkien näiden ominaisuuksien myötä opittiin kuinka HTML-taulukoita voidaan käyttää tietojen järjestämiseen ja kuinka CSS:llä voidaan parantaa taulukoiden visuaalista esitystä ja luettavuutta.

Bootstrap harjoituksia:

1. RESPONSIIVINEN NAVIGOINTIPALKKI (RESPONSIVE NAVBAR)

Bootstrapin responsiivinen navigointipalkki tarjoaa joustavan ja helppokäyttöisen tavan luoda verkkosivustoille yläosassa sijaitseva valikko, joka mukautuu automaattisesti eri näyttölaitteiden kokoihin. Se sisältää navigointilinkit, logo-osion ja tarvittaessa ponnahdusvalikon pienemmille näytöille. Lisäksi navigointipalkki voidaan kiinnittää sivun yläosaan, ja se tarjoaa valmiita tyylejä ja toiminnallisuuksia Bootstrapin avulla.



Harjoituksessa luodaan kiinnitetty navigointipalkki sivun ylälaitaan, joka laajenee suuremmilla näytöillä ja pienemmillä näytöillä näytetään toggler-nappi, jolla navigointilinkit voidaan avata tai sulkea.

Luokat mitä käytettiin: navbar, navbar-light, bg-light, navbar-expand-lg, fixed-top, navbar-toggler, collapse, navbar-collapse, navbar-nav, nav-link

2. SARAKKEET (COLUMNS)

Bootstrapin sarakkeita käytetään luomaan joustavia ja responsiivisia asetteluja verkkosivuille. Ne mahdollistavat sisällön jakamisen useisiin osiin, jotka mukautuvat näyttölaitteen koon mukaan. Tämä mahdollistaa paremman käyttäjäkokemuksen eri laitteilla, kuten tietokoneilla, tableteilla ja älypuhelimilla. Lisäksi sarakkeita voidaan käyttää asettelemaan sisältöä monipuolisesti, kuten esimerkiksi kahden sarakkeen avulla luodaan rinnakkaisia elementtejä tai käyttämällä eri leveyksiä ja sarakkeiden siirtelyllä luodaan monipuolisia asetteluja.

Luokat mitä käytettiin: container, row & row no-gutters, col-luokat esim. (col-4, col-8, col-sm-2, col-sm-6) offset-sm-3

3. MODALS (MODAALIT)

Bootstrapin modaalilla voi luoda monenlaisia käyttöliittymäelementtejä, jotka esittävät sisältöä ponnahdusikkunoissa. Modaalit ovat hyödyllisiä esimerkiksi vahvistusikkunoina, lomakkeiden näyttämisessä, tärkeiden ilmoitusten esittämisessä ja gallerioiden luomisessa. Ne mahdollistavat lisätietojen, interaktiivisten elementtien ja muiden sisältöjen esittämisen ilman, että käyttäjä poistuu nykyiseltä sivulta.

Luokat mitä käytettiin: btn btn-primary, modal fade, modal-dialog, modal-content, modal-header, modal-title, close, modal-body, modal-footer

4. FORMS (LOMAKKEET)

Bootstrapin lomakkeilla voi luoda monipuolisia ja responsiivisia käyttöliittymäelementtejä käyttäjätietojen syöttämiseen. Bootstrapin tarjoamat luokat ja komponentit helpottavat erilaisten lomakekenttien, kuten tekstikenttien, valintaruutujen, painikkeiden ja pudotusvalikkojen, tyylittelyä ja asettelua. Näiden avulla voi rakentaa helposti käytettäviä ja esteettömiä lomakkeita, jotka mukautuvat eri näyttökokoihin.

Luokat mitä käytettiin: form-group row, col-sm-3 col-form-label, col-sm-9, form-control, btn btn-primary

5. LIST GROUPS (LISTARYHMÄT)

Bootstrapin listaryhmillä voi luoda tyylikkäitä ja järjestettyjä luetteloita. List group -komponentti tarjoaa erilaisia tapoja järjestää ja esittää tietoja luettelomuodossa, kuten linkkiluetteloita, painikeluetteloita ja kontekstuaalisesti tyyliteltyjä luetteloita. Näiden avulla voi luoda selkeitä ja käyttäjäystävällisiä listoja, jotka mukautuvat eri näyttökokoihin ja tarjoavat intuitiivisen käyttökokemuksen.



Lisäksi badge-luokkaa voidaan käyttää korostamaan tiettyjä luettelon osia, kuten lukumääriä tai ilmoituksia, pienillä merkinnöillä, jotka ovat visuaalisesti erottuvia ja helppoja huomata. Tämä tekee luetteloista informatiivisempia ja käyttökelpoisempia.

Luokat mitä käytettiin: list-group, list-group-item, list-group-item-action, d-flex justify-content-between align-items-center, badge badge-primary badge-pill

6. CARDS (KORTIT)

Bootstrapin korteilla voi luoda monipuolisia ja mukautuvia sisältölohkoja, jotka esittävät tietoa korttimuodossa. Kortit tarjoavat yhdenmukaisen ja tyylikkään tavan järjestää ja esittää erilaisia tietoja, kuten tekstiä, kuvia ja linkkejä, samassa elementissä. Näiden avulla voidaan luoda selkeitä ja käyttäjäystävällisiä asetteluja, jotka mukautuvat erilaisiin näyttökokoihin. Kortit ovat erittäin joustavia ja niitä voi yhdistellä eri tavoin, kuten luomalla korttiryhmiä tai pinoamalla kortteja päällekkäin.

Luokat mitä käytettiin: card, card-img-top, card-body, card-title, card-text, list-group list-group-flush, list-group-item, card-link, btn btn-primary, btn btn-default

7. TABLES (TAULUKOT)

Bootstrapin taulukoilla voi luoda tyylikkäitä ja responsiivisia taulukoita, jotka esittävät tietoa selkeässä ja jäsennellyssä muodossa. Bootstrap tarjoaa valmiita luokkia, joiden avulla taulukot voidaan muotoilla helposti ja nopeasti. Näitä luokkia käyttämällä taulukoista tulee visuaalisesti yhtenäisiä ja mukautuvia eri näyttökokoihin.

Luokat mitä käytettiin: table, table-bordered, table-hovered, thead-light, thead-dark, table-striped, table-sm, table-primary, table-warning, table-danger, table-success

8. NAVIGATION OPTIONS (NAVIGOINTIVAIHTOEHDOT)

Bootstrapin navigointivaihtoehdoilla voi luoda monipuolisia ja responsiivisia navigointikomponentteja, kuten navigointipalkkeja ja välilehtiä. Nämä komponentit auttavat käyttäjiä liikkumaan sivustolla helposti ja intuitiivisesti. Bootstrapin navigointivaihtoehdot tarjoavat selkeän ja mukautuvan tavan järjestää ja esittää sivuston navigointilinkkejä, tehden käyttäjäkokemuksesta sujuvan ja tehokkaan eri näyttölaitteilla.



Bootstrapin tarjoamat luokat tekevät navigointielementtien luomisesta ja muotoilusta yksinkertaista.

Luokat mitä käytettiin: nav, nav-tabs, nav-item, nav-link, disabled, active, nav-item dropdown, dropdown-toggle, dropdown-menu, dropdown-item

9. ALERTS (VAROITUSVIESTIT)

Bootstrapin alerts-viestejä käytetään huomion kiinnittämiseen tärkeisiin ilmoituksiin, varoituksiin tai informaatioon. Niillä voi näyttää erilaisia viestejä, kuten onnistumisilmoituksia, virhevaroituksia, informatiivisia viestejä ja huomautuksia käyttäjille. Alerts-viestejä voi helposti muokata ja niihin voi sisällyttää sulkunappeja, jotta käyttäjä voi sulkea viestin tarvittaessa.



Bootstrapin tarjoamat luokat tekevät varoitusviestien lisäämisestä ja muotoilusta yksinkertaista, ja viesteihin voidaan lisätä erilaisia tyylejä ja sisältöä tarpeen mukaan.

Luokat mitä käytettiin: alert, alert-primary, alert-secondary, alert-success, alert-danger, alert-warning, alert-info, alert-light, alert-dark, alert-heading, mb-0, close, data-dismiss

Oma sivusto (etusivu)

Tämä oma sivustoni on ensimmäinen isompi projektini webbisivujen rakentamisessa, enkä ennen ole tehnyt mitään tämän kokoluokan projektia, jossa koodia on lähemmäs 2000 riviä. Kun ryhdyin luomaan omaa verkkosivustoa, päätin hyödyntää kaikkea oppimaani monipuolisesti. Yhdistelin rakenteessa ja tyylittelyssä "vanhan liiton meininkiä" ja käytin myös uusia kehittyneitä tekniikoita sivuston rakentamisessa. Sivuston tyylissä ei haettu täysin yhdenmukaista linjaa niinkuin sivustoille on tyypillistä vaan halusin myös kokeilla erilaisia tyylejä esimerkiksi teksteissä.

Oppimisessa ja sivuston rakentamisessa on myös saatettu hieman hyödyntää tekoälyn tarjoamia mahdollisuuksia (OpenAI - ChatGPT, Copilot ja Gemini), joista on tullut minulle merkittävä työkalu oppimisen ja tehokkuuden parantamiseksi.

Olin aikaisemmin suorittanut mm. General Assembly Dash ja Sololearn HTML&CSS verkkokursseja. Sivuston luomisen aikana opettelin Bootstrapia "Scrimban - Learn Bootstrap" ja Youtuben "Bootstrap CSS Framework - Full Course for Beginners" avulla. Olin myös tehnyt joitakin harjoituksia Itslearning kurssialustalta ja kikkaillut hieman omien pienempien projektien parissa.

Sivuston muut harjoitukset tarjosi oppilaitokseni Hyria Koulutus Oy ja siitä erityiskiitokset kouluttajilleni Sirpalle & Teemulle! 💡🧑‍🎓🙏

Sivuston rakentamisessa on ensiarvoisen tärkeää kiinnittää huomiota responsiivisuuteen. Responsiivisuus varmistaa, että sivusto näyttää ja toimii optimaalisesti erilaisilla näyttölaitteilla, kuten tietokoneilla, älypuhelimilla ja tableteilla. Tämän tavoitteen saavuttamiseksi on monia keinoja, mutta yksi hyödyllinen työkalu on sivusto nimeltä Responsive Design Checker, jota aion hyödyntää sivustoni responsiivisuuden parantamiseksi. Kyseinen sivusto mahdollistaa sivuston esikatselun eri näyttölaitteilla, jotta voit havainnollistaa, miten sivustosi sopeutuu erilaisiin käyttöympäristöihin.

Koodin validointi on keskeinen osa verkkosivustojen kehitystä ja ylläpitoa. Sen avulla varmistetaan, että HTML- ja CSS-koodi noudattavat web-standardien määrittämiä sääntöjä ja parhaita käytäntöjä. Yksi tunnetuimmista työkaluista tähän tarkoitukseen on W3C Markup Validation Service ja sitä käytin sivustoni HTML&CSS koodin validoinnissa.

Kehittäjän työkalut (esimerkiksi Google Chrome ‑kehittäjätyökalut) ovat myös olennainen osa sivuston suunnittelua ja kehitystä. Niiden avulla voit varmistaa, että sivustosi toimii optimaalisesti ja tarjoaa käyttäjille parhaan mahdollisen kokemuksen. Sitä voi käyttää edellä mainittujen responsiivisuuden ja validoinnin tarkistamiseen sekä sivuston rakenteen hahmottamiseen. Työkalut tarjoavat myös mahdollisuuden suorituskyvyn analysointiin. Voit tarkistaa sivuston latausajat, resurssien käytön ja muut suorituskykyyn liittyvät näkökohdat, jotta voit optimoida sivuston nopeuden ja tehokkuuden. Kehittäjän työkalujen hyödyntämisessä minulla on vielä paljon opittavaa.

Sitten sivuston julkaisemiseen GitHubiin ja sivustolle oman URL-osoitteen saamiseen, joka edellyttää monia vaiheita:

Versionhallinnan asettaminen GitHubissa: Luo tili GitHubissa, jos sinulla ei vielä ole sellaista. Sen jälkeen luo uusi repository ("repo") sivustollesi GitHubissa. Tämä toimii versionhallintajärjestelmänä ja mahdollistaa sivuston julkaisemisen GitHub Pagesin kautta.

Sivuston lisääminen repositoryyn: Lataa sivustosi tiedostot GitHub-repoon. Voit tehdä tämän joko lataamalla tiedostot suoraan GitHubin verkkosivustolta tai käyttämällä Git-työkalua komentoriviltä.

GitHub Pagesin käyttöönotto: Mene repositoryn asetuksiin GitHubissa ja etsi "GitHub Pages" -osio. Valitse sieltä lähde, josta GitHub Pages ottaa sivuston tiedostot (yleensä päähaaran nimi, esim. "main" tai "master"). Tallenna asetukset.

URL-osoitteen määrittäminen: GitHub Pages antaa sinulle URL-osoitteen sivustollesi. Se perustuu GitHub-käyttäjänimesi tai organisaatiosi nimeen sekä repositoryn nimeen. Tämän jälkeen sivustosi on saatavilla GitHub Pagesin kautta tässä osoitteessa.

Tarkistus ja julkaisu: Tarkista, että sivustosi näkyy oikein GitHub Pagesin kautta käyttämällä annettua URL-osoitetta. Jos kaikki näyttää hyvältä, sivustosi on nyt julkaistu GitHubiin ja sillä on oma URL-osoite!

Tämän jälkeen kyllästyin siihen, että minun pitää aina erikseen siirtää HTML&CSS tiedostoja GitHubin repoon ja varsinkin sivuston päivittämisen kanssa se on työlästä, joten halusin, että Visual Studio Code synkronoi suoraan tekemäni koodi muutokset GitHubiin.

Näin lyhyesti selitettynä asensin Gitin tietokoneelleni ja määritin settings.json-tiedostoon git.exe-polun. Lisäksi tein tarvittavat muutokset Git-konfiguraatioon terminaalissa. Näiden toimenpiteiden jälkeen Visual Studio Code synkronoi suoraan GitHubin palvelimen kanssa. Nyt näen tekemäni muutokset helposti ja voin vaivattomasti päivittää sivustoani. Sivutuotteena saattoi tulla pieni onnistumisen fiilis!

HTML-, CSS- ja Bootstrap-harjoitus oli erittäin merkittävä oppimisen kannalta, ja sen avulla opin valtavasti sivustojen rakentamisesta ja ylläpidosta. Opin, miten sivustoja hallitaan kehitysympäristössä ja miten niitä optimoidaan parhaan mahdollisen käyttäjäkokemuksen tarjoamiseksi. Opin käyttämään Visual Studio Codea ja GitHubia aivan uudella tavalla ja se helpottaa paljon kehitysprosessia. Tämä kokemus antoi minulle vankan perustan web-kehityksen jatkamiselle ja inspiroi minua syventämään osaamistani entisestään.

Jatkan seuraavaksi Pythonin kurssiani MOOC - Ohjelmoinnin perusteet ja jatkokurssi 2024 sekä suuntaan uusien haasteiden pariin mm. Javascript & jQuery, JSON, SQLite & MySQL, XAMPP, REST Client & Open API, PHP ja React.