Nienke Buijser | Productiviteitscoach
READING

Waarom iedere creatieve ondernemer HTML + CSS moet...

Waarom iedere creatieve ondernemer HTML + CSS moet kennen

Voor velen is de wereld van HTML en CSS overweldigend. Het ziet er ingewikkeld uit en de wetenschap dat één verkeerd teken de hele website plat kan leggen maakt het er niet aantrekkelijker op. En toch vertel ik je dat iedere creatieve ondernemer iets moet weten van HTML en CSS. Weten hoe HTML en CSS in elkaar steken is de vrijheid hebben om kleine aanpassingen zelf te kunnen doen. Dat scheelt geld en tijd. Bovendien weet je beter waar je op moet letten wanneer je op zoek gaat naar een goede developer die je website kan ontwikkelen (en geloof me, dat is echt een vak apart).

Je kunt je website eigen maken

HTML (Hypertext Markup Language) en CSS (Cascading Style Sheets) zijn twee basisingrediënten voor het bouwen van websites. Middels HTML vertel je de website hoe de structuur opgebouwd is en via CSS geef je de structuur vorm. Wanneer je weet hoe deze talen in elkaar steken, heb je de vrijheid om zelf kleine aanpassingen te doen. Wil je een button rood in plaats van groen? Check! Of wil je het logo van je website links in plaats van rechts? Kan ook.

Je weet waar het fout gaat

Opmaaktalen als HTML en CSS zijn erg gevoelig voor het gebruik van tekens. Wanneer een van die tekens niet klopt, kan het resultaat heel anders zijn dan je verwacht had. Geen reden voor paniek wanneer je weet wat de meest voorkomende fouten zijn. Tot die fouten behoort het leesteken dat vaak fout gaat wanneer je vanuit een tekstverwerker als Word of Google Docs werkt (überhaupt niet handig, maar hey, ik doe het soms ook): aanhalingstekens. Wanneer de inhoud in HTML variabel is plaats je er (meestal) aanhalingstekens omheen. Denk bijvoorbeeld aan

  • Het invoegen van url’s > de url kan veranderen
  • <a href="https://www.andtherewascontent.com">And there was content</a>
  • Het meegeven van een unieke ID waarmee je de HTML kunt aanspreken in de CSS > de ID wisselt, want hij moet uniek zijn
  • <p id="intro"></p>
  • Uitleggen wat er in een afbeelding (> link naar afbeelding kan wisselen) gebeurt via de alt tekst > iedere afbeelding heeft een eigen uitleg
  • <img src="https://andtherewascontent.com/wp-content/uploads/2018/11/Screen-Shot-2018-11-11-at-15.18.12.png" alt="SMART" />

Wanneer er zogeheten smart quotes gebruikt worden in plaats van de straight quotes waar HTML om vraagt is de kans groot dat je code niet werkt of een zooitje wordt. Dat zooitje (met dank aan WordPress) ziet er ongeveer zo uit.

<a href="”https://www.andtherewascontent.com”">And there was content</a>
<p id="”intro”"></p>
<img src="”https://andtherewascontent.com/wp-content/uploads/2018/11/Screen-Shot-2018-11-11-at-15.18.12.png”" alt="”SMART”" />

Je kunt zelf kleine aanpassingen uitproberen

Wanneer je met de gedachte speelt om je website aan te laten passen, kun je zelf al wat experimenteren. Dat doe je niet in de basiscode, maar met behulp van de Javascript Console. Geen paniek, je hoeft geen javascript te kennen! De Javascript Console zit standaard in de meeste browsers. In Google Chrome vind je het onder View > Developer. Het wordt hoofdzakelijk gebruikt voor het ontdekken van fouten in de website. Je kunt het echter ook heel goed gebruiken voor het ontdekken wat er gebeurt wanneer je kleine aanpassingen in HTML en CSS doet. Het voordeel van Javascript Console is dat je niet in de daadwerkelijke code van je site zit en je bezoekers dus ook niets zien van jouw experimenten. Zelf grijp ik naar de Javascript Console wanneer ik wil testen hoe ik de leesbaarheid kan verhogen of wat er gebeurt wanneer ik het lettertype aanpas. Nog een snelle truc is het selecteren van dat wat je wilt wijzigen en via de rechtermuisknop naar “Inspect” gaan. Dan kom je direct in het juiste gedeelte van de Console terecht.

Javascript Console

Je kunt teksten opmaken wanneer er geen WYSIWYG-editor omhanden is

De WYSIWYG (What You See Is What You Get) editor is voor velen een handige uitkomst. Wanneer je je blogpost in deze editor bewerkt zie je direct hoe het uiteindelijke resultaat er ongeveer uit komt te zien. WordPress biedt standaard een WYSIWYG-editor (“Visual”) én een HTML-editor (“Text”) aan. Niet iedere website heeft deze mogelijkheden. Wanneer jij altijd de visuele editors gebruikt, heb je geen idee hoe je je tekst goed opmaakt zonder deze editor. Je bent veel sneller klaar wanneer je je thuisvoelt in de wereld van HTML en CSS. Zo kun je overal en altijd snel je teksten opmaken.

Visual Editor WordPress

Je weet beter waar je naartoe wilt, want je kent de mogelijkheden beter

Wanneer je besluit te willen werken met een developer die een prachtige website voor je gaat bouwen, dan is het fijn om thuis te zijn in de mogelijkheden. Je kunt kritischere vragen stellen en hoeft niet blind te varen op wat iemand je zegt. Het is goed om je als zelfstandig ondernemer in te lezen in diverse onderwerpen. Zo ontdek je waar je wel en niet goed in bent, wat je wel en niet leuk vindt én bovenal ontdek je beter waar je naartoe wilt.

Waarom iedere creatieve ondernemer HTML + CSS moet kennen


RELATED POST

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

By using this form you agree with the storage and handling of your data by this website.