Opdracht 2:
Frankrijk.nl homepagina nabouwen
Wat ga je allemaal in dit opdracht leren?
- Complex hover effect toevoegen
- Het grid van Bootstrap 4 leren toepassen
- Responsive bouwen
- Verhoudingen van de afbeeldingen behouden
Uitleg van het opdracht
In deze opdracht willen we zien dat je het ontwerp uit het Figma bestand (opdracht 2 – Frankrijk.nl), pixel perfect na kan bouwen. Hierbij is het belangrijk dat je de afbeeldingen vullend maakt, hovers toevoegt en het schaalbaar bouwt. Een creatief hover effect zou een leuk pluspuntje zijn.
Probeer zoveel mogelijk met HTML en SCSS op te lossen en voor bijvoorbeeld het hamburger menu met vanilla JS oplossen (een onclick). Gebruik voor deze opdracht ook (alleen) het grid-systeem van de library Bootstrap 4. In principe gebruiken we Bootstrap alleen voor het grid systeem. Je hoeft niet Bootstrap apart te gaan downloaden, deze kun je al vinden in de bestanden uit de Drive.
Daarnaast zul je in de lib folder Tiny Slider of Swiperjs gaan zetten om deze vervolgens te gaan gebruiken voor de slider onderaan de pagina. Lees je voor alle libraries goed in en bedenk goed waar je dit wel en niet gaat toepassen en waarom. Je mag ook altijd om uitleg vragen en we willen ook graag met je meedenken.
Daarnaast ga je leren SCSS te schrijven (als je dat nog niet deed). Vraag om instructies aan een van de developers hoe SCSS werkt en je het lokaal moet installeren en draaien.
Bij voorkeur willen we alle scripts die je voor library’s gebruikt lokaal download op je computer en vanuit daar laad, ga geen CDN gebruiken. De bootstrap stylesheets staan in de drive.
Ook ga je voor deze opdracht kijken naar een library swiper
