Related: mouse eventsBest match
Button Ripple Effect
Connect mouse movement to visible interface changes.
Build a button ripple effectDouble Landing Page
Build a double landing page with HTML, CSS, and JavaScript while practicing mouse events and DOM selection.
Beginner20–30 minutesHTML5CSS3JavaScript
You'll practice
Mouse EventsDOM SelectionCSS Class Toggling
01 — What you'll build
Double Landing Page
This project shows you how HTML, CSS, and JavaScript work together in a double landing page. You’ll connect user interactions to visible changes on the page, then practice mouse events, DOM selection, and CSS class toggling as you build the complete project from scratch.
02 — Included
- Click-based interactions
- Double Landing Page interface
- Responsive HTML and CSS layout
- Complete source code and live demo
03 — You'll practice
- Track mouse events
- Select HTML elements from the DOM
- Change styles by updating CSS classes
- Perform calculations with JavaScript
Recommended knowledge: Basic HTML and CSS, JavaScript variables and number operations, DOM selection and mouse events, CSS classes and DOM selection.
Complete project files
Build It from the Source Code
This project runs directly in the browser with HTML, CSS, and JavaScript.
- 1Create three files
- 2Copy the code
- 3Run
index.html
Before you run it
- Keep an internet connection available for external assets.
Project structure
double-landing-page/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Double Landing Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="split left">
<h1>Apple</h1>
<button class="btn">Buy Now</button>
</div>
<div class="split right">
<h1>Samsung</h1>
<button class="btn">Buy Now</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice mouse events, javaScript calculations, and DOM Selection with these related projects.
