Heb je ooit geknikt om te bevestigen dat je iets begrijpt, maar stiekem begreep je het niet? En dan denk je, OMG, waarom deed ik dat? En vervolgens wordt er een vraag gesteld over hetgeen waarvan je zei dat je het wist, of erger nog, je krijgt een taak toegewezen om hetgeen te doen waarvan je zei dat je het wist. Nachtmerrie! Nou, gelukkig voor jou, als je verder leest, heb je dat probleem niet als het gaat om CSS, HTML en Javascript. Maar misschien zul je het nog steeds doen in andere aspecten van je leven, zoals proberen indruk te maken op iemand tijdens een date. Jij: "o ja, ik houd van die band" - *googelt de band in de badkamer* (trouwens, daar moet je echt mee ophouden), maar ach, één ding tegelijk, we zijn ook maar mensen ;).
Hoe dan ook, laten we er niet omheen draaien. Als je hebt gespeeld met het idee om je eigen website te bouwen of ooit die van iemand anders hebt moeten beheren, ben je waarschijnlijk HTML, CSS en Javascript tegengekomen. Dit zijn de drie belangrijkste bouwstenen van elke website of webpagina. Ze werken samen, maar, zoals we zullen uitleggen, spelen ze allemaal een eigen rol als het gaat om codering en het maken van websites.
Wat is HTML?
Misschien heb je ooit op het kleine HTML-pictogram (</>) geklikt en een heleboel wat leek op willekeurige, verwarrende tekst en symbolen gezien, waar je je te pletter van schrok en die je het gevoel gaven dat je in een lowbudgetversie van The Matrix was gestapt en dat je een paar keer op Esc hebt gedrukt in de hoop dat het wegging? En dat je bad dat je niets had verprutst? Dat, mijn vriend, is de wereld van HTML; we beloven dat het niet zo eng of zelfs verwarrend is als het lijkt. Als je het eenmaal gaat begrijpen, is het een andere taal of wereld die je gaat waarderen en waar je misschien zelfs van gaat houden. Laten we beginnen met waar HTML voor staat; het is de afkorting voor Hypertext Markup Language. Hypertext is in wezen de "structurele tekst" en een opmaaktaal. Het is een speciale "taal" of "inhoud" die computers begrijpen, die oorspronkelijk is ontworpen om webpagina's te beschrijven en de inhoud interactief te maken; beschouw het als het skelet van een website. HTML werd in 1989 uitgebracht als een officiële publicatietaal van het world wide web en is de eerste bouwsteen voor het maken van webpagina's. Er zijn drie hoofdelementen van HTML: tags, elementen en attributen, en de meest recente versie is HTML5. HTML5 heeft nog alle originele kenmerken van het reguliere HTML, maar is dynamischer, bevat veel minder code en stelt je toch in staat om in een mum van tijd iets briljants te bouwen!
Wat is CSS?
CSS is twee cruciale dingen. Het is een moordwijf van een alternatieve rockband uit de jaren 2000 waarvan we je sterk aanraden om er een oogje op te hebben! Maar CSS, voor het doel van dit artikel en jouw kennis, is ook een essentiële bouwsteen voor het coderen van je website!
CSS staat in de techwereld dus voor Cascade Styling Sheets (hoe gaaf is dat?!). Zoals de naam al doet vermoeden, bepaalt CSS het uiterlijk en de stijl van je website. Het helpt bij het bepalen van: kleur, lettertypen, positionering van bepaalde elementen en zelfs een klein beetje animatie. Dit betekent dat CSS een vrij belangrijk deel van je website vormt, namelijk de visuele elementen en esthetiek. CSS volgde HTML om websites er mooier uit te laten zien, en inderdaad deed het dat, anders zouden websites er allemaal hetzelfde uitzien, zwart en wit, wat hyperlink-blauw en soms een nieuw Romeins lettertype (SAAI!). Dus als HTML het skelet is, is CSS de huid, ogen, haar, neus en voeten van een website die deze uniek en herkenbaar maakt.
Dus hoewel HTML en CSS goed samenwerken, zijn het behoorlijk verschillende talen. En als je ze allebei leert, kun je ze ook afzonderlijk gebruiken, omdat ze allebei een groot aantal verschillende toepassingen hebben! Je kan je op deze twee concentreren en GRATIS een website bouwen met onze expert Uros Cirkovic in slechts 60 minuten. Klinkt best goed, een beetje té goed, maar we beloven dat er geen verborgen verrassingen zijn, alleen uitstekende kennis, en aan het einde ervan heb je je eigen website. Geïnteresseerd? Bekijk "Hoe een website te bouwen met HTML en CSS in 60 min".
Oké, we zijn er bijna...
Wat is Javascript?
Hier gaat het een beetje ingewikkelder worden. Javascript is aanwezig op bijna elke functionele website en zorgt ervoor dat websites dynamisch en interactief zijn. Het is de taal die webontwikkelaars gebruiken om websites te maken die reageren op de opdrachten en bewegingen van de gebruiker. En Javascript kan je zelfs het vermogen geven om de HTML en CSS op een website te wijzigen. Het is als de poppenspeler.
Met Javascript kan je bijvoorbeeld het volgende doen:
Speel een voorproefje af wanneer je cursor over een video beweegt
Speel een animatie af wanneer je naar beneden scrolt
Een menu laten verschijnen wanneer je op een knop op het toetsenbord drukt
Sneltoetsen maken voor je site
Maak een bewegende fotogalerij zodat gebruikers tussen dia's kunnen wisselen
En de lijst gaat maar door...
Hoe werken deze drie samen?
Een kort voorbeeld: als je een online modewinkel hebt en het eerste wat men op je website krijgt is een pop-up "10% korting als je je vandaag aanmeldt", dan is dat Javascript. De prijs, maten, beschrijving, afbeeldingen van items, enzovoorts doet HTML. En CSS is hoe jouw online winkel eruitziet: de kleuren, het lettertype, de afbeeldingsgrootte, panelen en meer.
Nu je het verschil weet tussen HTML, CSS en Javascript en hoe ze elkaar versterken, hebben we enkele essentiële tips om te beginnen met het plannen van je website. En onthoud, dit is een proces waar je echt van kunt genieten!
8 tips die je moet volgen om een geheel nieuwe website te bouwen:
1. Kies!
Kies wat je wilt toepassen zoals het schrijven van: een cv, portfolio of landingspagina over een bepaald serviceaanbod.
2. Wil je je alsjeblieft niet focussen op hoe het er in dit stadium uitziet?
Laat die stress maar weg! Je zal je website binnenkort snel "opleuken", maar je hoeft in dit stadium alleen nog maar de structuur en inhoud op orde te krijgen.
3. Schets je concept!
Er is een reden voor het woord concept; het is een ruwe uitwerking van je briljante idee dat binnenkort tot volle wasdom zal komen. Zie het als een ruwe diamant die binnenkort gepolijst wordt.
4. Denk aan de structuur
Je kunt voor inspiratie altijd naar andere websites kijken die je leuk vindt, maar je houdt het in het begin eenvoudig. Bedenk bijvoorbeeld waar je de hoofdnavigatie wilt hebben en wat je in de voettekst wilt. Eerlijk gezegd, velen van ons ontwikkelaars pakken gewoon pen en papier en tekenen snel iets om ons de basislayout voor te stellen (velen van ons tekenen nog steeds slechter dan 7-jarigen, dus verwacht geen meesterwerk; je hebt dat hier niet nodig).
5. Oefen je vaardigheden als tekstschrijver
Je kunt op dit moment wat opvullende dummytekst toevoegen, maar als je creatieve ingevingen krijgt, schrijf ze dan grofweg op. Dit voorkomt dat je overnieuw moet beginnen, aangezien je tekst dan al een eind klaar is. Als je er bijvoorbeeld voor kiest om je portfolio te oefenen, denk dan eens na over wat je doet, wie je bent, de vakgebieden waarin je werkt en je werk- en opleidingservaring.
6. Controleer vooraf enkele ontwerpvoorbeelden.
Doe wat onderzoek voor inspiratie. Als het op CSS aankomt, moet je nadenken over het ontwerp zelf, zoals breedte, hoogte, marge, opvulling, positie, achtergrondkleur, lettergrootte, enz. Dus we raden je aan om een aantal websites te bezoeken die je leuk vindt om als referentiepunt of maatstaf te dienen zodat je een duidelijker concept voor ogen hebt.
7. Doe het door ons webinar te bekijken :)
Laat ons je helpen! Vertrouw ons, het is veel gemakkelijker en we zijn echt vriendelijk :). We zijn er dus van overtuigd dat de leerervaring leuk en gemakkelijk zal zijn, in plaats van dat je alles zelf moet lezen en uit moet proberen. Ons webinar is bijna een privéles en je bent in slechts 60 minuten klaar! Dus klik hier om het te beleven!
8. Feestje!
Yes! Het is je gelukt! Hoe het er ook uitziet, je hebt een grote stap voorwaarts gemaakt! Dus om het proces aangenamer te maken, wordt het tijd dat je het viert! Glaasje wijn? In je kamer swingen op je favoriete liedje? Iemand van wie je houdt knuffelen? Wat het ook is, we moedigen het ten zeerste aan!
Dus nu je dit artikel hebt gelezen en het een en ander weet over het helemaal opnieuw bouwen van een website, denk je misschien: "Dit is interessant", "Ik vind dit leuk", "Ik zou dit als baan kunnen doen". Denk aan al het feestvieren dat je gaat doen. Maar alle gekheid op een stokje, je kunt hier een serieuze carrière van maken en een totale pro worden (geloof ons maar, er zal veel vraag naar je zijn!). Dus als je groot droomt en een meester in webontwikkeling wilt worden, check dan onze bootcamps hier!
