DEV Community

Cover image for (Part 2) Let’s Build 5 Fun Frontend Projects (With Code!)
ANISHA SWAIN | The UI Girl
ANISHA SWAIN | The UI Girl

Posted on

(Part 2) Let’s Build 5 Fun Frontend Projects (With Code!)

#webdev #programming #beginners #javascript

Hey again!

Ready to go from learning about web development to actually doing it? You’re in the right place.

This post is where the fun really begins — we’re going to build 5 beginner-friendly projects using only HTML, CSS, and JavaScript.

Each project is designed to:

  • Be simple enough for total beginners
  • Teach you key frontend skills
  • Leave you with something cool you can share or use

📸 1. Random Meme Generator

What it does: Click a button to load a random meme from the internet.

🧠 What You’ll Learn

  • Working with APIs
  • Updating images dynamically
  • Handling button clicks

🧱 Code: index.html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Random Meme Generator</title>
  <style>
    body { font-family: sans-serif; text-align: center; padding: 20px; }
    img { max-width: 100%; height: auto; margin-top: 20px; }
    button { padding: 10px 20px; font-size: 16px; margin-top: 10px; }
  </style>
</head>
<body>
  <h1>Random Meme Generator</h1>
  <img id="meme" src="" alt="meme" />
  <br>
  <button onclick="getMeme()">Get New Meme</button>

  <script>
    async function getMeme() {
      const res = await fetch("https://meme-api.com/gimme");
      const data = await res.json();
      document.getElementById("meme").src = data.url;
    }
    getMeme();
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

✅ What Just Happened?

  • We used fetch() to get a meme from meme-api.com
  • Got a JSON response with the meme URL
  • Updated the image source with data.url
  • Now a new meme loads every time you click the button

🎯 Extra Challenges

  • Add a loading spinner
  • Show meme title below the image
  • Let users download the meme
  • Add a “copy meme link” button

🎁 What You’ve Learned

  • HTML structure
  • Basic styling with CSS
  • Fetching data from an API
  • DOM manipulation with JavaScript

🎨 2. Color Palette Generator

What it does: Click a button to generate 5 random color swatches.

🧠 What You’ll Learn

  • Working with colors in JS
  • Generating random hex codes
  • Styling boxes dynamically

🧱 Code 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Color Palette Generator</title>
  <style>
    body { font-family: sans-serif; text-align: center; padding: 20px; }
    .palette { display: flex; justify-content: center; gap: 15px; margin-top: 20px; }
    .color-box { width: 100px; height: 100px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; }
    button { padding: 10px 20px; font-size: 16px; margin-top: 10px; }
  </style>
</head>
<body>
  <h1>Color Palette Generator</h1>
  <div class="palette" id="palette"></div>
  <button onclick="generateColors()">Generate Colors</button>

  <script>
    function getRandomColor() {
      return "#" + Math.floor(Math.random() * 16777215).toString(16);
    }

    function generateColors() {
      const palette = document.getElementById("palette");
      palette.innerHTML = "";
      for (let i = 0; i < 5; i++) {
        const color = getRandomColor();
        const box = document.createElement("div");
        box.className = "color-box";
        box.style.background = color;
        box.innerText = color;
        palette.appendChild(box);
      }
    }

    generateColors();
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

🎯 Extra Challenges

  • Display color hex code inside the box
  • Add a “copy to clipboard” feature
  • Let users lock colors to keep them during refresh

🎁 What You’ve Learned

  • Loops and random numbers in JavaScript
  • Inline styles and creating elements
  • Color theory and user experience

⏳ 3. Simple Pomodoro Timer

What it does: A 25-minute productivity timer with start, pause, and reset.

🧠 What You’ll Learn

  • Countdown timers
  • Buttons and events
  • Text updates in real time

🧱 Code 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Pomodoro Timer</title>
  <style>
    body { font-family: sans-serif; text-align: center; padding: 20px; }
    #timer { font-size: 48px; margin: 20px 0; }
    button { padding: 10px 15px; margin: 5px; font-size: 16px; }
  </style>
</head>
<body>
  <h1>Pomodoro Timer</h1>
  <div id="timer">25:00</div>
  <button onclick="startTimer()">Start</button>
  <button onclick="pauseTimer()">Pause</button>
  <button onclick="resetTimer()">Reset</button>

  <script>
    let seconds = 1500;
    let timer;
    const display = document.getElementById("timer");

    function updateDisplay() {
      let min = Math.floor(seconds / 60);
      let sec = seconds % 60;
      display.textContent = `${min.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
    }

    function startTimer() {
      if (!timer) {
        timer = setInterval(() => {
          if (seconds > 0) {
            seconds--;
            updateDisplay();
          }
        }, 1000);
      }
    }

    function pauseTimer() {
      clearInterval(timer);
      timer = null;
    }

    function resetTimer() {
      seconds = 1500;
      updateDisplay();
      pauseTimer();
    }

    updateDisplay();
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

🎯 Extra Challenges

  • Add break timers
  • Play a sound when time ends
  • Change the background color as time passes

🎁 What You’ve Learned

  • Working with time and intervals
  • DOM updates every second
  • Clean UI for productivity tools

🎉 4. Event Countdown

What it does: You enter a date, and it counts down the days left.

🧠 What You’ll Learn

  • Handling user input
  • Calculating dates
  • Updating text based on logic

🧱 Code 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Event Countdown</title>
  <style>
    body { font-family: sans-serif; text-align: center; padding: 20px; }
    input, button { padding: 10px; font-size: 16px; margin: 10px 5px; }
    #countdown { font-size: 24px; margin-top: 20px; }
  </style>
</head>
<body>
  <h1>Event Countdown</h1>
  <input type="date" id="eventDate" />
  <button onclick="startCountdown()">Start Countdown</button>
  <div id="countdown"></div>

  <script>
    function startCountdown() {
      const inputDate = document.getElementById("eventDate").value;
      const targetDate = new Date(inputDate);
      const today = new Date();
      const diff = Math.floor((targetDate - today) / (1000 * 60 * 60 * 24));
      document.getElementById("countdown").textContent = 
        diff >= 0 ? `${diff} days left!` : "The date has passed!";
    }
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

🎯 Extra Challenges

  • Update countdown every day
  • Add hours, minutes, seconds countdown
  • Save and show upcoming events

🎁 What You’ve Learned

  • Working with Date objects
  • User interaction through input
  • Simple but powerful date logic

🎤 5. Lyrics Finder

What it does: Enter a song + artist and get the lyrics using an API.

🧠 What You’ll Learn

  • Form handling
  • Fetching and displaying text data
  • Error handling

🧱 Code 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Lyrics Finder</title>
  <style>
    body { font-family: sans-serif; text-align: center; padding: 20px; }
    input { padding: 10px; margin: 5px; width: 200px; }
    button { padding: 10px 15px; margin: 5px; font-size: 16px; }
    pre { white-space: pre-wrap; text-align: left; max-width: 600px; margin: 20px auto; background: #f5f5f5; padding: 15px; border-radius: 8px; }
  </style>
</head>
<body>
  <h1>Lyrics Finder</h1>
  <input id="artist" placeholder="Artist" />
  <input id="song" placeholder="Song" />
  <br>
  <button onclick="getLyrics()">Get Lyrics</button>
  <pre id="lyrics">Type artist and song name, then click the button.</pre>

  <script>
    async function getLyrics() {
      const artist = document.getElementById("artist").value.trim();
      const song = document.getElementById("song").value.trim();
      if (!artist || !song) {
        alert("Please enter both artist and song name");
        return;
      }

      try {
        const res = await fetch(`https://api.lyrics.ovh/v1/${artist}/${song}`);
        const data = await res.json();
        document.getElementById("lyrics").textContent = data.lyrics || "Lyrics not found.";
      } catch (error) {
        document.getElementById("lyrics").textContent = "Error fetching lyrics.";
      }
    }
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

🎯 Extra Challenges

  • Add “loading...” while fetching
  • Clear lyrics when inputs change
  • Let users copy lyrics

🎁 What You’ve Learned

  • Forms and inputs
  • Using an API with parameters
  • Handling no-result cases

📦 Bonus: Free Learning Resources

Want to go deeper? These resources helped me a lot:

🚀 What’s Next?

In the next post, we’ll look at:

  • How to host your projects online for free (using GitHub Pages)
  • Making your sites responsive (look good on phones!)
  • A gentle intro to design systems and components

💬 Let’s Stay in Touch!

If you tried even one project — I’m proud of you. Really.

Share your screenshots, show your friends, or tag me on socials. If you got stuck, that’s totally okay — just drop a comment and I’ll help out.

Until next time — keep coding and keep it fun!

Let me know if you'd like a downloadable PDF version, a series index, or a linked GitHub repo with all projects in one place.

Let me know if you want this exported as a .md file or styled for your blog layout!

Top comments (0)