One of the best beginner JavaScript projects is a GitHub user finder. In one small app you practise DOM selection, events, fetch, async/await and error handling.

The HTML

<form id="search-form">
<input id="username" placeholder="GitHub username">
<button>Search</button>
</form>
<div id="result"></div>

The JavaScript

`const form = document.querySelector('#search-form');
const input = document.querySelector('#username');
const result = document.querySelector('#result');

form.addEventListener('submit', async (e) => {
e.preventDefault();
const username = input.value.trim();
if (!username) return;

result.textContent = 'Loading...';
try {
const res = await fetch(https://api.github.com/users/${encodeURIComponent(username)});
if (!res.ok) throw new Error(res.status === 404 ? 'User not found' : 'Something went wrong');
const user = await res.json();

result.innerHTML = `<img src="${user.avatar_url}" alt="" width="80"><h2></h2><p></p>`; result.querySelector('h2').textContent = user.name ?? user.login; result.querySelector('p').textContent = `${user.public_repos} repos · ${user.followers} followers`;

} catch (err) {
result.textContent = err.message;
}
});`

Three things worth noticing:

  • e.preventDefault() stops the form from reloading the page. Forgetting it is the #1 beginner bug.

  • res.ok: fetch doesn’t throw on a 404, so you have to check the response yourself.

  • textContent for API data: never put text from an API straight into innerHTML. If someone’s name contains HTML, it gets rendered as HTML.

This is one of four projects in my JavaScript course. You build a To-Do app, an Expense Tracker, this GitHub Finder, and finally a full e-commerce store. HTML and CSS are provided, so you spend 100% of your time on JavaScript.

👉 JavaScript for Beginners: Build a Budget App & Online Store