JavaScript sticks when you ship. The capstone: build a small app that takes input, manipulates the DOM, fetches or stores data, and handles async with proper error handling — say a todo list with localStorage, or a search box that debounces and calls an API. That proves you can turn a static page into living software. Next stop: a framework, or going deeper on the platform APIs.
<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
<form id="f"><input id="i" placeholder="new todo"><button>add</button></form><ul id="l"></ul>
<script>
const KEY='cap.todos';let todos=JSON.parse(localStorage.getItem(KEY)||'[]');
function render(){const l=document.getElementById('l');l.innerHTML='';todos.forEach((t,i)=>{const li=document.createElement('li');li.textContent=t+' ';const b=document.createElement('button');b.textContent='×';b.onclick=()=>{todos.splice(i,1);save();};li.append(b);l.append(li);});}
function save(){localStorage.setItem(KEY,JSON.stringify(todos));render();}
document.getElementById('f').onsubmit=e=>{e.preventDefault();const v=document.getElementById('i').value.trim();if(v){todos.push(v);e.target.reset();save();}};
render();
</script></body></html>