Det är alltid spännande första gången du försöker lära dig en ny färdighet. Särskilt kodning.
Men om du inte övar på det glömmer du det mesta av det du lär dig. Därför inser du vid någon tidpunkt att du måste öva på det du har lärt dig. Annars kommer man att glömma allt.
Det är där projekten kommer in. Projekt är ett bra sätt att öva på det man har lärt sig. Och tro mig, du vill arbeta med några projekt. Du kan använda projekten för att visa upp vad du har arbetat med.
Som nybörjare kan det vara skrämmande att välja projekt som motsvarar din nuvarande kunskapsnivå. Du kanske väljer ett projekt. Sedan blir projektet för stort för att kunna genomföras med din nuvarande kunskap. Åtminstone är det vad jag har gått igenom på denna inlärningsresa.
Jag har sammanställt några projekt som jag har funnit lämpliga även om dina kunskaper är begränsade till endast HTML och CSS. Dessa projekt finns på populära webbplatser för inlärning där du hittar ytterligare information om vad du ska ta itu med.
1. En hyllningssida
Skriv en hyllning av någon du beundrar och publicera som en webbsida. I det här projektet kommer du att arbeta med att lägga till bilder, länkar, listor och stycken. Projektet kräver kunskaper i HTML för att kunna skapas. Du kan dock använda lite CSS för att få projektet att se bättre ut.
2. Ett enkätformulär
Formulär är användbara när det gäller att samla in data online. I det här projektet kommer du främst att testa dina färdigheter när det gäller alla typer av inmatningar. Det kommer att testa dina kunskaper om formulär och strukturering av din webbsida. Formuläret behöver inte skicka några uppgifter.
Det är en uppbyggnad från hyllningssidan. Detta projekt kräver kunskaper i html/html5 för att skapas.
3. Bygg en produktlandningssida
Detta kommer att testa dina kunskaper i både HTML och CSS. Du måste öva på att skapa kolumner och anpassa objekt i kolumnerna. Du måste också göra grundläggande redigering av bilder, t.ex. beskära och ändra storlek för att skapa perfekta bilder för din webbsida.
Du behöver gedigna kunskaper i HTML/CSS.
4. Bygg en teknisk dokumentationssida
Detta kräver vissa kunskaper i HTML CSS och bootstrap eller JavaScript. Den grundläggande idén är: när du klickar på ett ämne till vänster laddas innehållet till höger.
Jag försöker för närvarande genomföra detta projekt och jag kommer att publicera det slutliga projektet när det är färdigt.
5. Bygg en personlig portfoliowebbplats
Du kommer att öva på alla de färdigheter du har lärt dig i HTML och CSS. Du kommer också att behöva veta hur man beskär och ändrar storlek på bilder. Om du inte har några alternativ kan du använda Gimp. Det är gratis, har öppen källkod och finns på Windows och Linux.
Om du har bråttom att göra en portfölj kan du läsa Brians artikel om att göra en onlineportfölj med hjälp av ett färdigt tema/mall.
6. Google.com-sidan
Ja, du har sett den många gånger. Men kan du kopiera den. Den enkla sidan google.com med ikoner, Googles logotyp, en textruta och två knappar. Du kan göra en look-alike av google.com-sidan. I det här projektet får du den att se ut som google.com inte fungera som google.com.
Du måste kunna både HTML och CSS.
7. google.com Sökresultatssida
Du kommer att skapa en sida med formatet av ett google-sökresultat. Din sida ska ha de normala 10 resultaten och navigationen till nästa sidor längst ner.
Detta är en uppgradering av den grundläggande google.com-sidan ovan. Du bör dock kunna återanvända en del av koden i det här projektet.
För övrigt bör göra sidan se något men funktionaliteten bör inte vara ett bekymmer just nu.
Slutsats
Om du vill lära dig grunderna i HTML kan du kolla in min korta introduktionslektion i HTML.
Gjorde du ett grundläggande projekt när du lärde dig HTML och CSS? Om du gjorde det kan du dela med dig av dem nedan och hjälpa andra elever att hitta ”enkla” men utmanande idéer att prova.