4 webbplatser med praktiska HTML- och CSS-projekt för nybörjare

Viktiga takeaways

• Att övervinna tutorial helvetet i HTML och CSS är möjligt genom praktisk tillämpning och projektutveckling. Plattformar som Codewell erbjuder designmallar, källkod och tillgångar för att bygga verkliga projekt.
• devChallenges erbjuder en rad verkliga kodningsutmaningar för nybörjare och erfarna utvecklare. Den erbjuder vägar med varierande svårighetsnivåer, och genom att slutföra utmaningar får du certifikat för din portfölj.
• Frontend Mentor är en populär plattform som erbjuder frontend-utmaningar i kombination med professionell webbdesign. Den har en stödjande gemenskap och tillhandahåller resurser för att förbättra ditt lärande. Utmaningar kan läggas till din portfölj för att öka jobbmöjligheterna.

Tutorial helvetet är ett problem du kan stöta på när du börjar lära dig HTML och CSS. Att drunkna i ett hav av tutorials kan avskräcka dig och potentiellt hindra din webbutveckling framsteg. Det enklaste sättet att övervinna det är att engagera sig i praktisk tillämpning och projektutveckling baserat på allt du lär dig.

Webbplatserna på denna lista erbjuder verkliga HTML- och CSS-projekt. De tillhandahåller designmallar, källkod och tillgångar för att bygga projekt med HTML och CSS.

Codewell erbjuder en rad utmaningar utformade för att hjälpa dig öva och förbättra dina kunskaper i HTML, CSS, JavaScript och responsiv webbdesign. Dessa utmaningar har två kategorier: gratis och premium.

Under det kostnadsfria alternativet får du tillgång till startfiler som innehåller tillgångar, en Readme-fil som innehåller information om utmaningen och PNG-designfiler för skrivbordet, surfplattan och mobilvyn. Att välja premiummedlemskapet utökar dina förmåner, inklusive alla funktionerna i den kostnadsfria nivån, samt en extra Figma-mall.

När du genomför utmaningen och skickar in din lösning kan du få feedback på hemsidan. För att skicka in en lösning måste du tillhandahålla en länk till dess GitHub-repo och liveförhandsvisning. Skapa ett GitHub-förråd och att vara värd för din lösning på GitHub-sidor är ytterligare, värdefulla färdigheter. Du kan också se lösningar som andra har skickat in.

Några utmaningar på Codewell inkluderar målsidor, registreringssidor och instrumentpaneler. Dessa är alla nybörjarvänliga projekt.

devChallenges hjälper dig att lära dig kodning genom att öva samtidigt som du förbereder dig för en dag i livet som utvecklare. Det erbjuder en rad utmaningar relaterade till verkliga projekt öppna för nybörjare och erfarna utvecklare.

Det finns gratis och betalda planer du kan välja mellan. Den betalda planen inkluderar pro och premium. Genom att använda det kostnadsfria alternativet får du tillgång till de grundläggande funktionerna och några utmaningar. Det senare alternativet ger dig förmåner som tillgång till premiumutmaningar, Figma-design och en guide för utmaningsavstånd.

Plattformen grupperar utmaningar i vägar, var och en inriktad på olika färdigheter som HTML och CSS, med varierande svårighetsnivåer. När du har slutfört utmaningarna på en väg får du ett certifikat att inkludera i din portfölj.

devChallenges har en redigeringssida där du kan se detaljerna för utmaningen inklusive typsnitt, färger, visningsportbilder, rutnätsvisning och nedladdningar av tillgångar. Den nedladdade filen innehåller bara bilder du behöver.

Det finns också en topplista så att du kan bli konkurrenskraftig medan du tränar. Plattformen främjar samhällsengagemang och uppmuntrar dig att dela dina lösningar. Den erbjuder hjälp och du kan lära dig av andra användare genom lösningsavsnittet.

Precis som Codewell måste du tillhandahålla en länk till din demo och ditt arkiv för att skicka in dina lösningar. Gränssnittet är vänligt, så du har inga problem att navigera i det.

Frontend Mentor sticker ut som det mest populära valet bland plattformarna i den här listan, tack vare dess många förmåner. Det skiljer sig genom att erbjuda ett rikt urval av front-end-utmaningar i kombination med professionell webbdesign. Plattformen främjar också en levande och stödjande gemenskap av webbutvecklare.

Precis som andra plattformar har Frontend Mentor både gratis och betalda alternativ. Med gratisversionen har du tillgång till grundläggande funktioner och flertalet utmaningar, medan betalversionen ger dig tillgång till premiumutmaningar, Figma-designfiler och mer.

Utmaningarna faller under tre huvudgrupper inklusive typ, svårighetsgrad och språk. Under språk kan du komma åt utmaningar som bara kräver HTML och CSS för att slutföra.

Varje utmaning ger tillgång till en startfil som innehåller en mängd resurser, inklusive HTML-källkod, en Readme-fil, en stilguide, skrivbords- och mobillayoutbilder och mer. När du skickar in din lösning har du möjlighet att inkludera frågor till communityn. Särskilt kan du se andras lösningar först efter att du har skickat in din egen.

Frontend Mentor använder ett poängsystem för att uppmuntra dig att klara utmaningar. Du kan lägga till alla dina färdiga projekt till en portfölj för att positionera dig för jobbmöjligheter.

Det som verkligen skiljer Frontend Mentor åt är dess resurssida, som innehåller över 15 grenar av webbutvecklingsmaterial. Var och en har en utvald lista med resurser som du kan välja mellan, så att du kan lära dig allt du någonsin behöver träna.

Slutligen, Frontend Mentor släpper utmaningar två gånger i månaden, vilket betyder att det alltid kommer att finnas något att jobba på.

Frontend Practice skiljer sig från de andra plattformarna på flera sätt. För det första innehåller den inga utmaningar; istället erbjuder det projekt. Dessa projekt är riktiga webbplatser som tillhör riktiga företag som du kommer att återskapa. Du behöver inte heller ett konto för att prova dessa projekt.

Till att börja med finns det ingen källkod. Istället innehåller projektbeskrivningen externa länkar för fototillgångar och ikoner, en länk till live webbplats, en referensbild, färgpaletter och en utvald lista över resurser du behöver för att slutföra projekt. Dessutom får du en lista med begrepp som du kommer att lära dig genom att slutföra projekt och svårighetsanvisningar som du kan använda.

Plattformen erbjuder en svårighetsnivå på tre nivåer, men som nybörjare kommer ditt primära fokus att ligga på nivå ett. Här kan du träna HTML, CSS, lyhördhet, animering och mer. Dessutom har du tillåtelse att inkludera projekten i din portfölj, förutsatt att du följer en enda regel som anges på webbplatsen.

Frontend Practice är ett utmärkt val om du vill förbättra dina färdigheter genom att återskapa befintliga webbplatser, börja från början för att öva dina HTML-färdigheter.

Alla dessa plattformar tillsammans kommer att ge dig tillräckligt med innehåll för att använda när skapa din utvecklarportfölj. Medan du övar kommer du att kunna göra förbättringar och förstå nya koncept, vilket ökar ditt självförtroende och hjälper dig ta itu med handledningshelvetet.

Finslipa dina HTML- och CSS-färdigheter genom att träna

Tutorial helvetet kommer att vara en utmaning, men du kan övervinna den med övning. Möjligheterna är verkligen oändliga, och allt börjar med att ta det första steget. Genom att ta dig an skapade utmaningar och verkliga projekt kommer du att använda din HTML- och CSS-kunskap och lägga till den.

Oavsett vilken väg du väljer, ger du dig ut på en resa av tillväxt och utveckling, vilket förbättrar din färdigheter och stärka ditt självförtroende längs vägen, omfamna det praktiska tillvägagångssättet, skapa, lära och frodas