4 nettsteder med praktiske HTML- og CSS-prosjekter for nybegynnere

Viktige takeaways

• Å overvinne veiledningshelvete i HTML og CSS er mulig gjennom praktisk applikasjons- og prosjektutvikling. Plattformer som Codewell tilbyr designmaler, kildekode og eiendeler for å bygge virkelige prosjekter.
• devChallenges tilbyr en rekke virkelige kodeutfordringer for nybegynnere og erfarne utviklere. Den tilbyr stier med varierende vanskelighetsgrader, og gjennomføring av utfordringer gir deg sertifikater for porteføljen din.
• Frontend Mentor er en populær plattform som tilbyr frontend-utfordringer sammen med profesjonelle webdesigner. Den har et støttende fellesskap og gir ressurser for å forbedre læringen din. Utfordringer kan legges til porteføljen din for å øke jobbmulighetene.

Opplæringshelvete er et problem du kan støte på når du begynner å lære HTML og CSS. Å drukne i et hav av opplæringsprogrammer kan sette deg av og potensielt hindre fremdriften i nettutviklingen din. Den enkleste måten å overvinne det på er å engasjere seg i praktisk anvendelse og prosjektutvikling basert på alt du lærer.

Nettstedene på denne listen tilbyr virkelige HTML- og CSS-prosjekter. De tilbyr designmaler, kildekode og eiendeler for å bygge prosjekter ved hjelp av HTML og CSS.

Codewell tilbyr en rekke utfordringer designet for å hjelpe deg med å øve og forbedre ferdighetene dine i HTML, CSS, JavaScript og responsiv webdesign. Disse utfordringene har to kategorier: gratis og premium.

Under det gratis alternativet får du tilgang til startfiler som inneholder eiendeler, en Readme-fil som inneholder informasjon om utfordringen, og PNG-designfiler for skrivebord, nettbrett og mobilvisning. Å velge premium-medlemskapet utvider fordelene dine, inkludert alle funksjonene til gratisnivået, samt en ekstra Figma-mal.

Når du fullfører utfordringen og sender inn løsningen din, kan du få tilbakemelding på nettsiden. For å sende inn en løsning, må du gi en lenke til GitHub-repoen og live forhåndsvisning. Opprette et GitHub-depot og å være vert for løsningen din på GitHub-sider er ekstra, verdifulle ferdigheter. Du kan også se løsninger som andre har sendt inn.

Noen utfordringer på Codewell inkluderer landingssider, registreringssider og dashbord. Dette er alle nybegynnervennlige prosjekter.

devChallenges hjelper deg å lære koding ved å øve mens du forbereder deg på en dag i livet som utvikler. Det tilbyr en rekke utfordringer knyttet til virkelige prosjekter som er åpne for nybegynnere og erfarne utviklere.

Det er gratis og betalte planer du kan velge mellom. Den betalte planen inkluderer pro og premium. Ved å bruke det gratis alternativet får du tilgang til de grunnleggende funksjonene og noen utfordringer. Det siste alternativet gir deg fordeler som tilgang til premium-utfordringer, Figma-design og en guide for utfordringsavstand.

Plattformen grupperer utfordringer i baner, hver rettet mot forskjellige ferdigheter som HTML og CSS, med varierende vanskelighetsnivåer. Når du har fullført utfordringene på én vei, får du et sertifikat som skal inkluderes i porteføljen din.

devChallenges har en redigeringsside hvor du kan se detaljene for utfordringen, inkludert fonter, farger, visningsportbilder, rutenettvisning og nedlasting av eiendeler. Den nedlastede filen inneholder bare bilder du trenger.

Det er også en ledertavle, slik at du kan bli konkurransedyktig mens du øver. Plattformen fremmer samfunnsengasjement, og oppmuntrer deg til å dele løsningene dine. Den tilbyr assistanse, og du kan lære av andre brukere gjennom løsningsdelen.

I likhet med Codewell, må du gi en lenke til demoen og depotet for å sende inn løsningene dine. Grensesnittet er vennlig, så du har ingen problemer med å navigere i det.

Frontend Mentor skiller seg ut som det mest populære valget blant plattformene i denne listen, takket være de mange fordelene. Den skiller seg ut ved å tilby et rikt utvalg front-end-utfordringer sammen med profesjonelle webdesigner. Plattformen fremmer også et levende og støttende fellesskap av nettutviklere.

Som andre plattformer har Frontend Mentor både gratis og betalte alternativer. Med gratisversjonen har du tilgang til grunnleggende funksjoner og de fleste utfordringer, mens den betalte versjonen gir deg tilgang til premium-utfordringer, Figma-designfiler og mer.

Utfordringene faller inn under tre hovedgrupper, inkludert type, vanskelighetsgrad og språk. Under språk kan du få tilgang til utfordringer som bare krever HTML og CSS for å fullføre.

Hver utfordring gir tilgang til en startfil som inneholder et vell av ressurser, inkludert HTML-kildekode, en Readme-fil, en stilguide, bilder for skrivebords- og mobillayout og mer. Når du sender inn løsningen din, har du muligheten til å inkludere spørsmål til fellesskapet. Spesielt kan du se andres løsninger først etter at du har sendt inn dine egne.

Frontend Mentor bruker et poengsystem for å oppmuntre deg til å fullføre utfordringer. Du kan legge til alle dine ferdige prosjekter i en portefølje for å posisjonere deg for jobbmuligheter.

Det som virkelig skiller Frontend Mentor ut er ressurssiden, som inneholder over 15 grener av webutviklingsmateriell. Hver har en kurert liste over ressurser som du kan velge mellom, slik at du kan lære alt du trenger å øve.

Til slutt slipper Frontend Mentor utfordringer to ganger i måneden, noe som betyr at det alltid vil være noe å jobbe med.

Frontend Praksis skiller seg fra de andre plattformene på flere måter. For det første har den ikke utfordringer; i stedet tilbyr den prosjekter. Disse prosjektene er ekte nettsteder som tilhører ekte selskaper som du skal gjenskape. Du trenger heller ikke en konto for å prøve disse prosjektene.

Til å begynne med er det ingen kildekode. I stedet inneholder prosjektbeskrivelsen eksterne lenker for bildeelementer og ikoner, en lenke til live nettsted, et referansebilde, fargepaletter og en kuratert liste over ressurser du trenger for å fullføre prosjekt. I tillegg får du en liste over konsepter du vil lære gjennom prosjektfullføring og vanskelighetstips du kan bruke.

Plattformen tilbyr en vanskelighetsgrad på tre nivåer, men som nybegynner vil ditt primære fokus være på nivå én. Her kan du øve på HTML, CSS, respons, animasjon og mer. Videre har du tillatelse til å inkludere prosjektene i porteføljen din, forutsatt at du overholder en enkelt regel angitt på nettsiden.

Frontend Practice er et utmerket valg hvis du ønsker å forbedre ferdighetene dine ved å gjenskape eksisterende nettsteder, med start fra bunnen av for å trene HTML-ferdighetene dine.

Alle disse plattformene kombinert vil gi deg nok innhold til å bruke når lage din utviklerportefølje. Mens du øver, vil du kunne gjøre forbedringer og forstå nye konsepter, øke selvtilliten din og hjelpe deg med å takle opplæringshelvete.

Finish HTML- og CSS-ferdighetene dine gjennom praksis

Opplæringshelvete vil være en utfordring, men du kan overvinne det med øvelse. Mulighetene er virkelig uendelige, og det hele begynner med å ta det første skrittet. Ved å ta på seg utformede utfordringer og virkelige prosjekter, vil du bruke HTML- og CSS-kunnskapen din og legge til den.

Uansett hvilken vei du velger, legger du ut på en reise med vekst og utvikling, og forbedrer din ferdigheter og øke selvtilliten din underveis, omfavn den praktiske tilnærmingen, skap, lær og blomstre