Det er altid spændende, når man prøver at lære en ny færdighed for første gang. Især kodning.
Men hvis du ikke øver dig, glemmer du det meste af det, du lærer. Derfor indser man på et tidspunkt, at man er nødt til at øve sig på det, man har lært. Ellers glemmer man det hele.
Det er her, at projekter kommer ind i billedet. Projekter er en god måde at øve sig på det, man har lært. Og tro mig, du har lyst til at arbejde på nogle projekter. Du kan bruge projekterne til at vise, hvad du har arbejdet med.
Som nybegynder kan det være skræmmende at vælge projekter, der matcher dit nuværende vidensniveau. Du kan vælge et projekt. Så bliver projektet for stort til, at du kan gennemføre det med din nuværende viden. Det er i hvert fald, hvad jeg har været igennem på denne læringsrejse.
Jeg har kurateret nogle projekter, som jeg har fundet, der er passende, selv om din viden er begrænset til kun at omfatte HTML og CSS. Disse projekter er tilgængelige på populære læringswebsteder, hvor du kan finde yderligere oplysninger om det, du skal tage fat på.
1. En hyldestside
Skriv en hyldest af en person, du beundrer, og udgiv den som en webside. I dette projekt skal du arbejde med at tilføje billeder, links, lister og afsnit. Dette projekt vil kræve kendskab til HTML for at kunne oprettes. Du kan dog bruge en smule CSS for at få projektet til at se bedre ud.
2. En undersøgelsesformular
Formularer er nyttige til indsamling af data online. Dette projekt vil primært teste dine færdigheder i forbindelse med alle former for inddata. Det vil teste din viden om formularer og strukturering af din webside. Det er ikke nødvendigt, at formularen sender data.
Det er en opbygning fra hyldestsiden. Dette projekt vil kræve kendskab til html/html5 for at oprette.
3. Opbygning af en produktlandingsside
Dette vil teste dit kendskab til både HTML og CSS. Du skal øve dig i at oprette kolonner og justere elementer i kolonnerne. Du skal også foretage grundlæggende redigering af billeder, f.eks. beskæring og størrelsesændring for at lave perfekte billeder til din webside.
Du skal have et solidt kendskab til HTML/CSS.
4. Opbygning af en teknisk dokumentationsside
Dette vil kræve et vist kendskab til HTML CSS og bootstrap eller JavaScript. Den grundlæggende idé er: Når du klikker på et emne til venstre, indlæses det pågældende indhold til højre.
Jeg er i gang med at forsøge dette projekt, og jeg vil poste det endelige projekt, når det er færdigt.
5. Opbygning af en personlig portfolio-webside
Du vil øve dig i alle de færdigheder, du har lært i HTML og CSS. Du skal også vide, hvordan du beskærer og ændrer størrelsen på billeder. Hvis du ikke har muligheder, skal du bruge Gimp. Det er gratis, open source og fås til Windows og Linux.
Hvis du har travlt med at lave en portfolio, kan du læse Brians artikel om at lave en online-portfolio ved hjælp af et færdigt tema/skabelon.
6. Google.com-siden
Ja, du har set det mange gange. Men kan du replikere det. Den simple google.com-side med ikoner, googles logo, et tekstfelt og to knapper. Du kan lave en look-alike af google.com-siden. I dette projekt får du den til at ligne google.com ikke til at fungere som google.com.
Du skal kende både HTML og CSS.
7. google.com søgeresultatside
Du skal lave en side med formatet af et google søgeresultat. Din side skal have de normale 10 resultater og navigationen til de næste sider i bunden.
Dette er en opgradering af den grundlæggende google.com-side ovenfor. Du bør dog kunne genbruge noget af koden på dette projekt.
Også, lave siden skal se noget ud, men funktionaliteten bør ikke være et problem lige nu.
Konklusion
Hvis du ønsker at lære det grundlæggende i HTML, kan du tjekke min korte introduktionslektion i HTML.
Har du lavet et grundlæggende projekt, mens du lærte HTML og CSS? Hvis du gjorde, kan du dele dem nedenfor og hjælpe andre elever med at finde “enkle”, men udfordrende idéer at afprøve.