Samenvatting Voorbeeldvragen Web 2 (Anne Van Goethem)

Voorbeelden van vragen tijdens de verdediging van je project.

Deze vragen moet/kan je beantwoorden aan de hand van je project.

De lijst is niet volledig!!, elke code is anders



1. Wat is het verschil tussen padding en margin?

PADDING: ruimte tussen de inhoud van het element en de border.

MARGIN: hoeveelheid transparante ruimte rondom een element (de plaats tussen kaders/rijen)



Denk aan een schilderij:

Padding: hoever het schilderij van het kadder is
Margin: hoever het schilderij op de muur hangt van de kanten




2. Heb je spacing utilities van Bootstrap gebruikt voor padding (pt-5) en/of margin (mt-sm-5)? Wat
betekent die sm? Wat is het verschil tussen mt-sm-5 en mt-5?

Sm staat voor wanneer een scherm groter dan small wordt getoond er aan deze margin/padding
moet voldaan worden. Wanneer je je margin top op 5 wil bij een enkel een groot scherm en niet
meer op een small scherm zet je er ‘sm’ voor. Wil je deze margin altijd laat je mt-5 staan.



3. Waar leg je de link tussen je HTML pagina en de bijbehorende CSS?

Binnen je head sectie, onder title.

 HTML: je wilt een paragraaf typen en zo wordt het getoond (vb: <p> …….. <p>)
 CSS: die paragraaf wil je bv in een ander lettertype of kleurtje (vb: <p> …….. <p>)

 Via CSS kan je bepaalde dingen van plaats veranderen. Denk hierbij aan foto’s op een website die
ander gerangschikt staan op de mobiele versie van de site. We gebruiken hiervoor de tool ‘Bootstrap’

, 4. Wat betekent het 12 grid systeem van Bootstrap?

Het 12-grid systeem is het essentiële systeem van Bootstrap. Bootstrap gaat er altijd van uit dat je
scherm waar je website op wordt opgedeeld (laptop, tablet, smartphone) in 12 grid-kolommen.

Hoe werkt Bootstrap nu eigenlijk?

We gaan onze informatie altijd opdelen in rijen en die zijn dan onderverdeeld in kolommen. Elke
moderne website is eigenlijk meer of min op deze manier opgebouwd. Zo is ook de website van
Thomas More in verschillende kolommen en rijen opgedeeld. Om dan te bepalen hoe breed die
kolommen moeten zijn,

Zo is een rij bijvoorbeeld verdeeld in 2 kolommen. Als we dat vertalen naar onze 12 grid-kolommen,
is elke kolom 6 grid-kolommen breed.



5. Wat is het verschil tussen bv. col en col-sm? Leg uit voor groot en klein scherm.

Wanneer je col-sm gebruikt, betekent dit dat bij een groot scherm de kolommen naast elkaar gaan
komen, maar bij een klein scherm gaan de kolommen onder elkaar komen. Afhankelijk van je cijfer
dat je erbij zet is de kolom breder of smaller. Als je gewoon col gebruikt gaan de kolommen naast
elkaar blijven, ook al verklein je je scherm.



Wat is het verschil tussen col-6 en col-sm-6?

COL-6

In totaal zijn er dus 12 grid-kolommen beschikbaar; de 1 e kolom neemt 6 grid-kolommen in beslag en
de 2e neemt er ook 6 in beslag. Hoe groot of hoe klein je scherm ook is, je moet die paragrafen altijd
tonen in 2 kolommen. klein je scherm dus is, je zal altijd 2 kommen naast elkaar zien.



COL-SM-6

In totaal zijn er dus 12 grid-kolommen beschikbaar; de 1 e kolom neemt 6 grid-kolommen in beslag en
de 2e neemt er ook 6 in beslag. Dus de kolommen staan naast elkaar (6 breed) voor alle schermen
groter dan small. Zijn de schermen kleiner dan small, dan staan die paragrafen onder elkaar in de
plaats van naast elkaar.



6. Wat doet volgende code : offset-sm-4? Leg uit voor groot en klein scherm.

Deze code staat voor een witruimte van 4 kolommen bij een groot scherm. Als je het scherm
verkleint naar een small scherm dan valt deze witruimte weg.



7. Wat is het verschil tussen offset-4 en tussen offset-sm-4? Leg uit voor groot en klein scherm.

Als je ofsset-4 zet in je code dan verdwijnt deze witruimte niet bij een klein scherm, zet je er sm voor
dan verdwijnt de witruimte bij een klein scherm.