WebScope — HTML, CSS & JS Deconstructed

Code Deconstructor

Click any highlighted word

index.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pixel and Pause Arcade</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header>
    <h1>Pixel and Pause</h1>
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#scores">High Scores</a></li>
        <li><a href="#contact">Feedback</a></li>
      </ul>
    </nav>
  </header>

  <section id="about">
    <h2>About This Cabinet</h2>
    <p>
      This page is a <strong>practice arcade cabinet</strong> built entirely
      from HTML and CSS. Every tag on this screen is <em>clickable</em>.
    </p>
    <img src="https://placehold.co/100x100/1a1a2e/e8a33d?text=%F0%9F%95%B9" alt="pixel joystick icon">
    <div class="card">
      <span class="badge">New</span>
      <p>No JavaScript required to look this good — just clean structure and styled boxes.</p>
      <button>Press Start</button>
    </div>
  </section>

  <section id="scores">
    <h2>High Scores</h2>
    <table>
      <tr>
        <th>Rank</th>
        <th>Player</th>
        <th>Score</th>
      </tr>
      <tr>
        <td>1</td>
        <td>P1</td>
        <td>9,900</td>
      </tr>
      <tr>
        <td>2</td>
        <td>P2</td>
        <td>8,200</td>
      </tr>
    </table>
  </section>

  <hr>

  <section id="contact">
    <h2>Leave Feedback</h2>
    <form>
      <label for="msg">Your message:</label><br>
      <input type="text" id="msg" name="msg" placeholder="Type here...">
    </form>
  </section>

  <footer>
    <p>© 2026 Pixel and Pause Arcade. Made for learning purposes.</p>
  </footer>

</body>
</html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

body {
  font-family: 'JetBrains Mono', monospace;
  background-color: #1a1a2e;
  color: #f4f4f4;
  margin: 0;
  padding: 0;
}

header {
  background-color: #16213e;
  padding: 24px;
  text-align: center;
  border-bottom: 4px solid #e8a33d;
}

h1 {
  color: #e8a33d;
  font-size: 2.5rem;
  font-weight: 700;
}

nav ul {
  display: flex;
  justify-content: center;
  gap: 24px;
  list-style: none;
  padding: 0;
}

nav a {
  color: #4fd1c5;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

nav a:hover {
  color: #ffffff;
}

section {
  max-width: 500px;
  margin: 30px auto;
}

.card {
  background-color: #0f3460;
  border-radius: 12px;
  padding: 20px;
  margin: 20px auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.badge {
  background-color: #e8a33d;
  color: #1a1a2e;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
}

button {
  background-color: #4fd1c5;
  color: #1a1a2e;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  transition: transform 0.15s ease;
}

button:hover {
  transform: scale(1.05);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

th, td {
  border: 1px solid #4fd1c5;
  padding: 8px 12px;
  text-align: center;
}

footer {
  text-align: center;
  padding: 20px;
  color: #888888;
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

const startBtn = document.querySelector('button');
const feedbackForm = document.querySelector('form');
const messageInput = document.getElementById('msg');
let pressCount = 0;

startBtn.addEventListener('click', function() {
  pressCount++;
  startBtn.textContent = 'Pressed ' + pressCount + ' time' + (pressCount === 1 ? '' : 's');
  startBtn.classList.add('pressed');
});

feedbackForm.addEventListener('submit', function(event) {
  event.preventDefault();
  if (messageInput.value.trim() === '') {
    alert('Type a message first!');
    return;
  }
  const scoreTable = document.querySelector('table');
  const newRow = document.createElement('tr');
  newRow.innerHTML = '<td>' + scoreTable.rows.length + '</td><td>You</td><td>Thanks!</td>';
  scoreTable.appendChild(newRow);
  messageInput.value = '';
});

Interactive Inspector

🔍 Click on any amber tag or teal property in the code panel to see its role, why it's needed, and a real-world analogy.

The Anatomy of HTML, CSS & JS

Code Deconstructor

Live Preview