Het is altijd spannend als je voor het eerst een nieuwe vaardigheid probeert te leren. Vooral coderen.
Hoewel, als je niet oefent, vergeet je het meeste van wat je leert. Daarom realiseer je je op een gegeven moment dat je moet oefenen wat je hebt geleerd. Anders vergeet je alles.
Dat is waar projecten om de hoek komen kijken. Projecten zijn een goede manier om te oefenen wat je geleerd hebt. En geloof me, je wilt aan een aantal projecten werken. Je kunt de projecten gebruiken om te laten zien waar je aan hebt gewerkt.
Als nieuweling kan het kiezen van projecten die bij je huidige kennisniveau passen ontmoedigend zijn. Misschien kies je een project. Dan wordt het project te groot om met je huidige kennis te kunnen uitvoeren. Tenminste, dat is wat ik heb meegemaakt op deze leerreis.
Ik heb een aantal projecten samengesteld die ik heb gevonden die geschikt zijn, zelfs als je kennis beperkt is tot HTML en CSS alleen. Deze projecten zijn beschikbaar in populaire leerwebsites waar u aanvullende informatie vindt over wat u zult aanpakken.
1. Een eerbetoonpagina
Schrijf een eerbetoon aan iemand die je bewondert en publiceer dit als webpagina. In dit project moet je werken met afbeeldingen, links, lijsten en alinea’s. Voor het maken van dit project is kennis van HTML vereist. Je kunt echter een beetje CSS gebruiken om het project er beter uit te laten zien.
2. Een enquêteformulier
Formulieren zijn handig bij het online verzamelen van gegevens. Dit project zal vooral uw vaardigheden testen met betrekking tot allerlei soorten invoer. Dit zal je kennis van formulieren en het structureren van je webpagina testen. Het formulier hoeft geen gegevens te versturen.
Het is een opbouw vanaf de tribuutpagina. Dit project vereist kennis van html/html5 om te maken.
3. Bouw een productlandingspagina
Hiermee wordt uw kennis van zowel HTML als CSS op de proef gesteld. U zult moeten oefenen met het maken van kolommen en het uitlijnen van items binnen de kolommen. U zult ook basisbewerkingen van afbeeldingen moeten uitvoeren, bijv. bijsnijden en de grootte aanpassen om perfecte afbeeldingen voor uw webpagina te maken.
U hebt een gedegen kennis van HTML/CSS nodig.
4. Bouw een technische documentatiepagina
Hiervoor is enige kennis van HTML CSS en bootstrap of JavaScript nodig. Het basisidee is: als je op een onderwerp aan de linkerkant klikt, wordt die inhoud aan de rechterkant geladen.
Ik ben momenteel bezig met dit project en ik zal het uiteindelijke project posten zodra het klaar is.
5. Bouw een persoonlijke portfoliowebsite
Je zult alle vaardigheden die je in HTML en CSS hebt geleerd in de praktijk brengen. Je zult ook moeten weten hoe je afbeeldingen bijsnijdt en de grootte ervan aanpast. Als je geen opties hebt, gebruik dan Gimp. Het is gratis, open source en beschikbaar voor Windows en Linux.
Als je haast hebt met het maken van een portfolio, kun je Brian’s artikel lezen over het maken van een online portfolio met behulp van een kant-en-klaar thema/template.
6. Google.com pagina
Ja, je hebt het al vaak gezien. Maar kunt u het namaken. De eenvoudige google.com-pagina met pictogrammen, het logo van google, een tekstvak en twee knoppen. Je kunt een look-alike van google.com pagina maken. In dit project laat je het eruit zien als google.com niet functioneren als google.com.
Je moet zowel HTML als CSS kennen.
7. google.com Zoekresultatenpagina
Je maakt een pagina met het formaat van een google zoekresultaat. Uw pagina moet de normale 10 resultaten hebben en de navigatie naar volgende pagina’s onderaan.
Dit is een upgrade van de basispagina van google.com hierboven. U zou echter een deel van de code van dit project moeten kunnen hergebruiken.
Ook zou de pagina er enigszins uit moeten zien, maar de functionaliteit zou op dit moment geen punt van zorg moeten zijn.
Conclusie
Als u de grondbeginselen van HTML wilt leren, kunt u mijn korte inleidende les in HTML bekijken.
Heeft u een basisproject gemaakt terwijl u HTML en CSS leerde? Zo ja, deel ze hieronder en help andere leerlingen om ‘eenvoudige’ maar uitdagende ideeën te vinden om uit te proberen.