Kop 1

tagline

Instructies

Na het doorlopen van de opdrachten hieronder heb je het resultaat zoals hiernaast, maar dan met je eigen inhoud. Je mag ook de video hieronder bekijken als een start-up van deze opdracht.

  1. Download de voorbeeldcode en open deze zowel in de browser als in Atom.
    voorbeeldcode: https://github.com/Theo-denBlanken/materiaal-oefening-padding-marge
  2. Vul je eigen naam aan bij de meta-tags als (mede)auteur. Ook in de head jouw naam plaatsen over die van mij heen.
  3. Het krijgt één van de onderwerpen uit de lijst hieraast. Neem daarvan de inhoud over en kopieer deze in de inhoud mark-up, die je gedownload hebt.
  4. Koppel het externe stijlblad aan het document.
    Er is al flink wat opmaak aanwezig, al is het resultaat nog ver weg van het voorbeeld hiernaast.
  5. Bekijk de Mark-up (HTML) en stel vast dat de hele inhoud in een div met de class ‘wrapper’ zit. centreer dit wrapper-element, door de marges links-en rechts op auto in te stellen.
  6. Stel de breedte (width) van de sections in op 360px. Hierdoor passen er wel 3 van deze sections in hun parent het main-element
  7. Enkele sections hebben zo weinig inhoud dat er wel 4 van naast elkaar zouden moeten kunnen pasen. Controleer de mark-up en zie dat ze een class-attribuut met de waarde weinig hebben.
  8. Geef in de CSS de selector .weinig een breedte van 260px;
    Er zouden dan zelfs 4 van deze elementen naast elkaar kunnen.
  9. Het eerste element is echter breder dan de volgende 3. Dat komt door de padding. Het eerste element heeft immers een id-attribuut met waarde agenda en in de stijl is daarvoor een forse padding gegeven!
    Volgens het boxmodel wordt die padding bij de ingestelde breedte toegevoegd. Dat werkt niet makkelijk en daarom geef je ALLE SECTIONS de eigenschap box-sizing een waarde ‘border-box’.
    Dat werkt voor de overige sections beduidend eenvoudiger!
  10. Geef de sections enige marge. Kijk in de afbeelding hoe groot die moet zijn. (tel de rasterlijnen!!)
    Zo staan ze niet meer tegen elkaar.
  11. Controleer nu of alle 4 de eerste sections dezelfde breedte aan de buitenkant hebben.
  12. De hoogtes van deze elementen (ze staan inmiddels alle 4 naast elkaar!!) zijn nog ongelijk.
    Door wat met de horizontale padding te spelen (de verticale houden we op 30px) kun je de hoogtes gelijk krijgen.
    Hoe ze precies ingesteld worden kun je terugzien in de afbeelding van het resultaat. We proberen ze even hoog te krijgen als de derde section (die is het hoogst). Daarom hebben de tweede en de vierde section een id meegekregen in de mark-up. Selecteer die elementen in de CSS met hun id en voeg daar zelf padding-eigenschappen toe.
    De hoogtes in de rij worden door het spelen gelijk ZONDER dat je de hoogte instelt!!
  13. Ook de overige sections binnen een rij moeten gelijk gemaakt worden aan elkaar door met de horizontale padding te spelen. Geef daarvoor elk een unieke id. Bedenk die id door deze af te leiden van de inhoud in het element. In het voorbeeld dus bij de 10-de tip 'werkplanning'.
  14. Voeg marge toe aan het h1-element zodat hij start precies recht boven de start van de tekst van de eerste section. Kijk hiervoor naar de grid-afbeelding, die vanaf de achtergrond zichtbaar is.
  15. Ook de footer moet marge krijgen zodat deze precies start recht onder de start van de tekst in de section boven hem.
  16. Je mag de kleuren naar eigen inzicht aanpassen, zolang het grid op de achtergrond van de het wrapper-element maar zichtbaar blijft.
  17. Valideer zowel de HTML als de CSS
  18. Plaats hem in het mapje opdracht 5 in de bewijzenmap en lever het linkje in Magister.
Het resulaat na de uitwerking

lijst van onderwerpen

  1. de leukste moppen
  2. Appelsap 2014
  3. Incubate
  4. Best Kept Secret
  5. Valkhof Festival
  6. 10-minutengesprek
  7. Top-CV
  8. Toegankelijke website
  9. af te vallen
  10. verandering
  11. jouw marathondebuur
  12. tegen verveling
  13. Voor beoordelingsgesprekken
  14. timemanagement
  15. om rijk te worden
  16. voor journalisten
  17. een goede Powerpointpresentatie
  18. een goede relatie
  19. tuinieren van de fysiotherapeut
  20. besparen op je boodschappen
  21. stroom te besparen
  22. een gezond leven
  23. een sollicitatiebrief
  24. fotografie
  25. cupcakes
  26. het stoppen met roken en niet aankomen
  27. energie besparen (kies er zelf 10 uit)
  28. de herfst in Amsterdam
  29. Lowlands
  30. de fopspeen
  31. om beter te leren spellen
  32. om van je verkoudheid af te komen
  33. om van je verkoudheid af te komen
  34. de voor- en nadelen van ons digitale leven

Instructie bij de opdracht hierboven

Er wordt hier een stijlblad gekoppeld, de secties krijgen marge en een box-sizing border-box.
Dan kan het spel beginnen, waarbij je door het aanpassen van de de horizontale padding de elementen in dezelfde rij een gelijke hoogte geeft. De hoogte wordt dus NIET ingesteld.

Bonus opdracht

voor 1 punt extra:

Voeg extra stijlen toe voor twee effecten, die je krijgt als je met de muis over de sections Je mag dat zelf bedenken, bijvoorbeeld een verdraaiing van het element van een paar graden (subtiel!) of een kleurvarandering van de achtergrond.


Inleveren

  • Rond de vormgeving af naar eigen inzicht.
  • Na afloop plaats je deze training online in je bewijzenmap.
  • Valideer jouw pagina's op Markup Validation Service van W3C.
  • De validatie icoontjes staan in de footer.
  • Plaats de link in ELO Magister.