1. Week 1 - Hadil66/connect-your-tribe-profile-card GitHub Wiki

Maandag 5 februari

Aantekeningen

Semester 2: Data-driven web

De student gebruikt API's en databases voor het ontwerpen en ontwikkelen van gebruiksvriendelijke interactieve toepassingen voor het web.

  • Server-side
  • Node
  • Formulieren
  • Browsers
  • Progressive enhancement
  • Performance
  • Real time

CMS: content managing service (bijvoorbeeld: hygraph)

Sprint 7: Connect your tribe

Client-side:

  • HTML
  • CSS
  • JavaScript

Server-side:

  • PHP
  • Python
  • Java
  • C#

Analyseren

Als eerst heb ik de whois database aangepast en in de JS code mijn ID gelinkt.

Ik kreeg dit als resultaat.

Vervolgens heb ik de CSS van mijn profile card uit sprint 1 toegevoegd.

Ontwerpen

Op Pinterest heb ik inspiratie opgedaan en dit gebruikt als basis voor mijn moodboard.

Colour palette

Als laatste heb ik onderzoek gedaan naar welke lettertypen ik wil gebruiken. Ik zocht naar een 'vintage' lettertype en heb er een gevonden met behulp van een generator en Pinterest.

Dinsdag 6 februari

Ontwerpen

schetsen

Breakdownschets

Woensdag 7 februari

Aantekeningen

Javascript structure / fundmentals

Values, types, operators

Numbers: Waarden zijn numeriek.

  • infinity
  • -infinity
  • NAN (not a number)

Strings: Waarden zijn tekstueel. " " $ { } <= tekst + variabelen

Unary operators: Enkelvoudig. Er zijn operators die niet tussen twee waarden in staat (zoals + en -) maar die slechts 1 enkele waarde bewerken.

Booleans: Binaire operatoren, ze staan tussen twee waarden in.

Rariteiten: Twee 'lege' waarden:

  • null
  • undefined

! MET DE HAND TYPECASTEN !

Array: Te zien aan [ ] .

Bouwen

commit 1

Aan de hand van de breakdownschets ben ik begonnen met bouwen. Als eerst heb ik de data in de html gelinkt.

Ook heb ik een diagonale div gemaakt.

Ik heb dat opgezocht en de links hieronder als hulpmiddel gebruikt.

Bronnen:

Donderdag 8 februari

Bouwen en testen

Commit 2 Ik heb de achtergrond van de image veranderd.

Commit 3 Ik heb hier de card flip animatie toegevoegd. Ook heb ik een footer gemaakt en de achtergrond van de HTML veranderd.

Commit 4 Ik heb tekst op de achterkant van de kaart toegevoegd en een extra link toegevoegd aan de footer.

Bronnen:

Vrijdag 9 februari

Bouwen en testen

Commit 5 Ik heb vrijdag de font van de p en de padding van de H1 en H2 aangepast.

Integreren

Ook heb ik de site live gezet. Alleen is de achtergrond niet zichtbaar.

Profile Card