Terug

HTML & CSS Les 5 – Oefenen

We gebruiken deze les om even geen nieuwe informatie aan te bieden, maar om te oefenen met de kennis die we al hebben.

Quiz

Je kunt deze quiz met 10 vragen doen om je kennis van HTML en CSS tot dusver te checken. Als je het antwoord niet weet mag je online zoeken!

Opdracht: Oefenen met het grid

Je hebt in les 3 een mobiele site gemaakt, in deze opdracht gaan we een desktop-versie van die site maken.

  1. Maak een kopie van de map waarin je in les 3 je site hebt gemaakt, zodat we de oude site kunnen bewaren

  2. Maak in CSS een grid zoals in bovenstaande afbeelding. Denk goed na over de hoogte van de rijen, of je vh of auto wilt gebruiken.

  3. Zorg dat alle divs in het grid geplaatst worden, geef ze id’s als ze dat nog niet hebben.

  4. Voeg meer links toe aan de #menu div.

  5. Zorg dat de tekst in #text1 links uitgelijnd is, als dat nog niet zo is.

  6. Geef #menu een andere achtergrondkleur dan de pagina.

  7. Voel je vrij om te experimenteren met je eigen ideeën. Je kunt letterkleuren en -groottes aanpassen, etc.
    Je kunt ook experimenteren met het vervangen van de afbeelding in je site door een achtergrondafbeelding die het hele vlak bedekt. We herhalen nog even het voorbeeld voor het toevoegen van een afbeelding aan een div:

    #divID {
        background-image: url("img/bestandsnaam.jpg");
        background-size:cover;
        background-repeat:no-repeat;
        background-position: center;
    }
    

Opdracht: Je eigen wireframe

In les 4 hebben we getekende wireframes gebruikt om het maken van een grid te oefenen. Nu is het tijd om je eigen wireframe in HTML en CSS te gaan maken. Denk aan de inhoud, en alle nodige elementen zoals koppen, menu, links, tekst, afbeeldingen etc., en hoe je ze over de pagina wilt verdelen. Realiseer je ook dat die vlakverdeling vaak hetzelfde is op elke pagina van een site. Voor nu focussen we ons op het maken van de vlakverdeling, met het grid.

  1. Maak een tekening van je grid, zoals beschreven in les 4, inclusief id’s en genummerde lijnen.

  2. Maak een nieuwe projectmap, met HTML en CSS. In het HTML bestand maak je een div-element voor elk vlak. Vergeet ook niet HTML aan CSS te koppelen.

  3. In CSS plaats je de reset-code. Daarna definieer je jouw grid. Geef elk div element een achtergrondkleur en een plek in dat grid.

That’s it for now! In de volgende lessen gaan we ons focussen op de uitlijning van de inhoud van het grid, en op het ‘responsive’ maken van je site.