Practice is required to understand know how to HTML CSS JavaScript work together. There are all basic components for web development in any programing language. In this tutorial, you will find HTML CSS JavaScript practice exercises with solutions.
HTML CSS JavaScript practice exercises with solution
1. How to create a simple web page that displays your name and a photo of yourself. Use HTML to structure the page and CSS to style it.
<!DOCTYPE html>
<html>
<head>
<title>My Personal Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
font-size: 36px;
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<header>
<h1>My Name</h1>
</header>
<main>
<img src="my-photo.jpg" alt="My Photo">
</main>
</body>
</html>
2. Make an HTML form that allows users to input their name, email address, and message. Use JavaScript to validate the user’s input before submitting the form.
<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
<style>
label {
display: block;
margin-bottom: 10px;
}
input[type="text"], textarea {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.error {
color: red;
}
</style>
</head>
<body>
<h1>Contact Us</h1>
<form id="contact-form" action="submit-form.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email Address:</label>
<input type="text" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="Submit">
</form>
<script>
const form = document.getElementById('contact-form');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const messageInput = document.getElementById('message');
const errorMessages = document.getElementsByClassName('error');
function validateForm() {
// Clear any existing error messages
for (let i = 0; i < errorMessages.length; i++) {
errorMessages[i].textContent = '';
}
let isValid = true;
// Validate name field
if (nameInput.value.trim() === '') {
nameInput.nextElementSibling.textContent = 'Name is required';
isValid = false;
}
// Validate email field
const emailPattern = /^[^@]+@[^@]+\.[^@]+$/;
if (!emailPattern.test(emailInput.value)) {
emailInput.nextElementSibling.textContent = 'Please enter a valid email address';
isValid = false;
}
// Validate message field
if (messageInput.value.trim() === '') {
messageInput.nextElementSibling.textContent = 'Message is required';
isValid = false;
}
return isValid;
}
form.addEventListener('submit', (event) => {
// Prevent the form from submitting if it's invalid
if (!validateForm()) {
event.preventDefault();
}
});
</script>
</body>
</html>
Output:
3. Create a navigation menu that uses CSS transitions to animate when the user hovers over each item.
<!DOCTYPE html>
<html>
<head>
<title>CSS Transitions Example</title>
<style>
/* Reset styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main styles */
nav {
background-color: #333;
padding: 10px;
font-size: 20px;
}
ul {
display: flex;
justify-content: space-between;
list-style: none;
}
li {
margin-right: 20px;
position: relative;
}
a {
color: #fff;
text-decoration: none;
padding: 10px;
display: inline-block;
}
/* Hover styles */
li:hover a {
color: #333;
background-color: #fff;
}
li:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
transform: scaleX(0);
transition: transform 0.3s ease;
transform-origin: left;
}
li:hover:before {
transform: scaleX(1);
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
4. Create a simple JavaScript game that allows the user to click on different elements on the page to score points with JavaScript to handle the game logic.
<!DOCTYPE html>
<html>
<head>
<title>Click Game</title>
<style>
/* Main styles */
body {
background-color: #eee;
text-align: center;
}
h1 {
margin-top: 50px;
font-size: 40px;
}
p {
font-size: 20px;
margin-top: 20px;
}
.score {
font-weight: bold;
color: green;
}
.item {
display: inline-block;
margin: 20px;
padding: 20px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: transform 0.3s ease;
}
.item:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<h1>Click Game</h1>
<p>Click on the items to score points:</p>
<p>Score: <span class="score">0</span></p>
<div id="game">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
// Get the game element and the score element
const game = document.getElementById("game");
const scoreEl = document.querySelector(".score");
// Initialize the score to 0
let score = 0;
// Add a click event listener to each item
game.addEventListener("click", (event) => {
// Check if the clicked element is an item
if (event.target.classList.contains("item")) {
// Increase the score by 1
score += 1;
scoreEl.textContent = score;
// Remove the item from the game
event.target.remove();
// Add a new item to the game
const newItem = document.createElement("div");
newItem.classList.add("item");
game.appendChild(newItem);
}
});
</script>
</body>
</html>
Output:
5. Create a responsive design for a web page that adjusts its layout and styles based on the size of the user’s screen. Use media queries to adjust the layout for different screen sizes.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Design Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Main styles */
body {
background-color: #eee;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
h1 {
font-size: 36px;
margin-top: 50px;
text-align: center;
}
p {
font-size: 20px;
margin: 20px 0;
}
/* Media queries */
@media only screen and (max-width: 768px) {
/* Adjust the layout for small screens */
h1 {
font-size: 24px;
}
p {
font-size: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* Adjust the layout for medium screens */
h1 {
font-size: 30px;
}
p {
font-size: 18px;
}
}
@media only screen and (min-width: 1024px) {
/* Adjust the layout for large screens */
h1 {
font-size: 36px;
}
p {
font-size: 20px;
}
}
</style>
</head>
<body>
<h1>Responsive Design Example</h1>
<p>This is an example of a web page with a responsive design. The layout and styles will adjust based on the size of the user's screen.</p>
<p>Try resizing your browser window to see the changes in action.</p>
</body>
</html>
Do comment if you have any doubts or suggestions n this exercise topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version