De programmeur heeft de website Puppy Love gemaakt. Kijk maar hier. Maar het ziet er nog niet erg mooi uit, vind je ook niet? Aan jou de taak om de website er beter uit te laten zien! Dat ga je doen met Bootstrap. Zo moet het eruit komen te zien: Ontwerp Puppy Love website.
De code die je straks gaat aanpassen kun je vinden op
jsbin.com.
Aan de linker kant staat de HTML code die je moet aanpassen. Rechts zie je hoe het er uit komt te zien op de website.
Als je gaat typen in het HTML vak komt er een tekst in beeld die vraagt of je een kopie wil maken om jouw aanpassingen te bewaren.
Klik op 'Clone your own copy' om dat te doen. Zet deze pagina vervolgens in je Favorieten, zodat je 'm niet kwijt kunt raken.
Als je Bootstrap wilt gebruiken moet je dat aan de browser laten weten. Dat gebeurt in de code met deze regel:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
Zie je 'm staan?
Tip: de meeste programmeurs maken de website stap voor stap op. Eerst zetten ze alles op de goede plaats (door het gebruik van het Grid (rooster) van Bootstrap). Daarna gaan ze de details invullen, zoals de kleur en grootte van de letters
en de afstanden tussen plaatjes en tekst.
Tip: meer uitleg en voorbeelden over het Grid kun je ook vinden op de w3schools.com website.
Nu de website er op een groot scherm goed uitziet, gaan we de website 'responsive' maken. Responsive betekent dat de website er goed
uitziet op verschillende apparaten, zoals op desktop computerschermen, tablets en mobiele telefoons. Open wat je in opdracht
1 hebt gemaakt maar eens in 'Live preview' (het pijltje schuin omhoog aan de rechterkant van het jsbin.com scherm, net onder de tekst 'Help')
en maak je scherm maar eens kleiner. Ziet dat er goed uit? Als je nog wel wat verbeterpuntjes ziet, dan is deze opdracht voor jou!
Voor deze opdracht heb je het
grid systeem (rooster) van Bootstrap nodig.
In de vorige opdracht heb je voor 'Mijn favoriete puppies' steeds drie puppies naast elkaar laten zien. Maar op een mobiele telefoon passen er geen drie plaatjes van puppies naast elkaar. Dan moet je naar rechts scrollen om alle plaatjes te kunnen zien.
Dat willlen we natuurlijk niet! Op mobiele telefoons willen we ze liever onder elkaar zien. Kun je dat maken?
Tip: gebruik voor de kleinste schermen 'xs', bijvoorbeeld col-xs-12.
Tablets zijn kleiner dan desktop schermen en net als de mobiele telefoon passen er geen drie plaatjes naast elkaar zonder dat je hoeft te scrollen naar rechts. Maar als de plaatjes onder elkaar staan, is er steeds veel witruimte naast de plaatjes. Ook
niet zo mooi. Kun jij het zo maken dat er op tablets steeds twee plaatjes naast elkaar staan?
Tip: gebruik voor tablets 'md', bijvoorbeeld col-md-6.
Open de Puppy Love website weer in 'Live preview' en maak het scherm groter en kleiner. Ziet het er nu wel goed uit als het scherm klein is, iets groter, nog groter en op z'n grootst? Dan heb je het goed gedaan!
De website Puppy Love ziet er nu helemaal uit zoals in het voorbeeld èn ziet er goed uit op verschillende apparaten. Maar je hebt vast wel leuke ideeën om 'm nóg mooier te maken. Maak er met behulp van Bootstrap wat moois van!
Om je wat ideeën te geven: