Olenemata sellest, kas neid loetakse programmeerimiskeelteks või mitte, pole kahtlust, et HTML ja CSS – koos JavaScriptiga – moodustavad ülemaailmse veebi nurgakivi. Õnneks on need tehnoloogiad, mida on kõige lihtsam õppida ja tutvustada.
Kuidas te pürgiva veebiarendajana oma oskusi harjutate ja demonstreerite? Esiteks on teil vaja ühte või mitut projekti, et testida oma võimeid ja edendada õppeprotsessi lisaks süntaksi õppimisele.
Need kaheksa projekti sobivad suurepäraselt oma HTML-i ja CSS-i oskuste lihvimiseks ning õpitu näitamiseks.
Isikliku veebisaidi loomine on HTML-i ja CSS-i algajate jaoks üks populaarsemaid, kuid samas väljakutseid pakkuvaid projekte. See on kõikehõlmav projekt, mis paneb proovile enamiku teie õppeprotsessi käigus omandatud oskustest. Lisaks on isiklik veebisait suurepärane koht oma CV kuvamiseks ja linkimiseks GitHubi konto.
Paljud algajad kasutavad veebisaidi loomise tehnilisemate aspektide käsitlemiseks tarkvara, nagu SquareSpace või WordPress. Neid tööriistu kasutades saate keskenduda oma märgistus- ja stiilioskuste täiustamisele. Või saate luua veebisaidi nullist ja proovile panna kõik oma oskused.
Isiklik veebisait võib olla portfoolio kogu teie töö jaoks. Päis sobib suurepäraselt enda tutvustamiseks, kontaktandmete näitamiseks ja teiste tööde linkimiseks. Samamoodi võib jalus sisaldada linke sotsiaalmeedia kontodele ning lisateavet teie ja teie teenuste kohta.
Austusavaldus on üheleheline veebisait, mis kirjeldab kellegi omadusi, keda peate iidoliks või eeskujuks. See projekt nõuab ainult HTML-i ja CSS-i põhioskusi ning on üks lihtsamaid ülesandeid, mida saate oma võimete tutvustamiseks kasutada.
Austusavalduse lehe silmapaistvaim omadus on subjekti pilt. Sellisena nõuab selle kujutise õige positsioneerimine tehnilisi oskusi, disainioskusi ja detailide tähelepanelikkust. Pildi täiendamiseks peate valima õiged taustavärvid.
Objekti nimi on sama oluline kui pilt, mis on sageli esile tõstetud unikaalsete fontide ja värvidega päises. Lisaks sisaldab austusleht ühte või kahte lõiku teema kohta, linke ja avalikku kontaktteavet.
Küsitlusvormi projekt paneb proovile teie teadmised ja oskused interaktiivsete juhtelementide alal. See hõlmab kogu kasutajaliidese/UX-i valikut, sealhulgas kasutaja sisendi vastuvõtmist ja esitamist. Lisaks kasutate selles projektis HTML-elemente, nagu raadionupud, tekstiväljad, märkeruudud ja sildid.
Teie küsitlusvorm ei pea esitama päriselu küsimusi ega salvestama vastuseid andmebaasi. Selle asemel saate kasutada kohatäite teksti, et demonstreerida oma oskust õige veebilehe struktuuri osas. Lisaks saate luua tundliku vormi, mis kohandab selle sisu vastavalt ekraani suurusele.
Sihtleht on teine üheleheline veebisait, mis on spetsiaalselt loodud turunduskampaaniate jaoks. Selle eesmärk on meelitada ettevõttesse kliente või tekitada müügivihjeid. Sellisena on sihtleht sageli esimene kontaktpunkt otsingumootoritele optimeeritud veebisaitidega.
Analüütika abil saate määrata, kui tõhus teie sihtleht on. Sihtlehe kujundamine maksimaalse kaasatuse tagamiseks on ülimalt oluline. Vaatamata oma lihtsusele on maandumisleht algajatele üks keerulisemaid projekte.
Selle projekti jaoks on teil vaja loomingulisi oskusi, et saaksite maksimaalselt ära kasutada erinevaid teie käsutuses olevaid HTML-i elemente. Erinevates seadmetes keeruliste paigutuste jaoks on teil vaja CSS-i valdamist.
Teie sihtleht peab olema piisavalt interaktiivne ja tundlik, et köita teie vaatajaskonda ja tekitada kasutajate tegevust.
Esmapilgul tundub sündmuse leht nagu mis tahes staatiline veebilehe projekt selles loendis. Selle määravaks tunnuseks on aga üritusel osalemisest huvitatud külastajate registreerimisnupp. Veel üks silmapaistev funktsioon on lingid toimumiskoha, marsruudi ja esinejate jaoks.
See projekt paneb proovile teie võime mahutada palju teavet piiratud ruumi. Järelikult peab teie veebilehel olema selgelt kirjas sündmuse eesmärk ja eelised, kui see on asjakohane. Saate lisada ka asjakohaseid pilte toimumiskohast, esinejatest ja sündmuse teemast.
Sündmuse leht eeldab, et peaksite teadma, kuidas kasutada HTML-i ja CSS-i oma lehe osadeks jaotamiseks. Lisaks peaks päis sisaldama interaktiivset menüüd ja jalus peaks näitama täiendavat teavet.
Restorani veebisait peab kasutama õiget värvikombinatsiooni, et muuta toit ja joogid klientidele atraktiivsemaks. Sa saad ka muuta veebisait interaktiivseks suurendada klientide kaasatust. Näiteks kui hõljute kursorit eine pildi kohal, võib kuvada menüükaardi, mis sisaldab hinda ja saadavust.
See projekt annab võimaluse proovile panna oma küljendusoskused. Näiteks saate restorani menüüvalikute kuvamiseks kasutada pildiliugureid. Teise võimalusena võite kasutada CSS-võrk või flexbox toiduainete joondamiseks. Lihtsad animatsioonid nuppudel ja piltidel võivad samuti anda teie veebisaidile põneva välimuse.
Restorani veebisait võib nõuda oskusi lisaks lihtsale HTML-ile ja CSS-ile, näiteks jQuery ja @keyframes.
Veebisaidi klooni peetakse sageli teie HTML-i ja CSS-i oskuste ülimaks proovikiviks, mis võtab rohkem aega ja vaeva kui mis tahes muu projekt. Videote jagamise saidid nagu YouTube ja Netflix on oma keerukuse ja professionaalse välimuse tõttu populaarsed kandidaadid veebisaitide kloonimiseks.
Kloonimisprotsess algab veebisaidi kasutajaliidese, eriti interaktiivsete elementide ekraanipiltidega. Seejärel kasutate kõiki teie käsutuses olevaid oskusi veebisaidi erinevate osade välimuse ja tunnetuse jäljendamiseks.
Teie kloonisait peaks sisaldama selliseid funktsioone nagu otsingumootorid, kommentaaride jaotised, kanalid ja makseplaanid. Saate manustada ka HTML5-videotausta, et jäljendada nende veebisaitide videoesituse funktsioone.
See projekt annab ülevaate suurte professionaalsete veebiarendusmeeskondade mõtteprotsessist. Veelgi enam, saate kasutada Kontrollige tööriista oma veebibrauseris, et vaadata nende saitide HTML- ja CSS-i lähtekoodi.
Parallakskerimine on tänapäevastel veebisaitidel laialt levinud efekt, kus taustaelemendid liiguvad kerimisel esiplaani elementidest erineva kiirusega. Vaatamata oma visuaalselt vapustavale välimusele on parallaksi veebisait algajatele üks lihtsamaid projekte.
Parima parallaksiefekti saavutamiseks jagage oma veebileht kolmeks või neljaks osaks, millest igaühel on erinev taustpilt. Parallaksi veebisaidi loomise peamine koostisosa on taustamanus: fikseeritud CSS-i atribuut vastavatel piltidel.
Mõned algajad kasutavad veebilehtede koostajad nagu Wix, WordPress ja Elementor, et kiiresti parallaksi veebisaite luua. Need tööriistad õõnestavad aga parallaksiefekti nullist loomise väljakutset ja õppimisprotsessi.
Järgmised sammud teie veebiarenduse teekonnal
HTML ja CSS on vaid kaks paljudest tehnoloogiatest, mida saate interaktiivsete veebisaitide loomiseks kasutada. Seetõttu on keskendumiseks virna valimine algajatele sageli üle jõu käiv ja segadust tekitav.
Õnneks paistab üks programmeerimiskeel veebiarenduse kuningana silma. JavaScripti valdamine võib olla keerulisem kui HTML-i ja CSS-i, kuid selle kasu on tohutu. JavaScripti õppimine võimaldab teil kasutada selliseid raamistikke nagu React, Angular ja Vue.js, säästes aega ja vaeva vapustava veebisaidi loomisel.