Docent
Tijd: 30 min
CSS is de taal waarmee je vormgeving vastlegt voor onderdelen van een webpagina. Bijvoorbeeld hoe groot de letters zijn, welke kleur en welk lettertype. Of welke achtergrondkleur een pagina heeft. Maar je legt er ook een belangrijk deel van de layout in vast: links of rechts uitlijnen, witruimte, lagen, etc. Maar ook interactie, animaties, en responsiveness: hoe je layout zich aanpast op de breedte van het scherm.
Lees verder “CSS Basis”Tijd: 2 uur
Een lightbox is een full-screen kader dat over een pagina heen verschijnt. Dit gebeurt bijvoorbeeld wanneer je op een thumbnail (een kleine weergave) van een foto klikt. In deze opdracht gaan we met behulp van de selector :target zelf een lightbox coderen.
Lees verder “Lightbox”Tijd: 8 uur
Deze opdracht is onderdeel van het ED project “e-Commerce” (F2M4). Bij dit project ontwikkel je wekelijks 3 digitale promo-producten voor verschillende media/platforms. Deze producten presenteer je op een passende manier in een webpagina. De stappen die je moet zetten om deze presentatiepagina te maken worden hieronder toegelicht.
Lees verder “Promo presentatie”Tijd: 90 min
In html/css kun je de layout van elementen op verschillende manieren opbouwen. In het begin van het internet gebruikte men tables voor het uitlijnen, daarna kwamen floats, positioning en inline-blocks. Een andere layout-tool is flexbox en sinds 2017 is daar grid bijgekomen.
Lees verder “Grid”Tijd: 3 uur
Letters en tekst hebben eigenschappen die je wel kent, zoals bold of italic. Met css kunnen we deze (en nog veel meer) teksteigenschappen aanpassen. In deze oefening nemen we aan de hand van een songtekst een korte duik in de mogelijkheden.
Lees verder “Web Typografie”
Binnenkort ga je solliciteren voor je stage. Bij zo’n sollicitatie laat je je werk zien in een portfolio. Werkgevers verwachten dat jouw portfolio (ook) online te vinden is.
Velen van jullie hebben al een (aanzet tot een) online portfolio gemaakt. Met deze oefening scherpen we de presentatiewaarde van je bestaande portfolio aan. Het doel is om tot een professioneel portfolio te komen.
Tijd: 6 uur
Lees verder “Online portfolio”Duur: 4 uur
Iedereen gebruikt afbeeldingen die worden gevonden op internet. Op zich niets mis mee, als je maar weet waar je op moet letten. Het komt veel voor dat gevonden afbeeldingen te klein zijn of van te lage kwaliteit. Daarnaast is er ook weinig aandacht voor gebruikslicenties.
Tijd: 4 uur
Lees verder “Afbeeldingen op internet”
Je hebt je verdiept in de structuur van HTML5 door middel van de opdracht Taste 4 U. Nu staat er een kale website die wel wat aankleding kan gebruiken. Dit is deel twee van deze opdracht en hierin gaan we de website vormgeven met CSS.De CSS die je tot nu toe al hebt verwerkt in je website kun je laten staan en aanvullen met de onderstaande opdracht. Voor deze opdracht gebruik je het lesmateriaal (video’s) van Gerhard. Deze zijn te vinden door de link onder benodigdheden te volgen.
Website
De bedoeling is dat je hier onderstaande punten volgt. Wanneer je dit niet doet, bijvoorbeeld omdat je al een andere vormgevingskeuze hebt gemaakt, geef dan even in je CSS aan (met een comment) waarom je deze keuze hebt gemaakt.
Bootstrap is een CSS-framework gemaakt door Twitter waarmee je snel een responsive website kan maken die goed functioneert in alle moderne browsers, zowel op desktops als op mobiele apparaten. Bootstrap bevat CSS-stijlen voor allerlei user interface componenten, zoals buttons, labels, menu’s, meldingen en breadcrumbs. Met behulp van een fixed grid of een fluid grid kun je snel en eenvoudig responsive layouts maken.Naast CSS bevat Bootstrap meer dan 10 custom jQuery plugins om bijvoorbeeld carousels, modals en dropdown menu’s te maken. Twitter Bootstrap stelt je in staat om snel en zonder al te veel kennis van HTML en CSS een mooie website te maken. Ook voor webdesigners met ervaring kan Bootstrap een waardevol instrument zijn, doordat het hun workflow aanzienlijk kan versnellen.
Vandaag de dag zijn er veel Bootstrap thema’s en templates beschikbaar. Van simpele html templates voor statische websites tot complete WordPress themes. Op de website van Bootstrap staan al een aantal voorbeelden die prima als template voor een eenvoudige website kunnen werken.
Bootstrap 3 Essential Training (door Ray Villalobos)
Tijdsduur: 4 uur school, 4 uur thuis.
Download het bestand met 4 pagina-layouts (zie Benodigdheden). In deze PDF staan vier pagina’s die ieder verschillend zijn opgemaakt. Maak deze pagina’s na, let goed op de padding en margin die in de vlakken gebruikt worden.
Pagina 1, 2 en 3 zijn verplicht voor een 7, pagina 4 is “The Challenge” en kan als beoordeling een 9 geven als deze perfect is uitgevoerd.
Het onderwerp van deze Bootstrap website ben jij, in combinatie met jouw favoriete bezigheid. In het onderdeel ‘eigen menu’ plaats je vijf favoriete websites in een unordered list. De slider is voor een hogere beoordeling.
TIP: Download de zipfile “bsyourself quickstart” en pak deze uit op je computer. Hierin staat een opzetje voor het eerste template voor je klaar.
Extra punten “The Challenge”:
Tijd: 4 uur
HTML is de ruggegraat van het web; vrijwel alle websites zijn er in geschreven. HTML staat voor Hyper Text Markup Language. Door middel van deze ‘opmaak taal’ weet een browser hoe de pagina moet worden weergeven.
Lees verder “HTML (g.derksen)”
