2de deel speedcourse. 1ste deel was basis webpagina opstellen.
Je kan codes in elements/inspecteren uitproberen en dan pas coderen.
JavaScript:
-filenaam main.js
-console is enorm belangrijk(console.log)
-Elements (elementen pagina inspecteren rechter muis + Inspect)
CSS:
-nav ul display: flex; (elementen list naast elkaar zetten)
-flex-grow: 1; (hele breedte benutten voor enkel element, tenzij je binnen nav ul li {} zet)
OF .menu-item (in HTML een class geven!)
-text-align: center; (tekst/element in midden zetten)
-.menu-item a (a href link) { text-decoration: none;} (lijntje onder link weghalen)
-list-style-type: none; (bolletjes unlisted item weghalen)
-display: inline-block; (Vanaf hier grootte, padding en kleur aanpassen)
padding is makkelijker (border om tekst ipv afmetingen achtergrond)
-margin: 0 auto; (Boven-onder en links-rechts spacing)
-float: left; (element aan 1 kant laten hoveren)
-flex-wrap; (skipt lijn zodra er geen ruimte voor het element meer is.
Tutorial flex display opzoeken!
HTML:
-Zoveel mogelijk elementen een class geven.
-Block elementen, bevat inline (p, ul tags)
-Inline elementen, binnen een block (a, span, strong, i tags)
-ul li tags (unlisted items en listed items)
-<figure> <img “image link.jpg” alt = “naam image”/> <figcaption>naam
image</figcaption></figure> (foto toevoegen aan website)
-image map aanmaken
-src is altijd verwijzing naar de link
-alt/figcaption is voor slechtzienden (alt is verplicht!! (rechtszaak Domino’s website)
figcaption is sterk aangeraden!!)
Je kan codes in elements/inspecteren uitproberen en dan pas coderen.
JavaScript:
-filenaam main.js
-console is enorm belangrijk(console.log)
-Elements (elementen pagina inspecteren rechter muis + Inspect)
CSS:
-nav ul display: flex; (elementen list naast elkaar zetten)
-flex-grow: 1; (hele breedte benutten voor enkel element, tenzij je binnen nav ul li {} zet)
OF .menu-item (in HTML een class geven!)
-text-align: center; (tekst/element in midden zetten)
-.menu-item a (a href link) { text-decoration: none;} (lijntje onder link weghalen)
-list-style-type: none; (bolletjes unlisted item weghalen)
-display: inline-block; (Vanaf hier grootte, padding en kleur aanpassen)
padding is makkelijker (border om tekst ipv afmetingen achtergrond)
-margin: 0 auto; (Boven-onder en links-rechts spacing)
-float: left; (element aan 1 kant laten hoveren)
-flex-wrap; (skipt lijn zodra er geen ruimte voor het element meer is.
Tutorial flex display opzoeken!
HTML:
-Zoveel mogelijk elementen een class geven.
-Block elementen, bevat inline (p, ul tags)
-Inline elementen, binnen een block (a, span, strong, i tags)
-ul li tags (unlisted items en listed items)
-<figure> <img “image link.jpg” alt = “naam image”/> <figcaption>naam
image</figcaption></figure> (foto toevoegen aan website)
-image map aanmaken
-src is altijd verwijzing naar de link
-alt/figcaption is voor slechtzienden (alt is verplicht!! (rechtszaak Domino’s website)
figcaption is sterk aangeraden!!)
