sprint 1: your tribe

squad page

donderdag 19 september

bouwen

Vandaag stond in het teken van de puntjes op de i. Gister heb ik alle errors op kunnen lossen en vandaag konden we dus onze tijd besteden aan een aantal extra's, zoals: hover transities bij de cards en de knoppen.

wat heb je geleerd?

1. Ik heb geleerd hoe ik een hover transitie kan maken bij een a:

https://github.com/user-attachments/assets/b0677f8b-d5fd-4632-9e17-ab5a37c89d43

Zie hier de code: https://github.com/julia-stevens/your-tribe-squad-page/blob/31a54127827fa030d86d83d28afe33ef132dda47/styles/styles.css#L270-L286

2. Ik heb geleerd hoe ik een afbeelding kan laten bewegen door erop te klikken:

https://github.com/user-attachments/assets/5c0762b0-fe01-4f67-a820-0138afbe9b7c

CSS:

• https://github.com/julia-stevens/your-tribe-squad-page/blob/31a54127827fa030d86d83d28afe33ef132dda47/styles/styles.css#L861-L885

JS:

• https://github.com/julia-stevens/your-tribe-squad-page/blob/31a54127827fa030d86d83d28afe33ef132dda47/scripts/script.js#L19-L23

Door de toggle kon ik ervoor zorgen dat eend weer terug gaat naar zijn plekje in de hoek.

3. Ik heb geleerd dat je een JS-script kunt activeren/uitschakelen bij een bepaalde browser breedte. Bij de studenten cards, wilde wij op desktop een hover effect toevoegen, maar dit werkt niet bij mobiel, bij een kleine browser breedte moest dit script niet actief zijn, zie hier het stukje code dat dit mogelijk maakt: https://github.com/julia-stevens/your-tribe-squad-page/blob/31a54127827fa030d86d83d28afe33ef132dda47/scripts/vanilla-tilt.js#L512-L513

Hierin wordt gezegd dat er eerst gecheckt moet worden of het scherm groter is dan 1200 px, pas daarna wordt de functie 'data-tilt' opgeroepen.

studievragen

1. Hoe kun je met JS responsive werken?
2. Hoe kun je linken naar een specifiek onderdeel van de website?