Ensimmäinen kerta uuden taidon oppimisessa on aina jännittävä. Etenkin koodaaminen.
Mutta jos et harjoittele, unohdat suurimman osan siitä, mitä opit. Siksi jossain vaiheessa huomaat, että sinun on harjoiteltava oppimaasi. Muuten unohdat kaiken.
Sitä varten tarvitaan projekteja. Projektit ovat hyvä tapa harjoitella opittua. Ja usko pois, että haluat tehdä projekteja. Projektien avulla voit esitellä, mitä olet työstänyt.
Tulokkaana projektin valitseminen nykyistä osaamistasoasi vastaavaksi voi olla pelottavaa. Saatat valita projektin. Sitten projektista tulee liian suuri toteutettavaksi nykyisellä osaamisellasi. Ainakin näin olen käynyt läpi tällä oppimismatkalla.
Olen kuratoinut muutamia hankkeita, jotka ovat mielestäni sopivia, vaikka tietämyksesi rajoittuu vain HTML:ään ja CSS:ään. Nämä projektit löytyvät suosituilta oppimissivustoilta, joista löydät lisätietoa siitä, mitä tulet käsittelemään.
1. Kunnianosoitussivu
Kirjoita kunnianosoitus jostakusta ihailemastasi henkilöstä ja julkaise se verkkosivuna. Tässä projektissa työskennellään kuvan, linkkien, luetteloiden ja kappaleiden lisäämisen kanssa. Tämän projektin luominen edellyttää HTML:n tuntemusta. Voit kuitenkin käyttää hieman CSS:ää saadaksesi projektista paremman näköisen.
2. Kyselylomake
Lomakkeet ovat käyttökelpoisia, kun halutaan kerätä dataa verkossa. Tässä projektissa testataan pääasiassa taitojasi kaikenlaisten syötteiden osalta. Tässä testataan tietämystäsi lomakkeista ja verkkosivun jäsentämisestä. Lomakkeen ei tarvitse lähettää mitään tietoja.
Lomake rakentuu kunnianosoitussivusta. Tämän projektin luominen vaatii html/html5:n tuntemusta.
3. Tuotteen laskeutumissivun rakentaminen
Tarvitset vankkaa HTML/CSS-osaamista.
4. Teknisen dokumentointisivun rakentaminen
Tämä vaatii jonkin verran HTML:n, CSS:n ja bootstrapin tai JavaScriptin osaamista. Perusidea on: kun klikkaat mitä tahansa aihetta vasemmalla, se lataa kyseisen sisällön oikealle.
Yritän parhaillaan tätä projektia ja julkaisen lopullisen projektin, kun se on valmis.
5. Henkilökohtaisen portfolio-verkkosivun rakentaminen
Harjoittelet kaikkia HTML- ja CSS-taitojasi, joita olet oppinut. Sinun on myös osattava rajata ja muuttaa kuvien kokoa. Jos sinulla ei ole vaihtoehtoja, käytä Gimpiä. Se on ilmainen, avoimen lähdekoodin ja saatavilla Windowsille ja Linuxille .
Jos sinulla on kiire tehdä portfolio, voit lukea Brianin artikkelin nettiportfolion tekemisestä käyttäen valmista teemaa/mallia.
6. Google.com-sivu
Joo, olet nähnyt sen monta kertaa. Mutta pystytkö toistamaan sen. Yksinkertainen google.com-sivu, jossa on kuvakkeita, Googlen logo, tekstilaatikko ja kaksi painiketta. Voit tehdä google.com-sivun näköisen sivun. Tässä projektissa teet sen näyttämään google.com:lta, et toimimaan kuten google.com.
Sinun täytyy osata sekä HTML:ää että CSS:ää.
7. google.com Hakutulossivu
Luot sivun, jolla on googlen hakutuloksen muoto. Sivullasi tulisi olla normaalit 10 tulosta ja alareunassa navigointi seuraaville sivuille.
Tämä on päivitys yllä olevasta google.comin perussivusta. Sinun pitäisi kuitenkin pystyä käyttämään uudelleen osan tämän projektin koodista.
Sivun tekemisen pitäisi myös näyttää jonkin verran, mutta toiminnallisuuden ei pitäisi olla huolenaiheena juuri nyt.
Johtopäätös
Jos haluat oppia HTML:n perusteet, voit tutustua lyhyeen HTML:n johdantokurssiini.
Teitkö perusprojektin opetellessasi HTML:ää ja CSS:ää? Jos teit, jaa ne alla ja auta muita oppijoita löytämään ”yksinkertaisia” mutta haastavia ideoita kokeiltavaksi.