Webdesign praktijk oefening:
variatie op een productkaart

Doel:

Creëer een aangepaste variant van een bestaande productkaart. Gebruik verschillende kleuren, producten en stijlen voor de algemene vormgeving van de card en de CTA knop.

De basis van de card vind je op de volgende CodePen link.

Stappen:

  1. Afbeeldingen hosten: Maak een account aan op een CDN (Content Delivery Network) of op Google drive om de afbeelding te plaatsen in je CodePen.
  2. Kopieer de basis Layout: Begin met de basisstructuur van de bestaande productkaart. Gebruik CodePen om je werk te ontwikkelen.
  3. Selecteer een nieuw Product: Kies een nieuw product voor je kaart.
  4. Pas de afbeelding aan: Vervang de bestaande afbeelding met een nieuwe.
  5. Verander de tekst: Pas de tekst aan om overeen te komen met je nieuwe product.
  6. Stijl de Kaart met Nieuwe Kleuren: Wijzig de kleuren van de kaart. Bezoek colorcodes.io voor kleurinspiratie.
  7. Personaliseer de call-to-action knop: Stijl het a-element tot een CTA button.
  8. Voeg Unieke CSS eigenschappen Toe: Experimenteer met CSS-eigenschappen zoals schaduwen of randen. Bezoek W3Schools CSS Tutorial voor meer informatie en voorbeelden.
  9. Test en feedback: Test je kaart en vraag feedback.
  10. Presenteer je werk: Sla je werk op in CodePen en stuur de CodePen-link door voor beoordeling en punten.

Criteria voor beoordeling:

Extra Bronnen: Voor diegenen die hun kennis willen verdiepen, bezoek MDN Web Docs CSS cursus voor een uitgebreide gids over CSS, inclusief praktische voorbeelden en oefeningen.