Notes:

When I first thought about what tutorials should look like, I wasn't 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.

*While these tutorials seem to be working fine on codepen, they haven't been tested on Neocities..which means there's unlikely to be any minor issues with coding logic just environment.

Project 1: Background Color Changer

This project lets users click a button to change the page background color randomly and this one is cool because it gives users something to do while they are on your page. It teaches how to select elements and respond to user clicks using js events.

HTML

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

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;
}

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})`;
});
Code Pen Demo or Neocities Demo

Project 2: Interactive Animated Character

This project creates a floating character that pops slightly when clicked. This project teaches teaches how css animations and js interactions can combine to create dynamic effects on your web page and what's working about this is that you no longer need a sprite sheet.

HTML

<div class="gameBox">
  <div class="character" id="character">
    <img src="https://bisha.neocities.org/images/mario.png" alt="Character">
  </div>
</div>

CSS

.gameBox {
  width: 250px;
  height: 250px;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
}

.character {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: float 2.5s ease-in-out infinite;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.character img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes float {
  0% { bottom: 0px; }
  50% { bottom: 30px; }
  100% { bottom: 0px; }
}

JS

// Step 1: Select the character element
const character = document.getElementById("character");

// Step 2: Add click event for pop effect
character.addEventListener("click", () => {

// Step 3: Enlarge character
  character.style.transform = "translateX(-50%) scale(1.2)";

// Step 4: Reset size after 300ms
  setTimeout(() => {
    character.style.transform = "translateX(-50%) scale(1)";
  }, 300);
});
Code Pen Demo or Neocities Demo

Project 3: Image Slider

This project cycles through multiple images horizontally, creating an automatic slider. This project teaches how js timers and css transitions work together to create automatic animations and I like this one for all of its simplicity, which means less bugs to work out.

HTML

<div id="sliderWrapper">
  <div id="imageSlider">
    <img src="https://bisha.neocities.org/images/airandwatershow.png" alt="Air and Water Show">
    <img src="https://bisha.neocities.org/images/firepit.png" alt="Fire Pit">
    <img src="https://bisha.neocities.org/images/pumpkins.png" alt="Pumpkins">
  </div>
</div>

CSS

#sliderWrapper {
  width: 100%;
  max-width: 800px;
  overflow: hidden; /* hides overflowing images */
  margin: auto;
  border: 2px solid #ccc;
}

#imageSlider {
  display: flex; /* aligns images horizontally */
  transition: transform 1s ease; /* smooth slide animation */
}

#imageSlider img {
  width: 100%;
  flex-shrink: 0; /* prevents images from shrinking */
}

JS

window.addEventListener('DOMContentLoaded', () => {
  const slider = document.getElementById('imageSlider');
  const images = document.querySelectorAll('#imageSlider img');
  let index = 0;

  setInterval(() => {
// Step 1: Move to the next image
    index = (index + 1) % images.length;

// Step 2: Shift the slider
    slider.style.transform = `translateX(-${index * 100}%)`;
  }, 3000);
});
Code Pen Demo or Neocities Demo

Project 4: Which Super Hero Are You Quiz?

This project asks the user questions and shows a super hero result based on their choices. It teaches how to use variables, conditionals, and user input to build interactive logic and decision making systems and what sticks out about this one is it shows you that js has a mind of its own; even more autonomous than an image slide.


(This quiz checks for exact scores. Later, you can improve it by using greater than (>) or less than (<) to make the results more flexible.)

HTML

<div id="question1">
  <p class="question">1. When someone is in need, are you quick to act or wait?</p>
  <button class="answerBtn" data-answer="1">Quick to Act</button>
  <button class="answerBtn" data-answer="0">Wait and see</button>
</div>

<div id="question2" style="display: none;">
  <p class="question">2. Would you rather have xray vision or psychic abilities?</p>
  <button class="answerBtn" data-answer="1">Xray Vision</button>
  <button class="answerBtn" data-answer="0">Psychic Abilities</button>
</div>

<div id="question3" style="display: none;">
  <p class="question">3. Are you thunder or lightning?</p>
  <button class="answerBtn" data-answer="1">Thunder</button>
  <button class="answerBtn" data-answer="0">Lightning</button>
</div>

<div id="question4" style="display: none;">
  <p class="question">4. Would you rather fly or teleport?</p>
  <button class="answerBtn" data-answer="1">Fly</button>
  <button class="answerBtn" data-answer="0">Teleport</button>
</div>

<div id="question5" style="display: none;">
  <p class="question">5. Do people see you as mysterious or altruistic?</p>
  <button class="answerBtn" data-answer="1">Mysterious</button>
  <button class="answerBtn" data-answer="0">Altruistic</button>
</div>

<div id="result" style="display: none;">
  <p id="characterResult"></p>
</div>

CSS

.answerBtn {
  padding: 10px 20px;
  background-color: #a77ee8;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin: 5px;
}

#characterResult {
  margin-top: 20px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #8e44ad;
}

JS

let score = 0;
const answerBtns = document.querySelectorAll('.answerBtn');

answerBtns.forEach(btn => {
  btn.addEventListener('click', (event) => {
// Step 1: Add score from button clicked
    score += parseInt(event.target.getAttribute('data-answer'));

// Step 2: Hide current question
    const currentQuestion = event.target.closest('div');
    currentQuestion.style.display = 'none';

// Step 3: Show next question or result
    const nextQuestion = currentQuestion.nextElementSibling;
    if (nextQuestion && nextQuestion.id !== 'result') {
      nextQuestion.style.display = 'block';
    } else {
      displayResult();
    }
  });
});

function displayResult() {
  const resultElement = document.getElementById('result');
  const characterResult = document.getElementById('characterResult');

  if (score === 3) {
    characterResult.textContent = 'You are Superman! You take charge and help others.';
  } else if (score === 2) {
    characterResult.textContent = 'You are Jack Jack from The Incredibles! You are in awe over your powers.';
  } else {
    characterResult.textContent = 'You are Batman! You know how to be calm under pressure.';
  }

  resultElement.style.display = 'block';
}
Code Pen Demo or Neocities Demo

Project 5: Hamburger Menu

A navigation aspect that hides a menu behind three little horizontal lines also known as UI state control. Clicking the hamburger toggles the menu visibility and animates the icon into an X. This project teaches how js can toggle css classes to control responsive layouts and interactive navigation; what this one has in its favor is that it doesn't take up much space on your home page.

HTML

<!-- Hamburger Icon -->
<div class="hamburger" id="hamburger">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

<!-- Dropdown Menu -->
<div class="menu" id="menu">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</div>

CSS

body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f0f0f0;
}

/* Hamburger button styling */
.hamburger {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 20px;
  border-radius: 50%;
  background: #ff6347;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s;
}

.hamburger div {
  width: 25px;
  height: 3px;
  background: white;
  border-radius: 2px;
  transition: all 0.4s;
}

.hamburger div:not(:last-child) { margin-bottom: 5px; }

/* Animate hamburger into X */
.hamburger.active .line1 { transform: rotate(45deg) translate(5px,5px); }
.hamburger.active .line2 { opacity: 0; }
.hamburger.active .line3 { transform: rotate(-45deg) translate(5px,-5px); }

/* Dropdown menu styling */
.menu {
  display: none;
  flex-direction: column;
  background: #fff;
  position: absolute;
  top: 80px;
  left: 20px;
  width: 180px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  border-radius: 10px;
  overflow: hidden;
}

.menu a {
  padding: 12px 20px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #eee;
  transition: background 0.3s;
}

.menu a:last-child { border-bottom: none; }

.menu a:hover { background: #ff6347; color: white; }

/* Show menu when active */
.menu.active { display: flex; }

JS

const hamburger = document.getElementById('hamburger');
const menu = document.getElementById('menu');

hamburger.addEventListener('click', () => {
  hamburger.classList.toggle('active');
  menu.classList.toggle('active');
});
Code Pen Demo or Neocities Demo

Where JS Functions Come From

This diagram shows the source of different js functions in the projects:

Core JS

  • Math.random()
  • setInterval()
  • parseInt()

Browser DOM API

  • document.getElementById()
  • createElement()
  • addEventListener()
  • querySelectorAll()

External Libraries

  • jQuery ($().click(), $.ajax())
  • React (React.createElement())
  • Lodash (_.map(), _.filter())

HTML, CSS, JS Learning Resources

Curated resources to learn and reference html, css and js

HTML

CSS

JS