squad page_ sprint 1_ week 2 ‐ dinsdag 10 september - julia-stevens/i-love-web GitHub Wiki
Vandaag zijn we eerst verder gegaan met het afmaken van ons ontwerp. Dit hebben we in Figma gedaan:
Daarna hebben we verschillende breakdown schetsen gemaakt, zowel samen als individueel:
- Breakdown van de gehele desktop pagina en mobiele pagina:
-
- Breakdown van een card
-
- Breakdown van het campus plekken onderdeel op de pagina
-
- Breakdown van een campus card
-
Vervolgens zijn we individueel aan de slag gegaan met het bouwen van de website. Ik ben begonnen met alles in HTML coderen en ik heb er vooral opgelet om zoveel mogelijk semantische code te schrijven, bijvoorbeeld de navigatie:
<nav> <a href="julia.html"><img src="./assets/julia/hva-logo.png" alt="logo van hva"></a> <a href="julia.html"><img src="./assets/julia/svg-icons/studenten.svg" alt="icoon van groep studenten">Studenten</a> <a href="#"><img src="./assets/julia/svg-icons/campus.svg" alt="icoon van school gebouw">Campus</a> </nav>
- Vandaag was ook de CSS workshop met als thema grid. Ik heb heel veel over grid geleerd, zoals:
- Je kunt een responsive grid maken met
auto-fit
- Alleen de directe kinderen van een element 'reageren' op het grid
- Je kunt zowel
grid-column-start
alsgrid-area
gebruiken
-
Daarnaast heb ik onderzoek gedaan naar hoe een zoek functie toe te passen in de website, hiervoor heb ik een tutorial gevonden en deze nagemaakt, zie hier: https://julia-stevens.github.io/i-love-web/
-
Grid kun je zowel toepassen op macro- als micro lay-out
- Zo heb ik een grid toegepast om de cards die ik op de squad page wil gaan gebruiken: https://github.com/julia-stevens/your-tribe-squad-page/blob/f193828c2e38df2556158df9af1eeeccd6478c82/styles/julia-styles.css#L166-L321
- Ik vind het interessant om meer over grid te leren, omdat het het positioneren van elementen op de pagina zoveel makkelijker maakt. Daarnaast vind het heel interessant om een responsive grid toe te passen en hiermee te experimenteren
- Ik vind het ook interessant om bezig te zijn met de HTML elementen, hiervoor heb ik tijdens het maken van de breakdown schets de MDN pagina opgehouden en gezocht naar, wat ik denk dat juiste elementen zijn.
- Ik heb nog een vragen over hoe breakpoints ingezet worden bij het responsive maken van een website