In deze zelfstudie serie:
checkmark simple
HTML tags, nesting & indending
checkmark simple
HTML linken met a tag
checkmark simple
CSS basics
checkmark simple
CSS precedence en inheritance
checkmark simple
CSS Properties, Values and Units
checkmark simple
CSS Box model en Display
checkmark simple
CSS Fonts
checkmark simple

Alle lessen in deze reeks bekeken?

Je hebt alle lessen in deze reeks afgerond!

checkmark simple
Oops! Something went wrong while submitting the form.

Je hebt alle lessen afgerond!

checkmark simple

HTML basics

HTML syntax

HTML bestaat uit verschillende in elkaar genestelde elementen. Een element bestaat in de basis uit een tag die aangeeft van welk type het element is en de inhoud van dat element. De inhoud kan bijvoorbeeld tekst of een afbeelding zijn, maar ook andere elementen. Zie hieronder een voorbeeld van een simpel element.

HTML tags, nesting & indending

HTML tags

Een tag geeft aan de browser van aan welk type een element is. Een h1 tag wordt gebruikt voor de belangrijkste heading op de pagina. Een button tag geeft aan dat iets een button is een p tag geeft aan dat iets een paragraaf is etc. Zie de PDF presentatie en handige links voor meer tags.

Nesting

Elementen kunnen andere elementen bevatten. Dit noemen we nesting. Een element kan een parent zijn van andere elementen, in deze situatie heeft de parent andere elementen in zich zitten. De elementen die in een ander element zitten noemen we een child element. De elementen die direct in de eerste laag van zijn parent ziten noemen we direct childs. Elementen die weer in dat element zitten noemen we nog steeds children maar zijn geen direct children.

Indenting

Dit is het netjes leesbaar maken van code door een duidelijke hiërarchie aan te geven met tabs. Een child van een element zal verder naar rechts staan door middel van een tab. En een child van dat element krijgt ook weer een extra tab, waardoor de structuur beter zichtbaar is.

HTML linken met a tag

Links

Voor websites en apps is het belangrijk dat vanuit een pagina of scherm makkelijk naar secties of andere pagina's / schermen genavigeerd kan worden. Dit doen we met links ( de a tag ). Omdat het belangrijk is dat je leert om te gaan met het zoeken in de bekende bibliotheken dien je zelf informatie op te doen over de a tag, de verschillen tussen absolute en relatieve urls en de attributen van de a tag. Probeer het zelf te vinden, kom je er niet uit? kijk dan bij handige links.

CSS basics

CSS syntax

Een CSS element bestaat uit een selector, property en value. Met een selector selecteer je een HTML element. Dit kan zijn aan de hand van zijn tag naam, maar ook een class of id naam. De property is de eiegnschap die je wil veranderen en de value is de waarde die je geeft aan deze property.

Waar komt de CSS te staan?

CSS kan je op verschillende plekken typen: inline (in de HTML openings tag), internal stylesheets (stylesheet in de head van de pagina), external stylesheet (een css bestand waar je naar toe linkt vanuit de head van een pagina).

CSS selectors

CSS maakt gebruikt van selectors om aan te geven welk element je wil gaan stylen.

  • Een element kan je selecteren aan de hand van de tag name. Bijvoorbeeld h1 of p.
  • Selecteren aan de hand van een classname. In de css plaats je een punt voor de classname. Bijvoorbeeld .classname
  • Selecteren aan de hand van een id. In de css plaats je een hashtag voor de id naam. Bijvoorbeeld #idnaam

CSS precedence en inheritance

CSS Precedence

Een element kan voor dezelfde properties meerdere keren verschillende styling mee krijgen. Denk aan een h1 tag met een classname en een id. Deze kan een blauwe kleur krijgen via zijn tag naam, vervolgens een groene kleur via de classname, een rode kleur via de id en een zwarte kleur via inline styling. Welke kleur krijg deze h1 dan? Gelukkig zijn hier regels voor, hoe specifieker de selector des te meer waarde:

  1. Tag (minste voorrang)
  2. Class (combinatie class meer voorrang dan de 1e class name)
  3. ID
  4. Inline (meeste voorrang)

CSS Inheritance

CSS Properties, Values and Units

CSS Values en Units

Een CSS property bijvoorbeeld color of font size krijgen een waarde (value), hierdoor weet de browser hoe het element gestyled moet worden. Er zijn verschillende soorten value's, bijvoorbeeld color values en length values. Een value wordt uitgedrukt in een unit. In de echte wereld kan je dit zien als verschillende manieren om een lengte aan te geven: centimeters, inch etc. Zo heb je in CSS pixels, vw, rem em en nog veel meer. Bekijk de link values en units.

CSS Box model en Display

CSS Box model

Een website bestaat uit blokken in blokken in blokken. Een blok (element) bestaat uit de content (tekst, afbeeldingen of andere blokken), een padding (ruimte om het element), een border (een rand om de content + padding), een margin (ruimte tussen het element en andere elementen).

Ga naar W3 Schools via de link en experimenteer met het box model.

CSS Display

Display bepaald hoe een element wordt geplaatst op de website. Zie de PDF presentatie en de link voor de mogelijkheden.

CSS Fonts

Font Size en Font Weight

Tekst is een belangrijk onderdeel van een website of app. Met CSS heb je veel mogelijkheden om tekst te stylen. Met font-size kun je de grootte van de tekst bepalen, met font-weight de dikte.

Project files

icon: files
Project files
* De link hierboven download een bestand via dropbox dit kan een zip of rar bestand zijn. Weet je niet hoe je dit type bestand kan gebruiken? Volg deze instructie voor zip bestanden. Of download WinRar voor rar bestanden.
* Er zijn geen project files om te downloaden voor deze zelfstudie.

Stel vragen en help medestudenten

Tijdens de live lessen zijn er opdrachten waarbij je zult samenwerken met jouw studiegenoten. Hiervoor gebruiken wij Discord. Daarnaast kun je ook jouw vragen stellen, de docenten zullen je vervolgens verder helpen.

Het kanaal voor deze cursus op onze Discord:

portfolio-cursus

logo - discord

#code-cafe

200+ leden