How the Web Works

HTML = the content. Words between angle brackets like <h1> are tags. They tell the browser what each piece is.

<div class="card">
  <div class="avatar">🧑‍🎨</div>
  <h1>Alex Rivera</h1>
  <p class="role">Design student · Erasmus in Porto</p>
  <p>I love photography, street food and building small websites with AI.</p>
  <ul class="tags">
    <li>📷 Photos</li>
    <li>🍜 Food</li>
    <li>🌍 Travel</li>
  </ul>
  <button id="like">❤️ Like <span id="count">12</span></button>
  <button id="mode">🌙 Dark mode</button>
</div>

CSS = the look. Each rule picks some elements (for example .card or button) and gives them a style between { }.

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
  background: linear-gradient(135deg, #ffe3a3, #e4d8ff);
}
.card {
  width: 290px;
  padding: 22px;
  text-align: center;
  background: white;
  color: #1f1140;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(31, 17, 64, 0.2);
  transition: background 0.3s, color 0.3s;
}
.avatar {
  width: 68px;
  height: 68px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  font-size: 38px;
  background: #fff4d9;
  border-radius: 50%;
}
h1 { margin: 10px 0 0; font-size: 24px; }
.role { margin: 2px 0 10px; color: #6b6386; font-size: 14px; }
.tags { list-style: none; padding: 0; display: flex; justify-content: center; gap: 6px; }
.tags li { background: #efe9ff; color: #2d1b5c; padding: 4px 10px; border-radius: 99px; font-size: 13px; }
button {
  border: 0;
  margin: 4px;
  padding: 10px 16px;
  border-radius: 99px;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  background: #2d1b5c;
  color: white;
}
#mode { background: #f5a300; color: #2a1a00; }

/* These two styles are switched on by JavaScript */
.liked { background: #e0245e; }
.card.dark { background: #1f1140; color: #f1eefb; }
.card.dark .role { color: #cfc6ee; }

JavaScript = the behaviour. It finds parts of the page, waits for a click, then changes something. The lines starting with // are notes for humans.

// 1. Find the parts of the page we need
const card = document.querySelector('.card');
const likeButton = document.querySelector('#like');
const countText = document.querySelector('#count');
const modeButton = document.querySelector('#mode');

let likes = 12;
let liked = false;

// 2. When someone clicks "Like": add or remove one like
likeButton.addEventListener('click', () => {
  liked = !liked;
  if (liked) {
    likes = likes + 1;
  } else {
    likes = likes - 1;
  }
  countText.textContent = likes;
  likeButton.classList.toggle('liked', liked);
});

// 3. When someone clicks the mode button: switch dark mode on or off
modeButton.addEventListener('click', () => {
  card.classList.toggle('dark');
  if (card.classList.contains('dark')) {
    modeButton.textContent = '☀️ Light mode';
  } else {
    modeButton.textContent = '🌙 Dark mode';
  }
});