4 svetainės su praktiškais HTML ir CSS projektais pradedantiesiems

Key Takeaways

• Įveikti mokymo pragarą HTML ir CSS galima praktiškai taikant ir kuriant projektą. Tokios platformos kaip „Codewell“ siūlo dizaino šablonus, šaltinio kodą ir išteklius, kad būtų galima kurti realaus pasaulio projektus.
• „devChallenges“ siūlo daugybę realaus pasaulio kodavimo iššūkių pradedantiesiems ir patyrusiems kūrėjams. Jame siūlomi įvairaus sudėtingumo keliai, o įveikę iššūkius gausite savo portfelio sertifikatus.
• „Frontend Mentor“ yra populiari platforma, siūlanti sąsajas su profesionaliu interneto dizainu. Jame yra palaikanti bendruomenė ir ištekliai jūsų mokymuisi pagerinti. Iššūkiai gali būti įtraukti į jūsų portfelį, kad padidintumėte darbo galimybes.

Mokymosi pragaras yra problema, su kuria galite susidurti pradėdami mokytis HTML ir CSS. Paskęsti mokymo programų jūroje gali jus atbaidyti ir gali trukdyti jūsų žiniatinklio kūrimo pažangai. Lengviausias būdas tai įveikti yra praktinis pritaikymas ir projektų kūrimas remiantis viskuo, ką išmokote.

Šiame sąraše esančios svetainės siūlo realaus pasaulio HTML ir CSS projektus. Jie teikia projektavimo šablonus, šaltinio kodą ir išteklius projektams kurti naudojant HTML ir CSS.

„Codewell“ siūlo daugybę iššūkių, skirtų padėti jums praktikuoti ir tobulinti HTML, CSS, JavaScript ir interaktyvaus interneto dizaino įgūdžius. Šie iššūkiai yra dviejų kategorijų: nemokami ir aukščiausios kokybės.

Pasirinkę nemokamą parinktį, gausite prieigą prie pradinių failų, kuriuose yra išteklių, failo „Readme“, kuriame yra informacijos apie iššūkį, ir PNG dizaino failų, skirtų staliniams kompiuteriams, planšetiniams kompiuteriams ir mobiliesiems. Pasirinkus „premium“ narystę, jūsų privalumai išplečiami, įskaitant visas nemokamos pakopos funkcijas, taip pat papildomą „Figma“ šabloną.

Kai užpildysite iššūkį ir pateiksite sprendimą, svetainėje galėsite gauti atsiliepimų. Norėdami pateikti sprendimą, turėsite pateikti nuorodą į jo „GitHub“ atpirkimą ir tiesioginę peržiūrą. „GitHub“ saugyklos kūrimas ir sprendimo priegloba GitHub puslapiuose yra papildomi vertingi įgūdžiai. Taip pat galite matyti kitų žmonių pateiktus sprendimus.

Kai kurie „Codewell“ iššūkiai apima nukreipimo puslapius, registracijos puslapius ir prietaisų skydelius. Tai visi pradedantiesiems tinkami projektai.

„devChallenges“ padeda išmokti kodavimo praktikuojantis ir ruošiasi dienai gyvenime kaip kūrėją. Ji siūlo daugybę iššūkių, susijusių su realaus pasaulio projektais, atvirais pradedantiesiems ir patyrusiems kūrėjams.

Galite rinktis iš nemokamų ir mokamų planų. Į mokamą planą įeina „Pro“ ir „Premium“. Naudodami nemokamą parinktį gausite prieigą prie pagrindinių funkcijų ir kai kurių iššūkių. Pastaroji parinktis suteikia jums privilegijų, tokių kaip prieiga prie aukščiausios kokybės iššūkių, Figma dizainas ir iššūkių tarpų vadovas.

Platforma sugrupuoja iššūkius į kelius, kurių kiekvienas yra skirtas skirtingiems įgūdžiams, pvz., HTML ir CSS, su skirtingu sudėtingumo lygiu. Įveikę iššūkius vienu keliu, gausite sertifikatą, kurį galėsite įtraukti į savo portfelį.

„devChallenges“ turi redaktoriaus puslapį, kuriame galite peržiūrėti iššūkio specifiką, įskaitant šriftus, spalvas, peržiūros srities vaizdus, ​​​​tinklelio rodymą ir išteklių atsisiuntimus. Atsisiųstame faile yra tik jums reikalingi vaizdai.

Taip pat yra lyderių lentelė, todėl treniruodamiesi galite konkuruoti. Platforma skatina bendruomenės įsitraukimą ir skatina jus dalytis savo sprendimais. Ji siūlo pagalbą, o sprendimų skyriuje galite mokytis iš kitų vartotojų.

Kaip ir Codewell, norėdami pateikti sprendimus, turėsite pateikti nuorodą į demonstracinę versiją ir saugyklą. Sąsaja yra draugiška, todėl jums nebus problemų naršyti.

„Frontend Mentor“ išsiskiria kaip populiariausias pasirinkimas tarp šiame sąraše esančių platformų dėl daugybės privilegijų. Jis išsiskiria tuo, kad siūlo platų priekinių iššūkių pasirinkimą, susietą su profesionaliu interneto dizainu. Platforma taip pat skatina gyvybingą ir palaikančią žiniatinklio kūrėjų bendruomenę.

Kaip ir kitose platformose, „Frontend Mentor“ turi ir nemokamas, ir mokamas parinktis. Naudodami nemokamą versiją turėsite prieigą prie pagrindinių funkcijų ir daugumos iššūkių, o mokama versija suteikia prieigą prie aukščiausios kokybės iššūkių, Figma dizaino failų ir kt.

Iššūkiai skirstomi į tris pagrindines grupes, įskaitant tipą, sunkumą ir kalbas. Skiltyje „Kalbos“ galite pasiekti iššūkius, kuriems atlikti reikia tik HTML ir CSS.

Kiekvienas iššūkis suteikia prieigą prie pradinio failo, kuriame yra daug išteklių, įskaitant HTML šaltinio kodą, „Readme“ failą, stiliaus vadovą, darbalaukio ir mobiliojo įrenginio išdėstymo vaizdus ir kt. Pateikdami sprendimą turėsite galimybę įtraukti klausimus bendruomenei. Pažymėtina, kad kitų žmonių sprendimus galite peržiūrėti tik pateikę savo.

Frontend Mentor naudoja taškų sistemą, kad paskatintų jus įveikti iššūkius. Visus baigtus projektus galite pridėti prie a portfelį, kad galėtumėte įsidarbinti.

„Frontend Mentor“ iš tikrųjų išskiria jo išteklių puslapį, kuriame yra daugiau nei 15 žiniatinklio kūrimo medžiagos šakų. Kiekviename iš jų yra kuruojamas išteklių sąrašas, kurį galite pasirinkti, kad galėtumėte išmokti visko, ko jums reikės praktikuojantis.

Galiausiai, Frontend Mentor du kartus per mėnesį meta iššūkius, vadinasi, visada bus ką dirbti.

Frontend praktika nuo kitų platformų skiriasi keliais atžvilgiais. Pirma, jame nėra iššūkių; vietoj to siūlo projektus. Šie projektai yra tikros svetainės, priklausančios tikroms įmonėms, kurias kursite iš naujo. Jums taip pat nereikia paskyros, kad galėtumėte išbandyti šiuos projektus.

Norėdami pradėti, šaltinio kodas nepateiktas. Vietoj to, projekto aprašyme yra išorinių nuotraukų išteklių ir piktogramų nuorodų, nuoroda į tiesioginį vaizdą svetainė, nuorodos vaizdas, spalvų paletės ir kuruojamas išteklių sąrašas, kurio jums reikės norint užbaigti projektą. Be to, gausite sąvokų, kurias išmoksite užbaigdami projektą, ir sunkumų nuorodas, kurias galite naudoti, sąrašą.

Platforma siūlo trijų lygių sudėtingumo pakopą, tačiau, kaip pradedantysis, pagrindinis dėmesys bus skiriamas pirmajam lygiui. Čia galite praktikuoti HTML, CSS, reagavimą, animaciją ir kt. Be to, jūs turite leidimą įtraukti projektus į savo portfelį, jei laikotės vienos taisyklės, nurodytos svetainėje.

„Frontend Practice“ yra puikus pasirinkimas, jei norite patobulinti savo įgūdžius atkurdami esamas svetaines, pradedant nuo nulio ir baigiant HTML įgūdžių lavinamu.

Visos šios platformos kartu suteiks pakankamai turinio, kuriuo galėsite naudotis kurti savo kūrėjų portfelį. Treniruotės metu galėsite tobulėti ir suprasti naujas sąvokas, sustiprinti pasitikėjimą savimi ir padėti įveikti mokymo pragarą.

Praktikuodami tobulinkite savo HTML ir CSS įgūdžius

Mokymo pragaras bus iššūkis, bet jūs galite jį įveikti praktikuodami. Galimybės yra tikrai neribotos, ir viskas prasideda nuo pirmojo žingsnio. Priimdami sukurtus iššūkius ir realaus pasaulio projektus, panaudosite savo HTML ir CSS žinias ir jas papildysite.

Nepriklausomai nuo pasirinkto kelio, jūs leidžiatės į augimo ir tobulėjimo kelionę, tobulindami savo įgyti įgūdžių ir didinti pasitikėjimą kelyje, pritaikyti praktinį požiūrį, kurti, mokytis ir klestėti