Visual Code Map
index.html
<!DOCTYPE html>
<html>
<head>
⬤ CSS goes here
<style> ... </style>
</head>
<body>
⬤ HTML content goes here
<h1>...</h1>
<p>...</p>
⬤ JavaScript goes here
<script> ... </script>
</body>
</html>
👆 Click a muted zone above to learn more
Interactive Puzzle
Sort the blocks below into their proper locations block positions.
Drop CSS here
Drop HTML here
Drop JS here
document.getElementById("btn")
color: red; font-size: 16px;
<button class="btn">Click</button>
background: linear-gradient(...);
addEventListener("click", fn)
<img src="photo.jpg" />
display: flex; gap: 10px;
<h1>Welcome</h1>
console.log("Page loaded")
border-radius: 8px; padding: 20px;
<input type="text" />
fetch("/api/data")
Score: 0 / 12