Skip to content

Latest commit

 

History

History
218 lines (127 loc) · 11.1 KB

INSTRUCTIONS.md

File metadata and controls

218 lines (127 loc) · 11.1 KB
Raw

Visitekaartje

Visitekaartje

Je maakt op basis van het voorbeeld een eigen visitekaartje. Dit doe je door de bestaande inhoud in HTML, de opmaak in CSS en/of de functionaliteit in JS aan te passen en naar je hand te zetten.

Context

Deze leertaak hoort bij sprint 1 "Your Tribe". Dit is een duplicate taak die je individueel uitvoert.

Briefing

Elke frontender bij FDND stelt zichzelf binnen de tribe voor door middel van een visitekaartje.

Maak een visitekaartje op basis van het voorbeeld en publiceer dat via Github pages.

Doel van deze leertaak

Na het volgen van deze leertaak heb je zelf een visitekaartje ontworpen en gemaakt met behulp van de 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.

Werkwijze

Dit is een voorbeeld taak die wordt behandeld in het bijhorende college. Deze opdracht gaat over alle fases van de development-lifecycle analyseren, ontwerpen, bouwen, integreren en testen.

Volg onderstaand fases om jouw visitekaartje gestructureerd te ontwerpen, aan te passen en op Github te publiceren.

Als het goed is heb je al naar een voorbeeld van Jane Doe gekeken. Als je dat nog niet hebt gedaan is het handig het voorbeeld even te bestuderen voor je verder gaat.

Analyseren

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.

Aanpak
  1. Lees de instructies van deze leertaak zorgvuldig door.
  2. Bekijk de verschillende fases van de Development Lifecycle en wat je per fase gaat doen.
  3. Bespreek wat je aan werk verwacht en maak aantekening. (wat komt je bekend voor, wat heb je al vaker gedaan of wat lijkt je lastig)

Ontwerpen

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.)

Aanpak
  1. 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?)
  2. Bespreek je schets en ideeën met je squad en verzamel feedback
  3. Schets een een definitieve versie van je visitekaartje
image

Materiaal ontwerpfase

  • Pen en papier.

Over kleur, hoe te kiezen en toe te passen:

Over het (Gebruik van) beeld en iconen

Over typografie, hoe te kiezen en te gebruiken:

Bouwen

In de bouwfase realiseer je de beslissingen uit de ontwerpfase in HTML, CSS en JS. Op basis van je ontwerpschets ga je de HTML, CSS en JS van het visitekaartje van deze taak aanpassen.

Aanpak

1. Forken en Downloaden

Zorg eerst dat je de leertaak naar je eigen account kopieert, dan is dan jouw repo en daar ga je je eigen code in maken.

  1. Fork deze repository naar je eigen Github account.
  2. Download de code naar jouw computer.
  3. Je begint met de content in HTML, voegt CSS toe voor de vormgeving en JS voor de interactie.

2. HTML

Alle inhoud van een webpagina wordt vastgelegd in HTML. Neem de tijd voor deze stap en zorg dat je het HTML bestand begrijpt.

  1. Open het /index.html bestand in een editor.
  2. Op regel 13 staat een <h1>...</h1> element met de naam Jane Doe. Voer hier jouw eigen naam in.
  3. Op regel 14 staan <p><em>...</em></p> met daarin de beschrijving van Jane. Pas dit aan naar jouw eigen tekst.
  4. Pas op dezelfde manier de vaardigheden op regels 36 en verder en het motto op regel 42 aan.
  5. In het voorbeeld staat een foto <img src="assets/creative-coder.png"> op regel 34. Verander de foto met jouw mugshot.
  6. Je kunt als je wilt ook de icoontjes vervangen voor iets wat beter bij jouw past, gebruik daarvoor de Unicode Character Table.

Materiaal bouwfase HTML

3. CSS

De vormgeving van een webpagina worden vastgelegd in CSS, zoals de layout, achtergrondkleur, tekstkleur en grootte, randen, schaduwen etc). Neem de tijd voor deze stap en zorg dat je het CSS bestand begrijpt.

  1. Kun je zien op welke regel in het HTML document het CSS document wordt gekoppeld?
  2. Open het /styles/style.css bestand in een editor.
  3. Op regel 24 en 25 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 ;)

  1. Op regel 13 staat color: #10214e, deze regel legt de normale tekstkleur van het bestand vast in hexadecimale notatie. Pas ook deze kleur aan naar jouw kleurenpalet.
  2. Zoek het bestand verder door en zet alle background en color declaraties naar jouw hand.
  3. In het bestand wordt ook de stijl bepaald van twee SVG afbeeldingen. De declaraties die hier voor gebruikt worden zijn stroke en fill. Als je het tof vindt kan je ook die kleuren aanpassen aan jouw kleurenpalet!

Materiaal bouwfase CSS

4. JS

De interactie op de pagina wordt bepaald door Javascript (JS). Neem de tijd voor deze stap en zorg dat je het JS bestand begrijpt. Als je nog nooit iets met JSS zelf hebt gedaan, bekijk dan met een klasgenoot de code, misschien kan hij of zij je uitleggen wat er gebeurt.

  1. Kun je zien op welke regel in het HTML document het JS document wordt gekoppeld?
  2. Open het /script/script.js bestand in een editor.
  3. Schrijf achter elke regel wat die doet.
  4. Heb je zelf ook een interactie bedacht voor je visitekaartje? Hoe zou je dat kunnen maken?

Materiaal bouwfase JS

Integreren

In de integratiefase voer je de aanpassingen door zodat iedereen ze kan zien.

Je gaat jouw aanpassing op het visitekaartje publiceren op internet! Dat klinkt lastig maar is heel eenvoudig met behulp van Github en Github pages (gh-pages). Eerst ga je je nieuwe code toevoegen aan je lokale repository zodat Github weet wat de nieuwste versie is. Daarna ga je de wijzigingen doorvoeren op de repository op Github. Tot slot ga je je opdracht publiceren met behulp van Github Pages.

Aanpak
  1. Open de Github-Desktop App
  2. Browse naar de repo van deze opdracht FDND-visitekaartje-duplicate
  3. Hier zie je alle wijzigingen die je hebt gemaakt [changes].
  4. Schrijf een titel waaraan je goed kan zien wat je hebt gewijzigd (dit is verplicht)
  5. 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 samen werkt.
  6. Commit je code aan je lokale repository, klik op [Commit to Master]
  7. Nu kan je je code naar de online repository_ op Github uploaden, klik op [Push origin]
  8. Nu kun je je website publiceren. Selecteer Setting van je online repository om naar de instellingen te gaan.
  9. Klik in het linkermenu op Pages. Als het goed is zie je hetzelfde als in onderstaande screenshot:

Github Pages

  1. Selecteer bij Source de Master branch en klik op Save:

Github Pages

  1. Als het goed is gegaan kan je binnen enkele momenten jouw visitekaartje bekijken via de URL: https://username.github.io/fdnd-visitekaartje-duplicate/.

  2. Bekijk jouw visitekaartje even uitgebreid, ga daarna verder met de volgende fase.

Materiaal integratiefase

Testen

In de testfase controleer je of jouw aanpassingen werken zoals bedoeld.

Aanpak
  1. Laat jouw visitekaartje testen door een paar klasgenoten en jouw docent. Noteer wat ze er van vinden. Ben je tevreden met het resultaat? Zo niet herhaal dan bovenstaande stappen.

Criteria

Je bent klaar als je deze opdracht hebt nagemaakt met jouw eigen gegevens.