4 site-uri web cu proiecte practice HTML și CSS pentru începători

Recomandări cheie

• Depășirea iadului tutorialului în HTML și CSS este posibilă prin aplicarea practică și dezvoltarea de proiecte. Platforme precum Codewell oferă șabloane de design, cod sursă și active pentru a construi proiecte în lumea reală.
• devChallenges oferă o serie de provocări de codificare din lumea reală pentru începători și dezvoltatori experimentați. Oferă căi cu diferite niveluri de dificultate, iar finalizarea provocărilor vă aduce certificate pentru portofoliul dvs.
• Frontend Mentor este o platformă populară care oferă provocări front-end asociate cu design web profesional. Are o comunitate de sprijin și oferă resurse pentru a vă îmbunătăți învățarea. Provocările pot fi adăugate portofoliului dvs. pentru a crește oportunitățile de angajare.

Iadul tutorialului este o problemă pe care o puteți întâlni când începeți să învățați HTML și CSS. Înecul într-o mare de tutoriale te poate dezamăgi și poate împiedica progresul dezvoltării web. Cel mai simplu mod de a o depăși este să te angajezi în aplicarea practică și dezvoltarea de proiecte pe baza a tot ceea ce înveți.

Site-urile de pe această listă oferă proiecte HTML și CSS din lumea reală. Ele oferă șabloane de design, cod sursă și active pentru a construi proiecte folosind HTML și CSS.

Codewell oferă o serie de provocări menite să vă ajute să vă exersați și să vă îmbunătățiți abilitățile în HTML, CSS, JavaScript și design web responsive. Aceste provocări au două categorii: gratuite și premium.

În cadrul opțiunii gratuite, obțineți acces la fișiere de pornire care conțin active, un fișier Readme care conține informații despre provocare și fișiere de design PNG pentru desktop, tabletă și vizualizare mobilă. Optarea pentru abonamentul premium vă extinde beneficiile, inclusiv toate caracteristicile nivelului gratuit, precum și un șablon Figma suplimentar.

Când finalizați provocarea și trimiteți soluția, puteți primi feedback pe site. Pentru a trimite o soluție, va trebui să furnizați un link către depozitul său GitHub și previzualizarea live. Crearea unui depozit GitHub și găzduirea soluției dvs. pe paginile GitHub sunt abilități suplimentare și valoroase. De asemenea, puteți vedea soluțiile pe care alte persoane le-au trimis.

Unele provocări ale Codewell includ pagini de destinație, pagini de înscriere și tablouri de bord. Toate acestea sunt proiecte prietenoase pentru începători.

devChallenges te ajută să înveți codificare exersând în timp ce te pregătește pentru o zi în viață ca dezvoltator. Oferă o serie de provocări legate de proiecte din lumea reală, deschise începătorilor și dezvoltatorilor experimentați.

Există planuri gratuite și plătite din care puteți alege. Planul plătit include pro și premium. Folosind opțiunea gratuită, aveți acces la funcțiile de bază și la unele provocări. Ultima opțiune vă oferă avantaje precum acces la provocări premium, design Figma și un ghid de spațiere a provocărilor.

Platforma grupează provocările în căi, fiecare vizează abilități diferite precum HTML și CSS, cu diferite niveluri de dificultate. Odată ce ați finalizat provocările într-o singură cale, veți primi un certificat de inclus în portofoliu.

devChallenges are o pagină de editor în care puteți vizualiza detaliile provocării, inclusiv fonturi, culori, imagini de vizualizare, afișare în grilă și descărcări de active. Fișierul descărcat conține doar imagini de care veți avea nevoie.

Există, de asemenea, un clasament, astfel încât să poți deveni competitiv în timp ce exersezi. Platforma promovează implicarea comunității, încurajându-vă să vă împărtășiți soluțiile. Oferă asistență și puteți învăța de la alți utilizatori prin secțiunea de soluții.

La fel ca Codewell, va trebui să furnizați un link către demonstrația și depozitul dvs. pentru a vă trimite soluțiile. Interfața este prietenoasă, așa că nu veți avea probleme în navigarea în ea.

Frontend Mentor se remarcă drept cea mai populară alegere dintre platformele din această listă, datorită numeroaselor sale avantaje. Se deosebește prin oferirea unei selecții bogate de provocări front-end asociate cu design web profesional. Platforma promovează, de asemenea, o comunitate vibrantă și de susținere de dezvoltatori web.

Ca și alte platforme, Frontend Mentor are atât opțiuni gratuite, cât și cu plată. Cu versiunea gratuită, veți avea acces la funcțiile de bază și la majoritatea provocărilor, în timp ce versiunea plătită vă oferă acces la provocări premium, fișiere de design Figma și multe altele.

Provocările se încadrează în trei grupuri principale, inclusiv tipul, dificultatea și limbile. În limbi, puteți accesa provocările care necesită doar HTML și CSS pentru a fi finalizate.

Fiecare provocare oferă acces la un fișier de pornire care conține o mulțime de resurse, inclusiv cod sursă HTML, un fișier Readme, un ghid de stil, imagini de layout desktop și mobile și multe altele. Când trimiteți soluția, veți avea opțiunea de a include întrebări pentru comunitate. În special, puteți vedea soluțiile altor persoane numai după ce le-ați trimis pe ale dvs.

Frontend Mentor folosește un sistem de puncte pentru a vă încuraja să finalizați provocările. Puteți adăuga toate proiectele dvs. terminate la a portofoliu pentru a te poziționa pentru oportunități de angajare.

Ceea ce diferențiază cu adevărat Frontend Mentor este pagina de resurse, care deține peste 15 ramuri de materiale de dezvoltare web. Fiecare include o listă organizată de resurse din care puteți alege, astfel încât să puteți învăța tot ce veți avea nevoie pentru a practica.

În cele din urmă, Frontend Mentor renunță la provocări de două ori pe lună, ceea ce înseamnă că întotdeauna va fi ceva la care să lucrezi.

Practica front-end diferă de celelalte platforme în mai multe moduri. În primul rând, nu prezintă provocări; în schimb, oferă proiecte. Aceste proiecte sunt site-uri web reale care aparțin unor companii reale pe care le veți recrea. Nici nu aveți nevoie de un cont pentru a încerca aceste proiecte.

Pentru început, nu este furnizat niciun cod sursă. În schimb, descrierea proiectului conține link-uri externe pentru materiale și pictograme foto, un link către live site, o imagine de referință, palete de culori și o listă organizată de resurse de care veți avea nevoie pentru a finaliza proiect. În plus, primești o listă de concepte pe care le vei învăța prin finalizarea proiectului și indicații de dificultate pe care le poți folosi.

Platforma oferă un nivel de dificultate cu trei niveluri, dar, în calitate de începător, concentrarea dvs. principală va fi pe nivelul unu. Aici, puteți exersa HTML, CSS, receptivitate, animație și multe altele. În plus, aveți permisiunea de a include proiectele în portofoliu, cu condiția să respectați o singură regulă menționată pe site.

Practica Frontend este o alegere excelentă dacă doriți să vă îmbunătățiți abilitățile prin recrearea site-urilor web existente, pornind de la zero pentru a vă exersa abilitățile HTML.

Toate aceste platforme combinate vă vor oferi suficient conținut pe care să îl utilizați când crearea portofoliului dvs. de dezvoltatori. În timp ce exersați, veți putea aduce îmbunătățiri și înțelege concepte noi, sporindu-vă încrederea și ajutându-vă să abordați iadul tutorialului.

Perfecționați-vă abilitățile HTML și CSS prin practică

Tutorial iadul va fi o provocare, dar îl poți depăși cu practică. Posibilitățile sunt cu adevărat nesfârșite și totul începe cu a face primul pas. Acceptând provocări elaborate și proiecte din lumea reală, vă veți folosi cunoștințele HTML și CSS și veți adăuga la acestea.

Indiferent de calea pe care o alegeți, porniți într-o călătorie de creștere și dezvoltare, îmbunătățindu-vă abilități și creșterea încrederii dvs. pe parcurs, îmbrățișați abordarea practică, creați, învățați și înflori