Je maakt op basis van een voorbeeld een eigen visitekaartje.
Deze leertaak hoort bij sprint 1 "Your Tribe". Dit is een leertaak die je individueel uitvoert.
In de workshop S01W1-02-Visitekaartje wordt stap voor stap uitgelegd wat je moet doen.
Bij deze leertaak horen de deeltaken:
Elke frontender bij FDND stelt zichzelf binnen de tribe voor door middel van een visitekaartje.
Maak een visitekaartje op basis van dit voorbeeld en publiceer dat via Github pages.
Na het volgen van deze leertaak heb je zelf een visitekaartje ontworpen en gemaakt. Je leert werken met de Development Lifecycle. Je hebt hiervoor een aantal eigen ontwerpbeslissingen gemaakt en HTML (voor de structuur), CSS (voor de vormgeving) en JS (voor de interactie) gebruikt om het ontwerp te bouwen. Tot slot heb je jouw visitekaartje gepubliceerd via GitHub Pages en met een aantal klasgenoten getest of het werkt zoals je bedoelde.
Deze taak wordt behandeld in het bijhorende college. Deze opdracht gaat over alle fases van de Development-Lifecycle; analyseren, ontwerpen, bouwen, integreren en testen.
Volg onderstaande fases om jouw visitekaartje gestructureerd te ontwerpen, aan te passen en op GitHub te publiceren.
In de analysefase inventariseer je wat er moet gebeuren om een taak uit te voeren en formuleer je een aantal uitgangspunten waar je ontwerp aan moet voldoen.
- Lees de instructies van deze leertaak zorgvuldig door.
- Bekijk de verschillende fases van de Development Lifecycle en wat je per fase gaat doen.
- Bespreek wat je aan werk verwacht en maak aantekeningen. (Wat komt je bekend voor, wat heb je al vaker gedaan of wat lijkt je lastig?)
Bij de start van de ontwerpfase weet je wat het doel en het resultaat van je project zijn. In de ontwerpfase neem je ontwerpbeslissingen en zorg je dat je precies weet wat je moet gaan bouwen.
Nu wordt het tijd om te kijken hoe het resultaat eruit zou kunnen zien.
Dit is een belangrijk moment in het project. (Voor veel opdrachtgevers geldt dat ze nu pas duidelijk krijgen hoe het resultaat eruit zal zien. En dat is een moment waarop veel opdrachtgevers veel duidelijker kunnen aangeven wat ze wel en niet willen.)
- Schets in je boekje! (Wat wil je over jezelf vertellen? Waar ben je geboren? Waar woon je nu? Wat is je lievelingseten? Heb je een bijbaan? Zit je op een sport? Heb je ambities? Waar wil je goed in worden? Wat zou een leraar van je vorige school over jou vertellen? En wat zeggen je vrienden?)
- Stel jezelf voor aan je collega’s met behulp van je tekeningen. Bespreek samen welk idee geschikt is om uit te werken.
- Schets een definitieve versie van je visitekaartje. Deze schets toont in grote lijnen hoe je visitekaartje er uit moet komen te zien. Geef wat tekstuele hints over kleurgebruik en/of animaties die je zou willen maken. Misschien kun je nog iets toevoegen naar aanleiding van het gesprek met je collega’s?
- Pen en papier
In de bouwfase realiseer je de beslissingen uit de ontwerpfase in HTML, CSS en JS.
Op basis van je ontwerpschets ga je bedenken hoe je je ontwerp in code kan bouwen. Je zet je project op in GitHub en kopieert de repository naar jouw computer. Je begint met de content in HTML, voegt CSS toe voor de vormgeving en JS voor de interactie.
De code schrijf je in een code-editor zoals Visual Studio Code. Alle code van je project zet je op GitHub, zodat docenten en studiegenoten kunnen zien wat je hebt gedaan.
Zorg eerst dat je de leertaak naar je eigen account kopieert; dat is dan jouw repository en daar ga je je eigen code in maken.
- Fork deze repository naar je eigen GitHub account.
- Download de code naar jouw computer.
- Je begint met de content in HTML, voegt CSS toe voor de vormgeving en JS voor de interactie.
HyperText Markup Language (HTML) is de taal waarin webpagina's zijn opgemaakt, die vervolgens bekeken kunnen worden op het World Wide Web. In het HTML document staat de inhoud van het ontwerp gestructureerd met HTML elementen. In het HTML document van het visitekaartje, index.html, staat alle inhoud die je op de webpagina ziet.
- Open het
index.htmlbestand van de leertaak op jouw computer in een code-editor. - Op regel 15 staat een
<h1>...</h1>element met de naam Jane Doe. Voer hier jouw eigen naam in. - Op regel 17 staat
<p><em>...</em></p>met daarin de beschrijving van Jane. Pas dit aan naar jouw eigen tekst. - Pas op dezelfde manier de vaardigheden aan op regels 42 en verder, en het motto op regel 52. Misschien wil je hier wel iets anders presenteren? Dat kan ook ...
- In het voorbeeld staat een foto
<img src="assets/creative-coder.png">op regel 39. Verander de foto met jouw mugshot. - Je kunt als je wilt ook de icoontjes vervangen voor iets wat beter bij jou past. Gebruik daarvoor de Unicode Character Table.
- Getting started with the Web @ MDN
- HTML: HyperText Markup Language @ MDN
- Overzicht van HTML elementen @ MDN
- Learn HTML @ web.dev
- HTML semantics @ YouTube
De vormgeving van een webpagina worden vastgelegd in Cascading Style Sheets (CSS), zoals de layout, achtergrondkleur, tekstkleur en grootte, randen, schaduwen, etc. De CSS staat in een los document en wordt aan de HTML pagina gekoppeld in het <head> element. je mag zelf weten hoe het CSS bestand heet. In ons voorbeeld heet het bestand style.css en staat het in de map styles.
- Kun je zien op welke regel in het HTML document het CSS bestand wordt gekoppeld?
- Open het
styles/style.cssbestand in een editor. - Op regel 28 en 29 wordt de achtergrondkleur vastgelegd in de regels:
background: rgb(0,239,255);
background: linear-gradient(0deg, rgba(0,239,255,1) 40%, #4e54c8 100%);De eerste waarde stelt een kleur in met RGB notatie. Voer de RGB waarde voor jouw achtergrondkleur in. Als je het interessant vindt, mag je proberen de gradient naar je hand te zetten :)
- Op regel 15 staat
color: #10214e. Deze regel legt de normale tekstkleur van het bestand vast in hexadecimale notatie. Pas ook deze kleur aan naar jouw kleurenpalet. - Zoek het bestand verder door en zet alle
backgroundencolordeclaraties naar jouw hand. - In het bestand wordt ook de stijl bepaald van twee SVG iconen. De eigenschap die hier voor de kleur gebruikt wordt, is
stroke. Als je het tof vindt kan je ook die kleuren aanpassen aan jouw kleurenpalet.
- CSS: Cascading Style Sheets @ MDN
- CSS Almanac @ CSS-tricks
- Learn CSS @ web.dev
- CSS Typography - Change Font, Size, Spacing & more @ YouTube
De interactie op de pagina wordt bepaald door JavaScript (JS). De JS code staat in een los document en moet ook in het HTML document worden gekoppeld. Dat kan in de <head> maar ook onder aan in het HTML document. je mag zelf weten hoe het JS bestand heet. In ons voorbeeld heet het file script.js en staat het in de map scripts.
- Kun je zien op welke regel in het HTML document het JS document wordt gekoppeld?
- Open het
scripts/script.jsbestand in een editor. - Schrijf achter elke regel wat die doet.
- Heb je zelf ook een interactie bedacht voor je visitekaartje? Hoe zou je dat kunnen maken?
In de integratiefase voer je de aanpassingen door, zodat iedereen ze kan zien.
Eerst voeg je de nieuwe code toe aan je lokale repository zodat GitHub weet wat de nieuwste versie is. Daarna ga je de code uploaden naar de online repository op GitHub. Tot slot ga je je opdracht publiceren met behulp van GitHub Pages. Als je dat hebt gedaan, staat je website online en heb je een URL. Nu kunnen anderen je werk ook zien.
Commit en Push je code met behulp van de GitHub Desktop app.
- Open de GitHub Desktop app.
- Browse op je computer naar de repository van deze opdracht, your-tribe-profile-card.
- Hier zie je alle wijzigingen die je hebt gemaakt [changes].
- Schrijf een titel waaraan je goed kan zien wat je hebt gewijzigd (dit is verplicht).
- Schrijf zo nodig ook een beschrijving waarin je kan uitleggen wat er is veranderd en waarom. Dit is vooral handig als je met meer mensen samenwerkt.
- Commit je code aan je lokale repository; klik op [Commit to main]
- Daarna kun je de wijzigingen uploaden naar de online repository op GitHub. Klik op [Push origin]
- Als je je repository hebt bijgewerkt, kun je op de GitHub website je wijzigingen zien van je online repository, als je op commits klikt.
Als je je code hebt geüpdatet naar je online repository kun je je website publiceren.
- Klik op ⚙️ Settings van je online repository om naar de instellingen te gaan.
- Klik in het linkermenu op Pages. Hier staan de instellingen om je code online te hosten.
- Selecteer bij Branch de Main branch en klik op Save:
- Als het goed is gegaan, kun je binnen enkele momenten jouw visitekaartje online bekijken.
- Wat is GitHub? Hier een heldere uitleg!
- Creating a GitHub pages site @ GitHub
- How To Publish Your HTML With GitHub Pages
In de testfase controleer je of jouw aanpassingen werken zoals bedoeld. Dit kan een technische test zijn, maar ook een test met gebruikers of een presentatie bij de opdrachtgever, om te bespreken of de opdracht goed is.
Het is handig als je de URL van jouw visitekaartje toevoegt aan de 'About' van je repository. Zo kunnen andere mensen ook makkelijk jouw visitekaartje bekijken.
- Ga naar de settings van de About op de eerste pagina van je online repository
- Voeg de URL van je visitekaartje toe en klik op Save
- Laat jouw visitekaartje testen door een paar klasgenoten.
- Maak aantekeningen van de test.
- Ben je tevreden met het resultaat? Zo niet, herhaal dan bovenstaande stappen.
Deze opdracht is done als:
- Je visitekaartje staat op GitHub en heeft een live url
- Je hebt gewerkt volgens de verschillende fases van de development-lifecycle
- Je hebt een ontwerp geschetst
- Je hebt het ontwerp gerealiseerd met HTML, CSS en/of JS