4 web stranice s praktičnim HTML i CSS projektima za početnike

Ključni zahvati

• Prevladavanje pakla udžbenika u HTML-u i CSS-u moguće je kroz praktičnu primjenu i razvoj projekta. Platforme poput Codewella nude predloške dizajna, izvorni kod i sredstva za izradu projekata u stvarnom svijetu.
• devChallenges nudi niz izazova kodiranja u stvarnom svijetu za početnike i iskusne programere. Nudi staze s različitim razinama težine, a ispunjavanje izazova donosi vam certifikate za vaš portfelj.
• Frontend Mentor je popularna platforma koja nudi front-end izazove uparene s profesionalnim web dizajnom. Ima podršku zajednice i pruža resurse za poboljšanje vašeg učenja. Izazovi se mogu dodati u vaš portfelj kako biste povećali prilike za posao.

Pakao udžbenika je problem na koji možete naići kada počnete učiti HTML i CSS. Utapanje u moru tutorijala može vas odbiti i potencijalno spriječiti napredak u razvoju weba. Najlakši način da to prevladate je da se uključite u praktičnu primjenu i razvoj projekta na temelju svega što naučite.

Web stranice na ovom popisu nude HTML i CSS projekte iz stvarnog svijeta. Oni pružaju predloške dizajna, izvorni kod i sredstva za izradu projekata koristeći HTML i CSS.

Codewell nudi niz izazova osmišljenih da vam pomognu uvježbati i poboljšati svoje vještine u HTML-u, CSS-u, JavaScriptu i responzivnom web-dizajnu. Ovi izazovi imaju dvije kategorije: besplatne i premium.

Pod besplatnom opcijom dobivate pristup početnim datotekama koje sadrže sredstva, Readme datoteci koja sadrži informacije o izazovu i PNG datotekama dizajna za desktop, tablet i mobilni prikaz. Odabir premium članstva proširuje vaše pogodnosti, uključujući sve značajke besplatne razine, kao i dodatni Figma predložak.

Kada ispunite izazov i pošaljete svoje rješenje, možete dobiti povratne informacije na web stranici. Da biste poslali rješenje, morat ćete dati vezu na GitHub repo i pregled uživo. Stvaranje GitHub repozitorija i hosting vašeg rješenja na GitHub stranicama su dodatne, vrijedne vještine. Također možete vidjeti rješenja koja su drugi ljudi poslali.

Neki izazovi na Codewellu uključuju odredišne ​​stranice, stranice za prijavu i nadzorne ploče. Sve su to projekti prilagođeni početnicima.

devChallenges vam pomaže naučiti kodiranje vježbanjem dok vas priprema za jedan dan u životu programera. Nudi niz izazova povezanih s projektima iz stvarnog svijeta otvorenih za početnike i iskusne programere.

Postoje besplatni i plaćeni planovi koje možete birati. Plaćeni plan uključuje pro i premium. Korištenjem besplatne opcije dobivate pristup osnovnim značajkama i nekim izazovima. Potonja opcija daje vam pogodnosti kao što su pristup vrhunskim izazovima, Figma dizajn i vodič za raspored izazova.

Platforma grupira izazove u staze, od kojih svaka cilja na različite vještine poput HTML-a i CSS-a, s različitim razinama težine. Nakon što dovršite izazove na jednom putu, dobit ćete certifikat koji ćete uključiti u svoj portfelj.

devChallenges ima stranicu za uređivanje na kojoj možete vidjeti pojedinosti izazova uključujući fontove, boje, slike okvira za prikaz, prikaz rešetke i preuzimanja sredstava. Preuzeta datoteka sadrži samo slike koje su vam potrebne.

Tu je i ploča s najboljim rezultatima, tako da možete biti konkurentni dok vježbate. Platforma promiče angažman zajednice, potičući vas da podijelite svoja rješenja. Nudi pomoć, a možete učiti od drugih korisnika kroz odjeljak rješenja.

Kao i Codewell, morat ćete dati poveznicu na svoj demo i repozitorij da biste poslali svoja rješenja. Sučelje je prijateljsko, tako da nećete imati problema s navigacijom.

Frontend Mentor ističe se kao najpopularniji izbor među platformama na ovom popisu, zahvaljujući brojnim pogodnostima. Ističe se ponudom bogatog izbora front-end izazova uparenih s profesionalnim web dizajnom. Platforma također potiče živu zajednicu web programera koja pruža podršku.

Kao i druge platforme, Frontend Mentor ima besplatne i plaćene opcije. S besplatnom verzijom imat ćete pristup osnovnim značajkama i većini izazova, dok vam verzija koja se plaća daje pristup vrhunskim izazovima, datotekama Figma dizajna i više.

Izazovi spadaju u tri glavne skupine uključujući vrstu, težinu i jezike. Pod jezicima možete pristupiti izazovima za koje su potrebni samo HTML i CSS.

Svaki izazov daje pristup početnoj datoteci koja sadrži mnoštvo resursa, uključujući HTML izvorni kod, Readme datoteku, stilski vodič, slike rasporeda za stolna i mobilna računala i još mnogo toga. Prilikom slanja rješenja imat ćete opciju uključivanja pitanja za zajednicu. Naime, tuđa rješenja možete vidjeti tek nakon što pošaljete svoja.

Frontend Mentor koristi bodovni sustav kako bi vas potaknuo da ispunite izazove. Sve svoje završene projekte možete dodati u a portfelj kako biste se pozicionirali za prilike za posao.

Ono što doista izdvaja Frontend Mentor je njegova stranica s resursima, koja sadrži preko 15 ogranaka materijala za web razvoj. Svaki sadrži odabrani popis izvora između kojih možete birati, tako da možete naučiti sve što će vam ikada trebati za vježbanje.

Konačno, Frontend Mentor odbacuje izazove dva puta mjesečno, što znači da će uvijek biti na čemu raditi.

Frontend Practice se razlikuje od ostalih platformi na nekoliko načina. Prvo, ne sadrži izazove; umjesto toga nudi projekte. Ovi projekti su stvarne web stranice koje pripadaju pravim tvrtkama koje ćete ponovno kreirati. Ne trebate niti račun da isprobate ove projekte.

Za početak, ne postoji izvorni kod. Umjesto toga, opis projekta sadrži vanjske poveznice za foto sredstva i ikone, poveznicu na live web mjesto, referentnu sliku, palete boja i odabrani popis resursa koji će vam trebati za dovršetak projekt. Uz to, dobivate popis koncepata koje ćete naučiti kroz završetak projekta i pokazivače težine koje možete koristiti.

Platforma nudi razinu težine od tri razine, ali, kao početniku, vaš primarni fokus bit će na prvoj razini. Ovdje možete vježbati HTML, CSS, responzivnost, animaciju i više. Nadalje, imate dopuštenje uključiti projekte u svoj portfelj, pod uvjetom da se pridržavate jednog pravila navedenog na web stranici.

Frontend Practice izvrstan je izbor ako želite unaprijediti svoje vještine rekreiranjem postojećih web stranica, počevši od nule kako biste uvježbali svoje HTML vještine.

Sve ove platforme u kombinaciji dat će vam dovoljno sadržaja za upotrebu stvaranje vašeg portfelja programera. Dok vježbate, moći ćete raditi poboljšanja i razumjeti nove koncepte, jačajući svoje samopouzdanje i pomažući vam da se uhvatite u koštac s paklom udžbenika.

Usavršite svoje HTML i CSS vještine kroz praksu

Pakao podučavanja bit će izazov, ali možete ga prevladati vježbom. Mogućnosti su uistinu beskrajne, a sve počinje poduzimanjem tog prvog koraka. Prihvaćajući osmišljene izazove i projekte iz stvarnog svijeta, koristit ćete svoje znanje o HTML-u i CSS-u i nadograđivati ​​ga.

Bez obzira na put koji odaberete, krećete na put rasta i razvoja, poboljšavajući svoje vještina i jačanja samopouzdanja na tom putu, prihvatite praktični pristup, stvarajte, učite i cvjetati