BBL Week 3

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 2

Kennismakingsronde

• Terugblik vorige les
  
• IDE (Integrated Development Environment)
• Block of inline 
• Introductie CSS

Doelen

Kennismakingsronde

• Lessonup.app
• Log in met jouw schoolaccount

Lessonup

Hoe zit de html code eruit
bij dit kopje en opsomming?

Schrijf de html code
om het resultaat in het
plaatje te krijgen

Hoe zorg je ervoor dat een plaatje getoond wordt met html

Kennismakingsronde

• Integrated Development Environment (ontwikkelomgeving)
• Hulpmiddel om sneller en met minder fouten te ontwikkelen
• Vele IDE's beschikbaar
• Visual Studio Code (MS) - zeer veel gebruikt

IDE

Kennismakingsronde

• Ondersteuning allerlei talen
• Eenvoudig generen html tags
  zie https://docs.emmet.io/abbreviations/syntax/
• Fouten aangeven
• Allerlei extensies 

Enkele voorbeelden

Visual Studio Code

Kennismakingsronde

• download en installeer de laatste versie 
  
  
• open jouw werkmap
• Maak een nieuw html bestand aan met een commando : !
• Maak met emmet een ul met 11 li items
  zie : https://docs.emmet.io/abbreviations/syntax/

Visual Studio Code installait en opdracht

https://code.visualstudio.com/

Kennismakingsronde

• 'gedrag' van elementen op de pagina
• nieuwe regel(block) of op dezelfde regel blijven

Block of inline

Kennismakingsronde

• Nieuwe regel
• headers (<h1> t/m </h6>
• <p> (container voor tekst primari)
• <div> (container voor allerlei elementen)
• <ul> <ol>
  zie https://www.w3schools.com/html/html_blocks.asp

Block 

Kennismakingsronde

• zelfde regel
• <a>
• <img>
  zie https://www.w3schools.com/html/html_blocks.asp

Inline

Kennismakingsronde

• Vormgeving van webpagina's
• Cascading Style Sheet
• extern bestand .css
• <style> binnen een webpagina
• inline met attribuut class=''

Introductie CSS - wat is het?

Kennismakingsronde

Introductie CSS - hoe te gebruiken

Kennismakingsronde

• Vorige opdracht itslearning nu css toepassen
• naar eigen smaak 
• gebruik interne css <style> </style> in de header

Alternatief : ga door met Codeacademy

Opdracht - toepassen css

Kennismakingsronde

• IDE
• CSS

Terug- en vooruitblik

Evaluatie - noem drie dingen die nieuw waren voor jou en die je in deze les hebt geleerd

Reflectie - Hoe heb je de les ervaren? Was je gemotiveerd om te leren? Vond je het lastig? Hoe ging je om met weerstand.

Kennismakingsronde

Bedankt en tot ziens