Koodaamaan oppiminen on aina jännittävää ja hauskaa kaikille, ja kun on kyse ohjelmointimaailmaan astumisesta, useimmat ihmiset aloittavat helpoimmalla HTML- ja CSS-taidoilla. Jokaisen aloittelijan koodausmatka frontendissä alkaa näistä kahdesta perusrakennuspalikasta ja sinun täytyy olla luova, kun on kyse kauniin sovelluksen suunnittelusta.
Aluksi aloittelijat nauttivat painikkeiden tekemisestä, linkkien lisäämisestä, kuvien lisäämisestä, ulkoasun kanssa työskentelystä ja monista hienoista jutuista web-suunnittelussa, mutta kun on kyse projektin tekemisestä pelkällä HTML:llä ja CSS:llä, he juuttuvat jumiin ja ovat hämmentyneitä siitä, mitä heidän pitäisi tehdä harjoittelemaan kaikkia näitä juttuja. Loppujen lopuksi heidän tietämyksensä rajoittuu vain HTML:ään ja CSS:ään. Vaikka kaiken oppimisen jälkeen jossain vaiheessa huomaat, että projektin tekeminen on tärkeää HTML- ja CSS-taitojen harjoittelemiseksi. Sinun on tarkistettava, miten HTML ja CSS toimivat yhdessä kauniin frontend-sovelluksen suunnittelussa. Kysymys kuuluukin, mitä aloittelijalle sopivia projekteja voit rakentaa harjoitellaksesi kaikkea oppimaasi… Keskustellaan siitä.
Tribuuttisivu
Yksinkertaisin verkkosivusto, jonka voit tehdä aloittelijana, on tribuuttisivu jollekin, jota ihailet elämässäsi. Se vaatii vain HTML:n ja CSS:n perustiedot. Tee verkkosivu, jossa kirjoitetaan kyseisestä henkilöstä lisäämällä hänen kuvansa. Lisää verkkosivun yläosaan kuva ja henkilön nimi ja sen alapuolella anna ulkoasu muille yksityiskohdille. Voit käyttää kohtia, luetteloita, linkkejä, kuvia ja CSS:ää antaaksesi sivulle kunnollisen ulkoasun. Lisää verkkosivulle sopiva taustaväri ja kirjasintyyli. Suurimman osan osista voit tehdä HTML:n avulla, mutta voit antaa sille paremman ilmeen käyttämällä hieman CSS:ää. Ota apua alla olevasta linkistä.
- My Tribute Page
- Tribute Page to Steve Jobs
- Tribute Page to Albert Einstein
Websivu, joka sisältää lomakkeen
Lomakkeet ovat aina olennainen osa mitä tahansa projektia ja tulet työskentelemään monien lomakkeiden parissa suurimmassa osassa sovelluksia, joten miksipä et harjoittelisi sitä jo aiemmin ja testaisi tietojasi. Kun olet tutustunut syöttökenttään tai HTML:n perustunnisteisiin lomakkeen luomiseksi, tee projekti, jossa käytät kaikkia näitä tunnisteita. Kuinka käyttää tekstikenttää, valintaruutua, valintapainiketta, päivämäärää ja muita tärkeitä elementtejä yhdessä lomakkeessa. Opit, miten annat verkkosivulle oikean rakenteen, kun luot lomakkeen. HTML/HTML5:n tuntemus riittää, mutta voit käyttää hieman CSS:ää saadaksesi projektista paremman näköisen. Ota apua alla olevista linkeistä.
- Kyselylomake
- Hyvän mielen lomake
- Kyselylomake
Parallaksisivusto
Parallaksisivusto sisältää kiinteitä kuvia taustalla, joita voit pitää paikoillaan, ja voit selata sivua alaspäin nähdäksesi kuvan eri osia. HTML:n ja CSS:n perustiedoilla voit antaa verkkosivustolle parallaksiefektin. Parallaksiefektin käyttäminen verkkosuunnittelussa on todella suosittua, ja se antaa verkkosivulle kauniin ulkoasun. Kokeile sitä ja jaa koko sivu kolmeen tai neljään eri osaan. Aseta 3-4 taustakuvaa, kohdista teksti eri osioihin, aseta marginaali ja pehmuste, lisää background-position ja muita CSS-elementtejä ja -ominaisuuksia parallaksiefektin luomiseksi. Voit ottaa apua osoitteesta Parallax Website.
Laskeutumissivu
Laskeutumissivu on toinen hyvä projekti, jonka voit tehdä HTML:n ja CSS:n avulla, mutta se vaatii näiden kahden rakennuspalikan vankkaa tuntemusta. Laskeutumissivua tehdessäsi käytät paljon luovuutta. Harjoittelet jalkatunnisteen ja otsikon lisäämistä, sarakkeiden luomista, kohtien kohdistamista, osioiden jakamista ja monia muita asioita. Sinun on käytettävä CSS:ää huolellisesti ja pidettävä mielessä, että eri elementit eivät mene päällekkäin keskenään. Huolehdit myös väriyhdistelmistä, pehmusteista, marginaaleista, osioiden, kappaleiden ja laatikoiden välisestä tilasta. Väriyhdistelmien tulisi sopia hyvin yhteen eri osioiden tai taustojen kanssa. Voit ottaa apua alla olevasta linkistä.
- Full Screen Landing
- Landing Page
Ravintolan verkkosivut
Esittele vankka osaamisesi HTML:stä ja CSS:stä luomalla kaunis verkkosivu ravintolalle. Ulkoasun tekeminen ravintolalle on hieman monimutkaisempaa kuin aiemmat projektiesimerkit. Kohdistat eri ruoka-aineet ja juomat CSS:n asetteluruudukon avulla. Lisäät hintoja ja kuvia, ja sinun on myös annettava ravintolalle kaunis ulkoasu käyttämällä sopivaa väriyhdistelmää, kirjasintyyliä ja kuvia. Voit lisätä kuvagallerian eri ruoka-aineille, voit myös lisätä liukuvia kuvia paremman ulkoasun saamiseksi. Lisää linkkejä uudelleenohjausta varten sisäisille sivuille. Tee siitä responsiivinen asettamalla näkymäalue, käyttämällä mediakyselyjä ja ruudukkoa. Voit ottaa apua osoitteesta Ravintolan verkkosivut.
Tapahtuman tai konferenssin verkkosivu
Voit tehdä staattisen sivun, jossa on tapahtuma tai konferenssi. Ihmiset, jotka ovat kiinnostuneita osallistumaan konferenssiin, luovat heille rekisteröitymispainikkeen. Mainitse eri linkit puhujaa, tapahtumapaikkaa ja aikataulua varten ylhäällä otsikko-osassa. Kuvaile konferenssin tarkoitus tai ihmisryhmä, joka voi hyötyä konferenssista. Lisää verkkosivuillesi esittely ja kuvia puhujasta, tapahtumapaikan tiedot ja konferenssin päätarkoitus. Jaa sivu osioihin, lisää otsikko ja alatunniste, joissa esitellään valikko. Käytä sopivaa taustaväriä, joka sopii hyvin yhteen eri osioiden kanssa. Valitse kunnollinen kirjasintyyli ja fontin väri, joka sopii verkkosivusi teemaan. Se edellyttää syvällistä HTML/HTML5- ja CSS-tietämystä. Voit ottaa apua tyylikonferenssista.
Musiikkikaupan sivu
Jos olet musiikin ystävä, voit tehdä verkkosivun sitä varten. Se vaatii HTML5/CSS3-osaamista. Lisää sopiva taustakuva, joka kuvaa tarkoitusta tai mistä sivulla on kyse. Lisää otsikko-osioon erilaisia valikoita. Lisää painikkeita, linkkejä, kuvia ja jonkinlainen kuvaus saatavilla olevasta kappalekokoelmasta. Mainitse alareunassa linkit ostoksia, kauppaa, uraa tai yhteystietoja varten. Voit lisätä sivuillesi myös muita ominaisuuksia, kuten kokeiluvaihtoehdon, lahjakortteja tai tilauksen. Tee siitä responsiivinen asettamalla näkymäikkuna tai käyttämällä mediakyselyjä ja ruudukkoa. Voit ottaa apua myTunesista.
Kuvaussivusto
Jos sinulla on syvällinen HTML5- ja CSS3-tietämys, voit tehdä yhden sivun responsiivisen kuvaussivuston. Käytä flexboxia ja mediakyselyjä responsiivisuuteen. Lisää yrityksen nimi ja kuva (joka liittyy valokuvaukseen) yläosaan (aloitussivu). Sen alapuolella esittelet työsi lisäämällä useita kuvia. Mainitse valokuvaajan yhteystiedot alareunassa (alatunniste). Lisää painike, jolla voit tarkastella työtäsi. Tämä painike vie sinut suoraan alas kuvat-osioon. Sinun on huolehdittava painikkeen marginaalista, pehmusteista, väriyhdistelmästä, kirjasinkoosta, kirjasintyylistä, kuvan koosta ja muotoilusta. Voit ottaa apua Acme Photographysta.
Henkilökohtainen portfolio
HTML5:n ja CSS3:n tuntemuksella voit myös luoda portfoliosi. Esittele työnäytteitäsi ja taitojasi portfoliossasi nimelläsi ja kuvillasi. Voit myös lisätä sinne ansioluettelosi ja isännöidä koko portfoliosi GitHub-tilillä. Mainitse otsikkoosiossa joitakin valikoita, kuten about, contact, work tai services. Lisää yläosaan yksi kuvistasi ja esittäydy siellä. Sen alapuolelle lisää joitakin työnäytteitä ja viimeiseksi (alatunniste) lisää yhteystiedot tai sosiaalisen median tili. Voit ottaa apua Henkilökohtaisesta portfoliosta.
Tekninen dokumentaatio
Jos sinulla on hieman Javascriptin tuntemusta, voit luoda verkkosivun teknisestä dokumentaatiosta. Se vaatii HTML:n, CSS:n ja perus javascriptin tuntemusta. Jaa koko verkkosivu kahteen osaan. Vasemmalle puolelle luodaan valikko, jossa on lueteltu kaikki aiheet ylhäältä alaspäin. Oikealla puolella sinun on mainittava aiheiden dokumentaatio tai kuvaus. Ideana on, että kun napsautat jotakin vasemmanpuoleisen osan aiheista, sen pitäisi ladata oikeanpuoleinen sisältö. Napsauttamiseen voit käyttää joko javascript- tai CSS-kirjanmerkkivaihtoehtoa. Sinun ei tarvitse tehdä siitä liian hienoa, anna sille vain yksinkertainen ja kunnollinen ulkoasu, joka näyttää hyvältä tekniselle dokumentaatiolle. Voit ottaa apua teknisestä dokumentaatiosta.
Hyödyllinen linkki: 10 vinkkiä tehokkaaseen verkkosuunnitteluun vuonna 2019
