Notes:

When i first thought about what tutorials should look like, I wasnt sure if I should compile a list of some of the most commonly used html/css codes along with some js fundamentals or show you how html, css & js work together.

As a result, this is designed for people like me when I was first starting out. I didn't want to be bored; I wanted to jump into interactive front end development and the structure here should hopefully help you progress logically.

If you like this, you can visit the layouts page.

Project 1: Background Color Changer

This project lets users click a button to change the page background color randomly and I like this one becomes it gives users something to do while they are on your page.

HTML

<button id="colorChangerBtn">Change Background Color</button>

• <button> – creates a clickable button element.
• id="colorChangerBtn" – gives the button a unique identifier so js can find it.
• Text inside the button ("Change Background Color") – this is what users will see and click.

CSS

#colorChangerBtn {
  padding: 10px 20px;
  background-color: #a77ee8;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}
#colorChangerBtn:hover {
  background-color: #8e44ad;
}

• padding: adds space inside the button around the text.
• background-color: sets the fill color of the button.
• color: sets the text color.
• border: none: removes the default browser border.
• border-radius: rounds the button corners for a softer look.
• cursor: pointer: shows a hand icon when hovering over the button.
• transition: smooths hover effects.
• :hover selector: changes the button color when hovered.

JS

// Step 1: Select the button
const colorBtn = document.getElementById('colorChangerBtn');

// Step 2: Add click event listener
colorBtn.addEventListener('click', () => {

// Step 3: Generate random RGB values
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);

// Step 4: Apply color to the body background
  document.body.style.backgroundColor = `rgb(${r},${g},${b})`;
});

• Step 1: document.getElementById('colorChangerBtn') – selects the button from the page.
• Step 2: addEventListener('click') – waits for the user to click the button.
• Step 3: Math.random() generates random numbers for red, green, and blue (0–255).
• Step 4: document.body.style.backgroundColor – sets the page’s background to the random color.