Nesvarbu, ar jos laikomos programavimo kalbomis, ar ne, beveik nekyla abejonių, kad HTML ir CSS – kartu su „JavaScript“ – yra pasaulinio žiniatinklio kertinis akmuo. Laimei, jos yra vienos iš lengviausiai išmokstamų ir demonstruojamų technologijų.
Kaip jūs, norintis žiniatinklio kūrėjas, praktikuojatės ir demonstruojate savo įgūdžius? Pirma, jums reikia vieno ar kelių projektų, kad patikrintumėte savo gebėjimus ir paskatintumėte mokymosi procesą, ne tik mokantis sintaksės.
Šie aštuoni projektai puikiai tinka patobulinti savo HTML ir CSS įgūdžius ir parodyti, ką išmokote.
Asmeninės svetainės kūrimas yra vienas populiariausių, tačiau sudėtingiausių projektų pradedantiesiems HTML ir CSS. Tai visapusiškas projektas, kuris patikrina daugumą mokymosi proceso metu įgytų įgūdžių. Be to, asmeninė svetainė yra puiki vieta parodyti savo CV ir susieti savo GitHub paskyra.
Daugelis pradedančiųjų naudoja programinę įrangą, pvz., „SquareSpace“ arba „WordPress“, kad tvarkytų techninius svetainės kūrimo aspektus. Naudodami šiuos įrankius galite sutelkti dėmesį į savo žymėjimo ir stiliaus įgūdžių tobulinimą. Arba galite sukurti svetainę nuo nulio ir išbandyti visus savo įgūdžius.
Asmeninė svetainė gali būti visų jūsų darbų aplankas. Antraštė puikiai tinka prisistatyti, parodyti kontaktinę informaciją ir susieti kitus darbus. Panašiai poraštėje gali būti nuorodų į socialinės žiniasklaidos paskyras ir daugiau informacijos apie jus ir jūsų paslaugas.
Pagarbos puslapis yra vieno puslapio svetainė, kurioje apibūdinamos žmogaus, kurį laikote stabu ar pavyzdžiu, savybės. Šis projektas reikalauja tik pagrindinių HTML ir CSS įgūdžių ir yra viena iš paprasčiausių užduočių, kurias galite naudoti norėdami parodyti savo sugebėjimus.
Ryškiausia pagarbos puslapio savybė yra subjekto nuotrauka. Todėl norint tinkamai nustatyti šio vaizdo padėtį, reikia techninių įgūdžių, projektavimo įgūdžių ir dėmesio detalėms. Turite pasirinkti tinkamas fono spalvas, kad papildytumėte vaizdą.
Objekto pavadinimas yra toks pat svarbus kaip ir vaizdas, dažnai paryškinamas unikaliais šriftais ir spalvomis antraštėje. Be to, pagarbos puslapyje yra viena ar dvi pastraipos apie temą, nuorodos ir vieša kontaktinė informacija.
Apklausos formos projektas patikrins jūsų žinias ir interaktyvių valdiklių įgūdžius. Jis apima visą vartotojo sąsajos / UX spektrą, įskaitant vartotojo įvesties priėmimą ir pateikimą. Be to, šiame projekte naudosite HTML elementus, pvz., radijo mygtukus, teksto laukus, žymimuosius laukelius ir etiketes.
Jūsų apklausos formoje nereikia užduoti realaus gyvenimo klausimų ar saugoti atsakymų duomenų bazėje. Vietoj to galite naudoti rezervuotos vietos tekstą, kad parodytumėte, kaip mokate tinkamą tinklalapio struktūrą. Be to, galite sukurti interaktyvią formą, kuri koreguoja jos turinį pagal ekrano dydį.
Nukreipimo puslapis yra kita vieno puslapio svetainė, specialiai sukurta rinkodaros kampanijoms. Juo siekiama pritraukti klientus į įmonę arba generuoti potencialius klientus. Taigi nukreipimo puslapis dažnai yra pirmasis kontaktas su paieškos sistemoms optimizuotomis svetainėmis.
Norėdami nustatyti nukreipimo puslapio efektyvumą, galite naudoti analizę. Labai svarbu sukurti nukreipimo puslapį, kad būtų užtikrintas maksimalus įtraukimas. Nukreipimo puslapis yra vienas sudėtingiausių projektų pradedantiesiems, nepaisant jo paprastumo.
Šiam projektui jums reikės kūrybinių įgūdžių, kad galėtumėte kuo geriau išnaudoti įvairius turimus HTML elementus. Norint pritaikyti sudėtingus išdėstymus skirtinguose įrenginiuose, jums reikės įvaldyti CSS.
Nukreipimo puslapis turi būti interaktyvus ir pakankamai jautrus, kad sužavėtų auditoriją ir paskatintų naudotojų veiklą.
Iš pirmo žvilgsnio įvykio puslapis atrodo kaip bet koks statinis tinklalapio projektas šiame sąraše. Tačiau pagrindinis jo bruožas yra registracijos mygtukas lankytojams, norintiems dalyvauti renginyje. Kita išskirtinė funkcija yra vietos, maršruto ir pranešėjų nuorodos.
Šis projektas išbando jūsų gebėjimą sutalpinti daug informacijos ribotoje erdvėje. Todėl jūsų tinklalapyje turi būti aiškiai nurodytas renginio tikslas ir nauda, jei taikoma. Taip pat galite įtraukti atitinkamus vietos, pranešėjų ir renginio temos vaizdus.
Įvykio puslapyje reikia žinoti, kaip naudoti HTML ir CSS, kad galėtumėte padalinti puslapį į skyrius. Be to, antraštėje turėtų būti interaktyvus meniu, o poraštėje – papildoma informacija.
Restorano svetainė turi naudoti tinkamą spalvų derinį, kad maistas ir gėrimai atrodytų patrauklesni klientams. Tu taip pat gali padaryti svetainę interaktyvia padidinti klientų įsitraukimą. Pavyzdžiui, užvedus pelės žymeklį virš patiekalo vaizdo, gali būti rodoma meniu kortelė su kaina ir prieinamumu.
Šis projektas suteikia galimybę mesti iššūkį savo maketavimo įgūdžiams. Pavyzdžiui, galite naudoti vaizdo slankiklius, kad parodytumėte restorano meniu parinktis. Arba galite naudoti CSS tinklelis arba „flexbox“. suderinti maisto produktus. Paprasta animacija ant mygtukų ir vaizdų taip pat gali suteikti jūsų svetainei jaudinančią išvaizdą.
Restorano svetainei gali prireikti ne tik paprasto HTML ir CSS įgūdžių, kaip jQuery ir @keyframes.
Svetainės klonas dažnai laikomas galutiniu jūsų HTML ir CSS įgūdžių išbandymu, kuriam atlikti reikia daugiau laiko ir pastangų nei bet kuriam kitam projektui. Vaizdo įrašų bendrinimo svetainės kaip „YouTube“ ir „Netflix“ yra populiarūs svetainių klonavimo kandidatai dėl savo sudėtingumo ir profesionalios išvaizdos.
Klonavimo procesas prasideda nuo svetainės vartotojo sąsajos, ypač interaktyvių elementų, ekrano kopijų. Tada panaudosite visus turimus įgūdžius, kad atkartotumėte įvairių svetainės dalių išvaizdą.
Jūsų klono svetainėje turėtų būti tokių funkcijų kaip paieškos varikliai, komentarų skyriai, kanalai ir mokėjimo planai. Taip pat galite įterpti HTML5 vaizdo įrašo foną, kad imituotumėte šių svetainių vaizdo įrašų atkūrimo funkcijas.
Šis projektas suteikia įžvalgą apie didelių, profesionalių žiniatinklio kūrimo komandų mąstymo procesą. Be to, galite naudoti Apžiūrėti įrankį savo žiniatinklio naršyklėje, kad peržiūrėtumėte šių svetainių HTML ir CSS šaltinio kodus.
Paralaksinis slinkimas yra plačiai paplitęs efektas šiuolaikinėse svetainėse, kur slenkant fono elementai juda skirtingu greičiu nei priekinio plano elementai. Nepaisant vizualiai stulbinančios išvaizdos, paralakso svetainė yra vienas iš paprasčiausių projektų pradedantiesiems.
Norėdami gauti geriausią paralakso efektą, padalykite savo tinklalapį į tris ar keturias dalis, kurių kiekviena turi skirtingą fono vaizdą. Pagrindinis komponentas kuriant paralakso svetainę yra fono priedas: fiksuotas CSS nuosavybė atitinkamuose vaizduose.
Kai kurie pradedantieji naudoja internetinių svetainių kūrėjai pavyzdžiui, „Wix“, „WordPress“ ir „Elementor“, kad greitai sukurtumėte paralakso svetaines. Tačiau šios priemonės kenkia iššūkiui ir mokymosi procesui sukurti paralakso efektą nuo nulio.
Kiti žingsniai jūsų žiniatinklio kūrimo kelionėje
HTML ir CSS yra tik dvi iš daugelio technologijų, kurias galite naudoti kurdami interaktyvias svetaines. Todėl pradedantiesiems dažnai sunku ir glumina pasirinkti krūvą, į kurį reikia sutelkti dėmesį.
Laimei, viena programavimo kalba išsiskiria kaip žiniatinklio kūrimo karalius. „JavaScript“ gali būti sudėtingesnis nei HTML ir CSS, tačiau atlygis yra didžiulis. Išmokę „JavaScript“ galite naudoti tokias sistemas kaip „React“, „Angular“ ir „Vue.js“, sutaupydami laiko ir pastangų kuriant nuostabią svetainę.
