Bilo da se računaju kao programski jezici ili ne, nema sumnje da HTML i CSS - zajedno s JavaScriptom - čine kamen temeljac World Wide Weba. Srećom, to su neke od tehnologija koje je najlakše naučiti i prikazati.
Kao ambiciozni web programer, kako vježbate i demonstrirate svoje vještine? Prvo, potreban vam je jedan ili više projekata za testiranje vaših sposobnosti i poticanje procesa učenja izvan samog učenja sintakse.
Ovih osam projekata savršeni su za vas da usavršite svoje vještine HTML-a i CSS-a i pokažete što ste naučili.
Izrada osobne web stranice jedan je od najpopularnijih, ali i izazovnih projekata za početnike u HTML-u i CSS-u. To je dobro zaokružen projekt koji testira većinu vještina stečenih tijekom procesa učenja. Štoviše, osobna web stranica izvrsno je mjesto za prikaz vašeg životopisa i poveznicu GitHub račun.
Mnogi početnici koriste softver poput SquareSpacea ili WordPressa za rješavanje tehničkih aspekata izrade web stranice. Pomoću ovih alata možete se usredotočiti na usavršavanje svojih vještina označavanja i oblikovanja. Ili možete izraditi web stranicu od nule i izazvati sve svoje vještine.
Osobna web stranica može poslužiti kao portfelj za sav vaš rad. Zaglavlje je savršeno za predstavljanje sebe, prikaz podataka za kontakt i povezivanje drugih radova. Slično tome, podnožje može sadržavati poveznice na račune društvenih medija i dodatne informacije o vama i vašim uslugama.
Stranica posvećena je web-stranica na jednoj stranici koja opisuje kvalitete nekoga koga smatrate idolom ili uzorom. Ovaj projekt zahtijeva samo osnovno poznavanje HTML-a i CSS-a i jedan je od najjednostavnijih zadataka pomoću kojih možete pokazati svoje sposobnosti.
Najistaknutija značajka stranice za počast je slika subjekta. Kao takvo, ispravno pozicioniranje ove slike zahtijeva tehničke vještine, dizajnerske vještine i oko za detalje. Morate odabrati prave pozadinske boje koje će upotpuniti sliku.
Ime subjekta jednako je važno kao i slika, često istaknuto jedinstvenim fontovima i bojama u zaglavlju. Osim toga, stranica s posvetom sadrži jedan ili dva odlomka o predmetu, poveznice i javne podatke za kontakt.
Projekt obrasca ankete testirat će vaše znanje i umijeće u interaktivnim kontrolama. Pokriva cijeli raspon UI/UX, uključujući primanje i podnošenje korisničkih unosa. Nadalje, u ovom projektu ćete koristiti HTML elemente kao što su radio gumbi, tekstualna polja, potvrdni okviri i oznake.
Vaš upitnik ne mora postavljati pitanja iz stvarnog života niti pohranjivati odgovore u bazu podataka. Umjesto toga, možete upotrijebiti tekst rezerviranog mjesta da pokažete svoje upravljanje pravilnom strukturom web stranice. Nadalje, možete napraviti responzivni obrazac koji prilagođava svoj sadržaj na temelju veličine zaslona.
Odredišna stranica još je jedno web mjesto od jedne stranice posebno dizajnirano za marketinške kampanje. Cilj mu je privući kupce u tvrtku ili generirati potencijalne kupce. Kao takva, odredišna stranica često je prva točka kontakta s web stranicama optimiziranim za tražilice.
Možete koristiti analitiku da odredite koliko je učinkovita vaša odredišna stranica. Dizajniranje odredišne stranice kako bi se osigurao maksimalni angažman od iznimne je važnosti. Landing stranica je jedan od izazovnijih projekata za početnike, unatoč svojoj jednostavnosti.
Trebat će vam kreativne vještine za ovaj projekt, iskorištavanje različitih HTML elemenata koji su vam na raspolaganju. Trebat će vam poznavanje CSS-a da biste se pobrinuli za složene izglede na različitim uređajima.
Vaša odredišna stranica mora biti dovoljno interaktivna i osjetljiva da privuče vašu publiku i generira aktivnost korisnika.
Na prvi pogled, stranica događaja izgleda kao bilo koji projekt statične web stranice na ovom popisu. Međutim, njegova značajka koja definira je gumb za registraciju za posjetitelje zainteresirane za prisustvovanje događaju. Još jedna istaknuta značajka su veze za mjesto događaja, plan puta i govornike.
Ovaj projekt testira vašu sposobnost da stavite puno informacija u ograničeni prostor. Posljedično, vaša web stranica mora jasno navesti svrhu događaja i prednosti, ako je primjenjivo. Također možete uključiti relevantne slike mjesta događaja, govornika i teme događaja.
Stranica događaja zahtijeva da znate kako koristiti HTML i CSS da svoju stranicu podijelite u odjeljke. Osim toga, zaglavlje treba sadržavati interaktivni izbornik, a podnožje treba prikazivati dodatne informacije.
Web stranica restorana mora koristiti pravu kombinaciju boja kako bi hrana i piće kupcima izgledali privlačnije. Također možete učiniti web stranicu interaktivnom povećati angažman kupaca. Na primjer, postavljanje pokazivača iznad slike obroka može prikazati karticu s jelovnikom koja sadrži cijenu i dostupnost.
Ovaj projekt pruža priliku da izazovete svoje vještine oblikovanja. Na primjer, možete koristiti klizače slika za prikaz opcija jelovnika restorana. Alternativno, možete koristiti CSS rešetka ili flexbox za poravnavanje namirnica. Jednostavne animacije na gumbima i slikama također mogu vašoj web stranici dati uzbudljiv izgled.
Web stranica restorana može zahtijevati vještine izvan jednostavnog HTML-a i CSS-a, kao što su jQuery i @keyframes.
Klon web stranice često se smatra ultimativnim testom vaših HTML i CSS vještina, a oduzima više vremena i truda nego bilo koji drugi projekt. Stranice za dijeljenje videa kao što su YouTube i Netflix popularni su kandidati za kloniranje web stranica zbog svoje složenosti i profesionalnog izgleda.
Proces kloniranja započinje snimkama zaslona korisničkog sučelja web stranice, posebice interaktivnih elemenata. Zatim koristite sve vještine koje su vam na raspolaganju kako biste replicirali izgled i dojam različitih dijelova web stranice.
Vaša klonirana stranica trebala bi sadržavati značajke kao što su tražilice, odjeljci s komentarima, kanali i planovi plaćanja. Također možete ugraditi HTML5 video pozadinu kako biste oponašali funkcije reprodukcije videozapisa ovih web stranica.
Ovaj projekt pruža uvid u misaoni proces velikih, profesionalnih timova za web razvoj. Štoviše, možete koristiti Pregledati alat na vašem web-pregledniku da zavirite u HTML i CSS izvorni kod za te stranice.
Paralaksno pomicanje široko je rasprostranjen učinak na modernim web stranicama gdje se pozadinski elementi pomiču različitim brzinama od elemenata u prednjem planu prilikom pomicanja. Unatoč svom vizualno zadivljujućem izgledu, parallax web stranica jedan je od najlakših projekata za početnike.
Da biste dobili najbolji efekt paralakse, podijelite svoju web stranicu u tri ili četiri odjeljka, svaki s različitom pozadinskom slikom. Ključni sastojak za izradu paralaks web stranice je pozadinski prilog: fiksno CSS svojstvo na odgovarajućim slikama.
Neki početnici koriste graditelji internetskih stranica poput Wixa, WordPressa i Elementora za brzo stvaranje paralaksnih web stranica. Međutim, ovi alati potkopavaju izazov i proces učenja stvaranja efekta paralakse od nule.
Sljedeći koraci na vašem web razvoju
HTML i CSS samo su dvije od mnogih tehnologija koje možete koristiti za izradu interaktivnih web stranica. Kao rezultat toga, odabir hrpe na koju će se usredotočiti često je neodoljiv i zbunjujući za početnike.
Srećom, jedan se programski jezik ističe kao kralj web razvoja. JavaScript je možda zahtjevniji za svladavanje od HTML-a i CSS-a, ali nagrade su ogromne. Učenje JavaScripta omogućuje vam korištenje okvira kao što su React, Angular i Vue.js, štedeći vrijeme i trud pri stvaranju zapanjujuće web stranice.
