Introductie tot HTML- en CSS-codering Deel 2

Uit onderzoek blijkt dat webdesign invloed heeft op hoe bedrijven worden gezien en dat de presentatie rechtstreeks samenhangt met vertrouwen. Daarom is het cruciaal dat organisaties goed ontworpen websites hebben.

Deze cursus bouwt voort op de basiskennis uit deel 1 en leert je aanvullende vaardigheden die van pas komen bij het bouwen van websites.

Dit omvat:

• waarom prestaties en organisatie belangrijk zijn,
• hoe je een website vormgeeft en ontwerpt,
• responsief webdesign,
• en best practices voor HTML en CSS waarmee je code overzichtelijk en herbruikbaar houdt.

Cursusonderwerpen:

Les 1: Prestaties en organisatie

ONDERWERP A: Strategie en structuur

• Prestaties
• Stijlarchitectuur

ONDERWERP B: Objectgeoriënteerde CSS

• Objectgeoriënteerde CSS-methodologie
• Structuur scheiden van vormgeving
• Inhoud scheiden van container

ONDERWERP C: Schaalbare en modulaire architectuur voor CSS

• Schaalbare en modulaire CSS
• De vijf kerngroepen
• Welke methodologie kies je?

ONDERWERP D: Herbruikbare code

• Stijlen hergebruiken
• Opdracht 1-4: Herbruikbare code schrijven
• Samenvatting
• Herhalingsvragen

Les 2: HTML: inhoud positioneren

ONDERWERP A: Herhaling

• Veelgebruikte termen

ONDERWERP B: Inhoud positioneren met floats

• Positioneren met floats
• Lay-out zonder floats
• Lay-out met drie kolommen en floats
• Floats opheffen
• Opdracht 2-2: Lay-outs met twee en drie kolommen combineren

ONDERWERP C: Positioneren met inline-block

• Positioneren met inline-block
• Opdracht 2-3: Kolommen maken met inline-block
• Samenvatting
• Herhalingsvragen

Les 3: Complexe selectors

ONDERWERP A: Veelgebruikte selectors

• Typeselector
• Classselectors
• ID-selectors
• Child-selectors

ONDERWERP B: Attribuutselectors

• Selector voor aanwezige attributen
• Selector voor attributen met een specifieke waarde
• Selector voor attributen die een waarde bevatten
• Selector voor attributen die beginnen of eindigen met een waarde
• Pseudoklassen
• Opdracht 3-2: Selectors gebruiken
• Samenvatting
• Herhalingsvragen

Les 4: Responsief webdesign

ONDERWERP A: Flexibele lay-outs

• Flexibele lay-out
• Flexibel raster

ONDERWERP B: Mediaquery's

• Mediaquery's gebruiken
• Logische operatoren in mediaquery's
• Opdracht 4-2: Dynamische breedtes en mediaquery's gebruiken
• Samenvatting
• Herhalingsvragen

Les 5: Je beste code schrijven

ONDERWERP A: Praktijken voor HTML-programmeren

• Mark-up die voldoet aan de standaarden
• Semantische elementen gebruiken
• De juiste documentstructuur gebruiken
• De syntaxis overzichtelijk houden
• Opdracht 5-1: Best practices voor HTML toepassen

ONDERWERP B: Praktijken voor CSS-programmeren

• Code organiseren met opmerkingen
• CSS schrijven met meerdere regels en spaties
• De juiste classnamen gebruiken
• Verkorte eigenschappen en waarden gebruiken
• Opdracht 5-2: Best practices voor CSS toepassen
• Samenvatting
• Herhalingsvragen