HTML Challenges
-
Preview Challenge
Imitate the Output
BeginnerRecreate the layout structure from the image using standard document hierarchy rules.
-
Preview Challenge
Fix a Bug
BeginnerFix the list of fruits in order to display the proper output
-
Preview Challenge
Why not Working?
BeginnerFix the syntax and explain your answer inside the comment
-
Preview Challenge
A Multiplication Table
BeginnerCreate a mulitiplication table from 1-10
-
Preview Challenge
Basic Login Form
BeginnerCreate a simple login form using html tags
-
Preview Challenge
Profile Card
BeginnerCreate a simple profile card using html tags. You can change the photo with your own photo of choice.
CSS Challenges
-
Preview Challenge
Design a Profile Card
BeginnerDesign the card created in html to look like the output image
-
Preview Challenge
Fix the design
BeginnerFix the display
-
Preview Challenge
Imitate the Output
BeginnerImitate the design using css properties
-
Preview Challenge
Styled Multiplication Table
BeginnerCreate 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
IntermediateCreate 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.
JavaScript Challenges
-
Preview Challenge
Button Counter
BeginnerCreate 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
IntermediateBuild 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
IntermediateWrite 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
BeginnerDeclare 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
IntermediateBuild 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.