Webdesign Basics

Leer stap voor stap HTML en CSS - bouw je eigen webpagina's

index.html
style.css
localhost:3000/index.html

Les 1: Je eerste HTML pagina

Snelle Referentie

`, starterCSS: `/* CSS komt in latere lessen */`, solution: { html: ` Mijn Website

Welkom!

`, css: `/* CSS komt in latere lessen */` }, check: (html, css) => { return html.includes('') && html.includes('') && html.includes('

') && html.includes('

'); }, hints: [ 'De title tag komt tussen en ', 'De h1 tag komt tussen en ', 'Vergeet de sluit-tags niet: en ' ], reference: ['', '<h1>', '<head>', '<body>'] }, { id: 2, title: 'Tekst en Kopjes', description: 'Leer werken met koppen (h1-h6) en paragrafen.', instructions: ` <p>HTML heeft 6 niveaus van koppen: h1 (grootste) tot h6 (kleinste). Paragrafen maak je met <code><p></code>.</p> <div class="code-hint"> <code><h1></code> = Hoofdtitel<br> <code><h2></code> = Subtitel<br> <code><p></code> = Paragraaf tekst </div> <ul class="task-list"> <li>Maak een h1 met "Mijn Blog"</li> <li>Maak een h2 met "Over Mij"</li> <li>Voeg een paragraaf toe met een korte introductie</li> </ul> `, starterHTML: `<!DOCTYPE html> <html> <head> <title>Mijn Blog `, starterCSS: ``, solution: { html: ` Mijn Blog

Mijn Blog

Over Mij

Hallo! Ik ben een leerling die leert programmeren.

`, css: `` }, check: (html, css) => { return html.includes('

') && html.includes('

') && html.includes('

') && html.includes('

'); }, hints: [ 'Begin met de h1 voor de hoofdtitel', 'De h2 komt na de h1', 'Schrijf je eigen tekst in de

tag' ], reference: ['

-

', '

', '
'] }, { id: 3, title: 'Links en Afbeeldingen', description: 'Maak links naar andere paginas en voeg afbeeldingen toe.', instructions: `

Links maak je met <a> en afbeeldingen met <img>.

<a href="url">tekst</a> - Link naar een pagina
<img src="url" alt="beschrijving"> - Afbeelding (geen sluit-tag!)
`, starterHTML: ` Links en Afbeeldingen

Mijn Links

`, starterCSS: ``, solution: { html: ` Links en Afbeeldingen

Mijn Links

Zoek op Google Placeholder `, css: `` }, check: (html, css) => { return html.includes('') && html.includes('', ''] }, { id: 4, title: 'Lijsten maken', description: 'Maak geordende en ongeordende lijsten.', instructions: `

Er zijn twee soorten lijsten:

<ul> = Ongeordende lijst (bullets)
<ol> = Geordende lijst (nummers)
<li> = Lijst item
`, starterHTML: ` Mijn Lijsten

Over Mij

Mijn Hobby's

Top 3 Films

`, starterCSS: ``, solution: { html: ` Mijn Lijsten

Over Mij

Mijn Hobby's

Top 3 Films

  1. Film 1
  2. Film 2
  3. Film 3
`, css: `` }, check: (html, css) => { return html.includes('') && html.includes('
    ') && html.includes('
') && (html.match(/
  • /g) || []).length >= 6; }, hints: [ 'ul = unordered list (bullets)', 'ol = ordered list (nummers)', 'Elk item in de lijst moet tussen
  • en
  • ' ], reference: ['