• 1. Ajouter ce bouton à index.html :

<button id="clic">Clique-moi !</button>

• 2. Créer un fichier script.js avec ce contenu :

document.getElementById('clic').addEventListener('click', () => {
  alert('Tu as cliqué ! 🎉');
});

• 3. Clique sur le bouton !
• Aller plus loin

Clique-moi !

1ère étape : Structure HTML

• Une div avec la classe card.
• Une image, un titre h2, un paragraphe p et un bouton.

2ème étape : Personnalisation CSS

Ajoutez du style : largeur, bordure, ombre, centrage, image ronde, style bouton.

3ème étape : Animation JS

Écouteur d’événement, changer couleur fond carte.

1ère étape : Structure HTML

<div class="card">
  <img src="photo.jpg" alt="Photo de profil" />
  <h2>Jean Dupont</h2>
  <p>Développeur web débutant.</p>
  <button>Changer couleur</button>
</div>

2ème étape : CSS

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
  text-align: center;
  font-family: Arial, sans-serif;
  margin: 30px auto;
}

.card img {
  width: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.card button {
  padding: 10px 20px;
  border: none;
  background-color: #008CBA;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

3ème étape : JS

const card = document.querySelector('.card');
const button = document.querySelector('button');

button.addEventListener('click', () => {
  card.style.backgroundColor = '#fff9c4';
});