HTML Challenges

  • Imitate the Output
    Beginner

    Recreate the layout structure from the image using standard document hierarchy rules.

    Preview Challenge
  • Fix a Bug
    Beginner

    Fix the list of fruits in order to display the proper output

    Preview Challenge
  • Why not Working?
    Beginner

    Fix the syntax and explain your answer inside the comment

    Preview Challenge
  • A Multiplication Table
    Beginner

    Create a mulitiplication table from 1-10

    Preview Challenge
  • Basic Login Form
    Beginner

    Create a simple login form using html tags

    Preview Challenge
  • Profile Card
    Beginner

    Create a simple profile card using html tags. You can change the photo with your own photo of choice.

    Preview Challenge

CSS Challenges

  • Design a Profile Card
    Beginner

    Design the card created in html to look like the output image

    Preview Challenge
  • Fix the design
    Beginner

    Fix the display

    Preview Challenge
  • Imitate the Output
    Beginner

    Imitate the design using css properties

    Preview Challenge
  • Styled Multiplication Table
    Beginner

    Create a multiplication table (1-10) and style it using CSS. Add alternating row colors, apply table borders and padding, center the numbers inside each cell, and include a hover effect that highlights the row.

    Preview Challenge
  • Build a Navigation Bar
    Intermediate

    Create a horizontal navigation bar using <ul> and <li>. Style it with CSS to remove bullet points, display items inline, add spacing between items, and change the color on hover.

    Preview Challenge

JavaScript Challenges

  • Button Counter
    Beginner

    Create a button that, when clicked, increases a counter displayed on the page. Each click should update the number using JavaScript.

    Preview Challenge
  • Fruit List Generator
    Intermediate

    Build a script that loops through the array ["apple","banana","mango"] and displays each fruit inside an HTML ul list. Start with a blank ul in the HTML and use document.getElementById to insert li items dynamically.

    Preview Challenge
  • Multiplication Table Generator
    Intermediate

    Write a script that uses a for loop to generate a multiplication table (1-10). Output the table directly into the HTML page using document.write only, and style it with basic table properties.

    Preview Challenge
  • Front Page Bytes: Weather Report
    Beginner

    Declare a variable to store today’s weather and display it inside a styled HTML news article. Start with a blank <div> in the HTML and use document.getElementById with innerHTML to insert the weather update dynamically.

    Preview Challenge
  • Button Calculator
    Intermediate

    Build a calculator interface using HTML buttons for digits (0-9), operators (+, -, x, ÷), a clear button, and an equals button. Use JavaScript functions to handle button clicks, update the display, and evaluate expressions.

    Preview Challenge