Ne glede na to, ali se štejeta za programska jezika ali ne, ni dvoma, da sta HTML in CSS – skupaj z JavaScriptom – temelj svetovnega spleta. Na srečo so to nekatere izmed najlažjih tehnologij za učenje in predstavitev.
Kako kot ambiciozni spletni razvijalec vadite in dokazujete svoje sposobnosti? Najprej potrebujete enega ali več projektov, da preizkusite svoje sposobnosti in pospešite učni proces, ki presega samo učenje sintakse.
Teh osem projektov je kot nalašč za vas, da izpopolnite svoje znanje HTML in CSS ter pokažete, kaj ste se naučili.
Izdelava osebnega spletnega mesta je med najbolj priljubljenimi, a hkrati zahtevnimi projekti za začetnike HTML in CSS. Je dobro zaokrožen projekt, ki testira večino veščin, pridobljenih med učnim procesom. Poleg tega je osebno spletno mesto odlično mesto za prikaz vašega življenjepisa in povezave do vašega GitHub račun.
Mnogi začetniki uporabljajo programsko opremo, kot sta SquareSpace ali WordPress, za obvladovanje bolj tehničnih vidikov izdelave spletnega mesta. Z uporabo teh orodij se lahko osredotočite na izpopolnjevanje svojih veščin označevanja in oblikovanja. Lahko pa ustvarite spletno mesto iz nič in preizkusite vse svoje sposobnosti.
Osebno spletno mesto lahko služi kot portfelj za vse vaše delo. Glava je popolna za predstavitev sebe, prikaz kontaktnih podatkov in povezovanje drugih del. Podobno lahko noga vsebuje povezave do računov družbenih medijev in dodatne informacije o vas in vaših storitvah.
Stran s poklonom je enostransko spletno mesto, ki opisuje lastnosti nekoga, ki ga imate za idola ali vzornika. Ta projekt zahteva samo osnovna znanja HTML in CSS in je ena najpreprostejših nalog, s katerimi lahko pokažete svoje sposobnosti.
Najpomembnejša značilnost strani s poklonom je slika osebe. Kot taka, pravilno pozicioniranje te slike zahteva tehnične spretnosti, oblikovalske sposobnosti in oko za podrobnosti. Za dopolnitev slike morate izbrati prave barve ozadja.
Ime predmeta je prav tako pomembno kot slika, ki je v glavi pogosto poudarjeno z edinstvenimi pisavami in barvami. Poleg tega stran s pokloni vsebuje enega ali dva odstavka o temi, povezave in javne kontaktne podatke.
Projekt anketnega obrazca bo preizkusil vaše znanje in spretnost na področju interaktivnih kontrol. Zajema celoten obseg UI/UX, vključno s sprejemanjem in pošiljanjem uporabniških vnosov. Poleg tega boste v tem projektu uporabljali elemente HTML, kot so izbirni gumbi, besedilna polja, potrditvena polja in oznake.
Vašemu anketnemu obrazcu ni treba postavljati vprašanj iz resničnega življenja ali shranjevati odgovorov v zbirki podatkov. Namesto tega lahko uporabite nadomestno besedilo, da pokažete, kako obvladate pravilno strukturo spletne strani. Poleg tega lahko naredite odziven obrazec, ki prilagaja svojo vsebino glede na velikost zaslona.
Ciljna stran je še ena enostranska spletna stran, zasnovana posebej za marketinške akcije. Njegov namen je pritegniti stranke v podjetje ali ustvariti potencialne stranke. Kot taka je ciljna stran pogosto prva točka stika s spletnimi mesti, optimiziranimi za iskalnike.
Z analitiko lahko ugotovite, kako učinkovita je vaša ciljna stran. Oblikovanje pristajalne strani, da se zagotovi največja angažiranost, je izjemnega pomena. Pristajalna stran je kljub svoji preprostosti eden zahtevnejših projektov za začetnike.
Za ta projekt boste potrebovali ustvarjalne spretnosti, saj boste kar najbolje izkoristili različne elemente HTML, ki so vam na voljo. Potrebovali boste obvladovanje CSS, da boste poskrbeli za zapletene postavitve na različnih napravah.
Vaša ciljna stran mora biti dovolj interaktivna in odzivna, da pritegne vaše občinstvo in ustvari aktivnost uporabnikov.
Na prvi pogled se stran dogodka zdi kot vsak projekt statične spletne strani na tem seznamu. Vendar pa je njegova značilnost gumb za registracijo za obiskovalce, ki jih zanima udeležba na dogodku. Druga izjemna funkcija so povezave do prizorišča, načrta poti in govorcev.
Ta projekt preizkuša vašo sposobnost, da v omejen prostor spravite veliko informacij. Zato mora vaša spletna stran jasno navajati namen dogodka in koristi, če so na voljo. Vključite lahko tudi ustrezne slike prizorišča, govornikov in teme dogodka.
Stran dogodka zahteva, da znate uporabljati HTML in CSS za razdelitev strani na razdelke. Poleg tega mora glava vsebovati interaktivni meni, noga pa mora prikazovati dodatne informacije.
Spletno mesto restavracije mora uporabiti pravo kombinacijo barv, da bo hrana in pijača strankam videti privlačnejša. Lahko tudi narediti spletno mesto interaktivno povečati sodelovanje strank. Če na primer premaknete miškin kazalec nad sliko obroka, se lahko prikaže menijska kartica s ceno in razpoložljivostjo.
Ta projekt ponuja priložnost, da preizkusite svoje sposobnosti oblikovanja. Na primer, lahko uporabite drsnike za slike, da prikažete možnosti menija restavracije. Lahko pa uporabite tudi CSS mreža ali flexbox za poravnavo živil. Tudi preproste animacije na gumbih in slikah lahko vašemu spletnemu mestu dajo vznemirljiv videz.
Spletno mesto restavracije morda zahteva spretnosti, ki presegajo preprosti HTML in CSS, kot sta jQuery in @keyframes.
Klon spletnega mesta pogosto velja za ultimativni preizkus vaših veščin HTML in CSS, saj zahteva več časa in truda, da ga dokončate kot kateri koli drug projekt. Spletna mesta za izmenjavo videov YouTube in Netflix sta priljubljena kandidata za kloniranje spletnega mesta zaradi svoje kompleksnosti in profesionalnega videza.
Postopek kloniranja se začne s posnetki zaslona uporabniškega vmesnika spletnega mesta, zlasti interaktivnih elementov. Nato uporabite vsa znanja, ki so vam na voljo, da ponovite videz in občutek različnih delov spletnega mesta.
Vaše klonirano mesto mora vključevati funkcije, kot so iskalniki, razdelki za komentarje, kanali in plačilni načrti. Prav tako lahko vdelate video ozadje HTML5, da posnemate funkcije predvajanja videa na teh spletnih mestih.
Ta projekt ponuja vpogled v miselni proces velikih, profesionalnih skupin za spletni razvoj. Še več, lahko uporabite Preglejte v spletnem brskalniku, da pokukate v izvorno kodo HTML in CSS za ta spletna mesta.
Drsenje s paralakso je zelo razširjen učinek na sodobnih spletnih mestih, kjer se elementi v ozadju med drsenjem premikajo z različnimi hitrostmi kot elementi v ospredju. Kljub vizualno osupljivemu videzu je spletno mesto s paralakso eden najlažjih projektov za začetnike.
Če želite doseči najboljši učinek paralakse, svojo spletno stran razdelite na tri ali štiri dele, vsak z drugačno sliko ozadja. Ključna sestavina za izdelavo paralaksnega spletnega mesta je ozadje-priponka: popravljeno Lastnost CSS na ustreznih slikah.
Nekateri začetniki uporabljajo graditelji spletnih strani kot so Wix, WordPress in Elementor za hitro ustvarjanje spletnih strani s paralakso. Vendar ta orodja spodkopavajo izziv in učni proces ustvarjanja učinka paralakse iz nič.
Naslednji koraki na vaši poti spletnega razvoja
HTML in CSS sta le dve od številnih tehnologij, ki jih lahko uporabite za ustvarjanje interaktivnih spletnih mest. Posledično je izbira sklada, na katerega se želite osredotočiti, za začetnike pogosto težka in zmedena.
Na srečo en programski jezik izstopa kot kralj spletnega razvoja. JavaScript je morda zahtevnejši za obvladovanje kot HTML in CSS, vendar so nagrade ogromne. Učenje JavaScripta vam omogoča uporabo ogrodij, kot so React, Angular in Vue.js, s čimer prihranite čas in trud pri ustvarjanju osupljivega spletnega mesta.
