Week 1 (36) - ambersr/i-love-web GitHub Wiki

Dag 1 (2 september 2024)

  • Wat heb ik vandaag gedaan?

Vandaag was de eerste kennismaking/introductie met mijn klas. We hebben onze eerste opdracht uitgelegd gekregen, een eigen visite kaartje coderen. Daarbij kwam het installeren van een aantal programma's waaronder: Visual Studio Code en Github. We hebben uitgelegd gekregen hoe we onze code kunnen forken en clonen in onze eigen Github.

  • Schrijf 3 vragen op.
  1. Als je de code update wordt dit dan ook gelijk geüpdate in Github?
  2. Moet je voor een flip kaart CSS gebruiken?
  3. Gebruik ik de juiste properties?
  • Dit wil ik nog uitzoeken of lezen..

Korte uitleg met wanneer je Ul, Ol en Dl gebruikt in de code. http://www.homepage-maken.nl/htmlcursus/les6.php

Dag 2 (3 september 2024)

  • Wat heb ik vandaag gedaan?

Vandaag hebben we onze eerste hoorcollege gekregen. We hebben een hele leerzame uitleg gekregen van Justus waarin hij inging op de basis van HTML, CSS en Javascript. We hebben geleerd wat properties zijn en hoe je deze linkt in de CSS. Daarnaast ben ik bezig geweest met het schetsen van mijn visitekaartje. Ik kwam op het idee om een voor en achterkant te maken en deze te laten switchen doormiddel van een flipkaart of een switch knop.

  • Schrijf 3 vragen op.
  1. Hoe wil ik mijn kaartje uitbreiden of laten switchen?
  2. Welke code moet ik hiervoor gebruiken? (CSS en/of Javascript)
  3. Hoe voeg je een font toe aan de CSS?
  • Dit wil ik nog uitzoeken of lezen..

Linkje naar de switch button: https://www.w3schools.com/howto/howto_css_switch.asp https://codepen.io/mn8809/pen/OPmYxy https://stackoverflow.com/questions/59250799/flipping-a-card-triggered-by-button https://www.sliderrevolution.com/resources/css-flip-cards/

Dag 3 (4 september 2024)

  • Wat heb ik vandaag gedaan?

Vandaag ben ik bezig geweest met het maken van een breakdown schets. Dit is een schets waarin ik aangeef welke properties ik wil gebruiken in de HTML en welke CSS styling ik aan de properties wil geven. Ik heb het design dat ik gister in Figma heb ontworpen goed uitgetekend op papier.

Linkje naar Figma bestand: https://www.figma.com/design/DXJVOUapnTVZWHXkFpcr0I/Visitekaartje-van-Amber-Schalker?node-id=0-1&t=bwLNnCoYvXnQFFtD-1

  • Schrijf 3 vragen op.
  1. Hoe maak ik een flip kaart?
  2. Moet je voor een flip kaart CSS gebruiken?
  3. Gebruik ik de juiste properties?
  • Dit wil ik nog uitzoeken of lezen..

Linkje naar hoe ik makkelijk een flip kaart kan maken met HTML en CSS https://www.w3schools.com/howto/howto_css_flip_card.asp

Dag 4 (5 september 2024)

  • Wat heb ik vandaag gedaan?

Vandaag hebben we een introductie gekregen over over JavaScript. Hierin hebben we meer duidelijkheid gekregen over hoe je Javascript gebruikt en wat de functie is. Ook ben ik weer aan de slag gegaan met mijn visitekaartje. Ik heb een switch button erin gezet met behulp van Javascript code.

Linkje naar visitekaartje: https://ambersr.github.io/your-tribe-profile-card/

Linkje naar javascript code: https://github.com/ambersr/your-tribe-profile-card/blob/2dc1687b10244bbafecfad5aef7c4d484fdc3e81/scripts/script.js#L1-L17

  • Schrijf 3 vragen op.
  1. Wat betekenen alle Javascript elementen?
  2. Welke functies zijn er te gebruiken?
  3. Hoe doe ik een toggle switch button linken met JavaScript zodat het kaartje switched?
  • Dit wil ik nog uitzoeken of lezen..

Linkje naar hoe ik makkelijk een flip kaart kan maken met HTML en CSS https://www.w3schools.com/howto/howto_css_flip_card.asp

Dag 5 (6 september 2024)

  • Wat heb ik vandaag gedaan?

Ik ben vandaag bezig geweest met het zo ver mogelijk afmaken van mijn visitekaartje. Deze heb ik door 3 mensen laten reviewen. In deze feedback staan de punten die ik kan verbeteren en wat ik nog moet aanpassen. Aan het einde van de dag hebben we een expo waarin we onze visitekaartjes aan medestudenten hebben laten zien.

Issues van mijn visitekaartje:

  1. Julia: https://github.com/ambersr/your-tribe-profile-card/issues/1
  2. Jules: https://github.com/ambersr/your-tribe-profile-card/issues/2
  3. Kim: https://github.com/ambersr/your-tribe-profile-card/issues/3
  • Schrijf 3 vragen op.
  1. Hoe maak ik mijn visitekaartje goed responsive?
  2. Wat zijn de belangrijkste functies in Javascript?
  3. Welke browser is het belangrijkst om te testen?
  • Dit wil ik nog uitzoeken of lezen..

Game om Javascript te leren: https://www.codingame.com/ide/puzzle/onboarding