om felx direction en flex wrap samen te zetten

https://itf-flexbox-playground.netlify.app om te oefen

Hier kan je het testen

Blijft staan vanaf de offset die je ingeeft, dan scrolt het mee

Om te testen hoe het werkt

Om te testen hoe het werkt

Eigen indeling makkelijk via: https://itf-bs5-playground.netlify.app

Dit is het belangrijkste om te weten

klaar gemaakte

Belangrijkste voor project!!

*

Bij gebruik hiervan is het makkelijk om een background color te gebruiken dan kan je makkelijk de breekpunten zien en hoe je voor welk scherm aanpast.

9 v d 10 gebruikt zoiso maar 1 file om de media queries te doen.

zie vb, doe screen weg, werkt nog steeds.

=> vanaf deze breedte doe deze style

screen niet nodig

nieuwe manier, leerkracht gebruikt normaal geen screen

Om te kiezen welke style vanaf welke breedte => oude manier.

Om te bepalen wanneer welke style sheet wordt gebruikt van welke scherm breedte.

• Je kan calc gebruiken om inhoud in midden te houden
• Of met margin 1, auto

zoals auto, maar laat de scroll bar nog zien ookal is het niet nodig

Meest gebruikte

Oplossing => geeft een scroll bar

Te maken met hoogte v d box => Als de inhoud groter is dan wat er in de hight past => overflow: auto;

Is de outline / uitlijn buiten de border. als je het een andere kleur geeft kan je makkelijker visualiseren

om de element of titel een maximale breedte te bepalen, zodat bij het veranderen v d grote v pagina het mee veranderd en niet meer na 800px

zoals dit

Manier om een ellement zoals titel in het midden te zetten

Belangrijk om de reset steeds te starten om de default v d browser weg te halen.

Als je bepaald hoe groot de img moet zijn => heb je ook nog de px van de margin, border en padding dus is groter.

=> Als je margin en padding al bepaald ipv afbeelding dan heb je direct de grootte die je wilt.

Bij fotos is dit niet zo

Dit is belangrijk, dat degene margin die groter is, wordt toegepast.

wordt meestal gebruikt

Meestal als dit of de twee andere er beneden

• Om een andere vorm te geven ipv een standaard 4kant foto
• link kan je andere vormen maken en kopieren: https://bennettfeely.com/clippy/

speciaal: is om de kleuren cirkel te draaien => andere kleur

omvoor foto te gebruiken ipv het eerst zelft e editten

Om een te grote foto voor een achtergrond te gebruiken

manier om een gallerij te maken voor alle schermen types

• Cover lijkt de beste optie, zo blijft de verhouding nog correct.
• deze link is goed vb om dit te visualiseren: https://itf-object-fit-playground.netlify.app
• Je kan daar ook de css code gwn ervan kopieren

• Moeten responsief zijn => belangrijk
• Breedte 100% zoals het moet => hoogte op auto zetten
• Vanaf een kleiner scherm => veranderd in verhouding zie vbn

Nadeel van float:

• Als het tekst langer is dan gaat het terug onder de afbeelding
• Op te lossen door overflow te gebruiken

De link is om makkelijk een eigen gradient te maken voor je site

Is wat moderner

Meer hedendaags, beter dan de oudere hierboven

=> Header background img geven

Als je titel in het midden wil zetten dan gebruik je inline-height. zie vb

scolled dan niet mee

gwn path geven

wordt bijna niet gebruikt => verschil met display none , is dat de space leeg blijft op de pagina, zie vb

combinatie van block en inline, dan kan je wel breedtes en hoogtes geven.

=> wordt veel gebruikt => bij lijsten als je alle items de juiste breedte wil geven, want bv tekst v 1 is langer dan ander

Techniek bij taak van oplijsting

om niet zichtbaar te maken

Is als je twee blokken naast elkaar wilt zetten ipv onder elkaar

4 eigenschappen

Toch veel voorbeelden laten zien dus toch wel oefenen

De drie die je moet onthouden en gebruiken

a is voor alles als je ze appart doe, moet het in de juiste volgorde.

Vooral voor slechtzienden

A is om te doorschijbaarheid te kiezen

groote li, re, hoogte, kleur

Dit is erg belangrijk volgens de leerkracht

1,5 is vaak het beste

Makkelijk testen wat beter is => geeft daarna ook de html 1,5 is vaak het beste zegt de leerkracht.

Dit is beter te vermijden.

=> Inzoomen in een smartphone vergroot niet mee. => Blijft klein.

Dit is beter om te gebruiken.

=> Inzoomen in een smartphone vergroot mee.

3 opties v fonts: standaard fond windows, standaard font mac, Basic dat alles zoiso werkt

=> Gewoon om zeker te zijn.

Meest gebruikt

In de vb hieronde zie het in bestand green.css dat eigenlijk de hierargy wordt overschreven

waar link rel staat = manier om een CSS bestand te koppelen aan html

Belangrijk om dit te respecteren * Dus kijken wanneer een spatie of een comma of niets te gebruiken. * Hangt af van is er een class of Id of niet

1 keer max gebruiken, als je weet dat het maar 1 keer wordt gebruikt

De meest gebruikte in de tabel

Datum van upload

Alles wat in HTML moet staan Momenteel nog wachten tot de docent het zegt.

Alles wat in HTML moet staan

Voor info over project

Balngrijk om deze weg te laten

Belangrijk om dit te doen, om zo de breedte van apparaat bekijken.

Je kan specifiek kiezen hoe de style eruit ziet bij elk specifiek apparaat

Voor classen te maken

voor ID te maken

Het belangrijkste

Voor Iets appart te houden en dan te stylen

Om dingen te groeperen en samen aan te passen

CTRL + ALT + J Voor een template te gebruiken dan moet je geen sluiting zelf typen

Hoe je de CSS aan de html file linkt.

Wordt toch niet gebruikt skip

Hier zit CSS bij

Gwn basis tabel kennen

optioneel

optioneel

optioneel

soms maar gebruikt

soms maar gebruikt

Echt slecht om op alle platformen te maken, gsm, talbet en pc bv

Belangrijk!!

Wordt vaak fout gedaan bij studente.

Worden nooit gebruikt

Enigste die nodig zijn

Met dit kan wel

Lege spaties worden auto weg gedaan.

Deze kan je niet gebruiken:

Begin v een tag Einde v tag & staat vaak in een link

Om een mail te sturen naar

Om naar begin v d pagina te gaan, zonder een refresh

Om naar ergens naar de site te springen

Link naar een andere site

Om aan te geven om een hyperlink op een andere tablat te openen

https://itf-webp.netlify.app Goed om img te converteren naar een andere type voor html

Goed, omdat kwaliteit goed blijft en erg klein bestand is om op te slaan.

vbn v paths

Verplicht tag

Verplicht tag

Is om info v d foto aan de computer door te geven bv voor blinden.

https://picsum.photos Fotos die gebruikt mogen worden

Optioneel: voor beschrijving v d foto

https://caniuse.com Om te testen of u code overal werkt of niet

Om een fav icon te maken voor alle types, light theme, dark theme, voor alle apparaten en dan maakt het de html code voor jou en dan gwn gebruiken

Path v het bestand Als het bestand in dezelfde map als index staat => naam bestand

Vroeger moest je zo een type gebruiken

Icon maken voor tablat in een browser

Notatie voor kleuren

Dus JPEG en WEBP, als het een klein foto is PNG

Recommend max 100kb gebruiken voor images

Hier kan je voorbeelden vinden.

Bij html wordt vaak webp gebruikt

Je kan ook i gebruiken zoals word

Je kan ook b gebruiken zoals word

Om een lijn over de pagina breedte te maken

Om de lijn te stoppen en zo een nieuwe lijn te beginnen

Gewoon bekijken

Is een hulpmiddel

Om te kijken of het structuur goed is https://validator.w3.org/

p*2>lorem30 kan je hetzelfde doen alleen, word dit tweekeer gedaan en limiet van 30 lijnen.

Handig om lorem te gebruiken voor random tekst. Door p>lorem TAB

Extra spaties zie je niet => het pagina laat altijd 1 spatie zien.

Het eigenlijk op de zelfde werkwijze als een word bestand, dat je een titel maakt en inhoud geeft.

Is belangrijk, omdat dit aangeeft waarover de site gaat. Als dit leeg is dan pakt het een random text van de pagina. Wat raar is.