Webtechnologie
Home

Webtechnologie

Wat is CSS?
Wat is CSS?

Webtechnologie

Wat is CSS?

Doelstelling

  1. We beginnen met het kiezen van de juiste karakterset.
  2. We leren hoe je bestanden upload naar Cloud9.
  3. Het wordt tijd om de bloemlezing pagina op te maken. Opmaak betekent drie dingen:
    1. de juiste terminologie voor opmaak leren gebruiken;
    2. elementen positioneren:
      1. wireframe / mockup maken;
      2. wireframe / mockup omzetten naar html;
      3. een tabel van de te positioneren elementen maken;
    3. elementen aankleden met kleur, vorm, achtergrond, animatie enz.
  4. In deze les leren we hoe je de verschillende onderdelen, body, header, article, aside, section enz. op de pagina positioneert.

Hoorcollege 1:00

  1. CSS Algemeen
  2. Wat is CSS?
  3. Hoe schrijf ik het?
  4. CSS selectoren
  5. Inline en block elementen
  6. Het CSS box model
  7. meten in CSS

Thuiswerken 4:00

  1. Herhaling
    1. CSS Algemeen
    2. Wat is CSS?
    3. Hoe schrijf ik het?
    4. Selectoren
      1. CSS type selector
      2. CSS klasse-selector
      3. CSS id-selector
      4. CSS universele selector
    5. Inline en block elementen
    6. Het CSS box model
    7. meten in CSS
    8. CSS - blokgrootte
    9. CSS - blokgrootte beperken
    10. CSS eigenschap: overflow
    11. CSS eigenschap: margin
    12. CSS eigenschap: padding
    13. CSS werken met kleur
    14. CSS eigenschap: border
    15. Natuurlijke flow van elementen op een pagina
    16. HTML elementen postioneren
  2. Oefening
    1. We vertrekken van de oefening Pagina header en hoofdnavigatie en die vind je op CodePen.
    2. Maak een map met de naam beginnen-met-css en kopieer alle bestanden uit de map html naar deze nieuwe map.
    3. We maken een extern CSS bestand met de naam app.css in de submap css van de beginnen-met-css map, dus beginnen-met-css/css/app.css
    4. We linken het bestand.
    5. We maken een lijst met te positioneren elementen.
    6. Met de universele selector stellen we de border-size in op border-box en alle kantlijnen en opvulsels op 0.
    7. body en html % instellen
    8. We beginnen met de containers te plaatsen en de grootte ervan te bepalen.
    9. Vervolgens positioneren we de tekstelementen en geven er een grootte aan.
    10. Dit is het resultaat tot zover:
    11. Bekijk het filmpje: HTML elementen positioneren
  3. Opdracht
    1. Maak een map met de naam beginnen-met-css en kopiëer daarin alle bestanden van uit de map met de naam html.
    2. Maak de marsman.html pagina op zoals in de oefening hierboven
    3. Vertrek van de marsman.html pagina en maak een gelijkaardige pagina met je eigen onderwerp (artikel), zowel HTML als CSS.
    4. Maak een wireframe voor je eigen pagina.
    5. Stel een tabel op met de te postioneren elementen en geeft de positie, hoogte, breedte en witruimte op.
    6. Maak een extern css bestand met de naam style.css en plaats dat in een submap met de naam beginnen-met-css (hoofdlettergevoelig!). Dus beginnen-met-css/css/style.css.
    7. Maak de stijlregels aan overeenkomstig de waarden in de tabel met de te positioneren elementen.
    8. Stuur een Word document met de wireframe; een tabel met de lijst van de te postioneren elementen door.
    9. Kopieer de map beginnen-met-css van je lokale computer naar Cloud9.

Practicum 2:00

  1. De opdracht initialiseren
  2. Feedback

JI
2019-05-19 14:20:46