Leren coderen is altijd spannend en leuk voor iedereen en als het gaat om stappen in de programmeerwereld beginnen de meeste mensen met het makkelijkste HTML en CSS. De coderingsreis van elke beginner in frontend begint met deze twee basisbouwstenen en je moet creatief zijn als het gaat om het ontwerpen van een mooie toepassing.
In eerste instantie vinden beginners het leuk om knoppen te maken, links toe te voegen, afbeeldingen toe te voegen, met lay-out te werken en nog veel meer leuke dingen op het gebied van webdesign, maar als het aankomt op het maken van een project met alleen HTML en CSS, komen ze vast te zitten en raken ze in de war over wat ze moeten maken om al deze dingen te oefenen. Hun kennis is immers beperkt tot HTML en CSS. Hoe dan ook, nadat je alles geleerd hebt, zul je je op een gegeven moment realiseren dat het maken van een project belangrijk is om HTML en CSS vaardigheden te oefenen. Je moet nagaan hoe HTML en CSS samenwerken om een mooie frontend applicatie te ontwerpen. Dus de vraag is wat zijn enkele beginners-vriendelijke projecten die je kunt bouwen om alles wat je geleerd hebt te oefenen…Laten we dat bespreken.
Een Tribute Page
De eenvoudigste website die je als beginner kunt maken is een tribute pagina van iemand die je bewondert in je leven. Het vereist slechts basiskennis van HTML en CSS. Maak een webpagina schrijven over die persoon toe te voegen zijn / haar afbeelding. Bovenaan de webpagina voeg je de afbeelding en de naam van de persoon toe en daaronder geef je lay-out voor de rest van de details. U kunt gebruik maken van paragrafen, lijsten, links, afbeeldingen met CSS om het een fatsoenlijk uiterlijk te geven. Voeg een geschikte achtergrondkleur en lettertype stijl op uw webpagina. De meeste onderdelen kunt u maken met behulp van HTML, maar om het een betere look te geven met behulp van een beetje CSS. Neem hulp van de hieronder gegeven link.
- Mijn Tribute Page
- Tribute Page to Steve Jobs
- Tribute Page to Albert Einstein
Webpage Including Form
Formulieren zijn altijd een essentieel onderdeel van elk project en u zult werken met een heleboel formulieren in de meeste van de toepassingen dus waarom niet eerder oefenen en test uw kennis. Als je eenmaal bekend bent met het invoerveld of de basistags in HTML om een formulier te maken, maak dan een project met al die tags. Hoe gebruik je een tekstveld, selectievakje, keuzerondje, datum, en andere belangrijke elementen in een formulier. Je leert hoe je een webpagina een goede structuur geeft bij het maken van een formulier. Kennis van HTML/HTML5 is goed genoeg, maar je kunt een beetje CSS gebruiken om het project er beter uit te laten zien. Neem hulp van de links hieronder.
- Survey Form
- Good Vibes Form
Parallax Website
Een parallax website bevat vaste afbeeldingen op de achtergrond die je op hun plaats kunt houden en je kunt naar beneden scrollen op de pagina om verschillende delen van de afbeelding te zien. Met basiskennis van HTML en CSS kunt u een parallax-effect aan een website geven. Het gebruik van het parallax effect in web design is echt populair en het geeft een prachtige look en feel aan de webpagina. Probeer het eens en verdeel de hele pagina in drie tot vier verschillende secties. Stel 3-4 achtergrondafbeeldingen in, lijn de tekst uit voor verschillende secties, stel marge en opvulling in, voeg background-position en andere CSS elementen en eigenschappen toe om een parallax effect te creëren. U kunt hulp nemen van Parallax Website.
Landing Page
Een landing page is een ander goed project dat u kunt maken met behulp van HTML en CSS, maar het vereist een gedegen kennis van deze twee bouwstenen. Je zult veel creativiteit gebruiken bij het maken van een landingspagina. Je zult oefenen hoe je een voettekst en koptekst toevoegt, kolommen maakt, items uitlijnt, de secties verdeelt en nog veel meer. Je zult CSS zorgvuldig moeten gebruiken en in gedachten houden dat verschillende elementen elkaar niet overlappen. U zult ook moeten zorgen voor kleurencombinaties, padding, marge, ruimte tussen secties, paragrafen en boxen. Kleurencombinaties moeten goed bij elkaar passen voor verschillende secties of achtergronden. U kunt hulp nemen van de hieronder gegeven link.
- Full Screen Landing
- Landing Page
Restaurant Website
Showcase uw solide kennis van HTML en CSS het creëren van een mooie webpagina voor een restaurant. Het maken van een lay-out voor een restaurant zal een beetje ingewikkelder zijn dan de vorige projectvoorbeelden. Je zult de verschillende etenswaren en drankjes uitlijnen met behulp van een CSS layout grid. Je zult prijzen en afbeeldingen toevoegen en je moet het ook een mooie look en feel geven door gebruik te maken van de juiste combinatie van kleuren, font-style en afbeeldingen. U kunt een fotogalerij toevoegen voor verschillende gerechten, u kunt ook verschuifbare afbeeldingen toevoegen voor een betere look. Voeg links toe voor doorverwijzing naar interne pagina’s. Maak het responsief instellen van een viewport, met behulp van media queries en raster. U kunt hulp nemen van Restaurant Website.
Een evenement of conferentie webpagina
U kunt een statische pagina met een evenement of conferentie te maken. Mensen die geïnteresseerd zijn in het bijwonen van de conferentie maak een knop registreren voor hen. Vermeld verschillende links voor spreker, locatie en schema aan de bovenkant in de header sectie. Beschrijf het doel van de conferentie of de categorie van mensen die baat kunnen hebben bij deze conferentie. Voeg een inleiding en afbeeldingen van de spreker, de locatie en het hoofddoel van de conferentie toe op uw webpagina. Verdeel de pagina in secties, voeg een header en footer toe die het menu tonen. Gebruik de juiste achtergrondkleur die goed bij elkaar past voor de verschillende secties. Kies een fatsoenlijk lettertype stijl en letterkleur die past bij het thema van uw webpagina. Dit vereist een grondige kennis van HTML/HTML5 en CSS. U kunt hulp nemen van de Style Conference.
Music Store Page
Als u een muziekliefhebber bent kunt u daar een webpagina voor maken. Het vereist HTML5/CSS3 kennis. Voeg een geschikte achtergrondafbeelding toe die het doel beschrijft of waar de pagina over gaat. Voeg in de header verschillende menu’s toe. Voeg knoppen, links, afbeeldingen en een beschrijving over de collectie van de beschikbare nummers toe. Vermeld onderaan de links voor winkelen, winkel, carrière of contactgegevens. U kunt ook andere functies op uw webpagina’s, zoals een trial optie, cadeaubonnen of abonnement. Maak het responsieve instelling viewport of het gebruik van media queries en grid. U kunt hulp nemen van de myTunes.
Fotografiesite
Als u een grondige kennis van HTML5 en CSS3 hebt, kunt u een een-pagina responsieve fotografiesite maken. Gebruik flexbox en media queries voor responsiviteit. Voeg de bedrijfsnaam toe met een afbeelding (gerelateerd aan fotografie) aan de bovenkant (landingspagina). Daaronder toon je je werk door meerdere afbeeldingen toe te voegen. Vermeld de contactgegevens van de fotograaf aan de onderkant (footer). Voeg een knop toe om je werk te bekijken. Deze knop brengt u direct naar de afbeeldingen sectie. Je moet zorgen voor de marge, padding, kleurencombinatie, font-size, font-style, afbeeldingsgrootte en styling van een knop. U kunt hulp nemen van de Acme Photography.
Personal Portfolio
Met kennis van HTML5 en CSS3 kunt u ook uw portfolio maken. Showcase uw werk voorbeelden en vaardigheden in uw portfolio met uw naam en foto’s. Je kunt ook je CV daar toevoegen en je complete portfolio hosten op GitHub account. Vermeld in je header sectie enkele menu’s zoals over, contact, werk of diensten. Voeg bovenaan een van je foto’s toe en stel jezelf daar voor. Daaronder voeg je enkele voorbeelden van je werk toe en als laatste (footer) voeg je contactinformatie of social media account toe. Je kunt hulp nemen van de Persoonlijke Portfolio.
Technische Documentatie
Als je een beetje kennis hebt van Javascript dan kun je een webpagina maken van technische documentatie. Het vereist kennis van HTML, CSS en basis javascript. Verdeel de hele webpagina in twee secties. De linkerkant creëert een menu met alle onderwerpen opgesomd van boven naar beneden. De rechterkant moet je de documentatie of beschrijving voor de onderwerpen te vermelden. Het idee is als je eenmaal klikt op een van de onderwerpen in de linker sectie moet het laden van de inhoud aan de rechterkant. Voor het klikken, kunt u ofwel javascript of CSS bladwijzer optie. Je hoeft het niet te fancy te maken, geef het gewoon een simpele en fatsoenlijke look, dat ziet er goed uit voor technische documentatie. U kunt hulp nemen van Technische Documentatie.
Helpful Link: 10 Tips voor effectief webontwerp in 2019
