Tools: AI

Als beginnende webontwikkelaar kan AI een waardevolle hulpbron zijn bij het leren en debuggen van je HTML en CSS code. Hieronder vind je praktische manieren om AI-tools zoals Claude of ChatGPT te gebruiken bij je webontwikkelingsprojecten.

Code uitleg vragen

Wanneer je code tegenkomt die je niet begrijpt:

• Kopieer de code die je niet begrijpt in de AI-tool
• Vraag om uitleg in eenvoudige termen: Kun je uitleggen wat deze CSS-code doet?

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

Vraag om specifieke details zoals:

• "Wat betekent 'flex-wrap: wrap'?"
• "Wanneer zou ik 'justify-content: space-between' gebruiken?"

Code debuggen met AI

Wanneer je code niet werkt zoals verwacht:

• Deel zowel je HTML als CSS code voor context
• Beschrijf het probleem zo specifiek mogelijk: Mijn afbeelding zou gecentreerd moeten zijn in de div, maar blijft links staan.Wat is er mis met mijn code?
• Vermeld wat je al hebt geprobeerd om het probleem op te lossen

HTML:

<div class="container">
  <img src="foto.jpg" alt="Mijn foto" class="center-img">
</div>

CSS:

.container {
  width: 100%;
  text-align: center;
}
.center-img {
  width: 300px;
}

Regels

• Als je AI gebruikt om code te genereren voor een opdracht dan vermeld je dat in een comment. Plaats hier ook de prompt die je gebruikt hebt.
• Wees je bewust van de energie die AI verbruikt. Gebruik dit verantwoordelijk.

AI systemen

• Claude
• ChatGPT
• Cursor
• Copilot