Introduction:

In this tutorial, we'll create a basic bike website using HTML, CSS, and JavaScript. This project is perfect for beginners who want to practice their coding skills and build a functional website.
HTML Structure:
First, let's create the HTML structure for our website. We'll start with a basic template and add sections for our bikes, about us, and contact form.
HTML<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bike Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- header, nav, and main sections -->
    <header>
        <h1>Bike World</h1>
        <nav>
            <ul>
                <li><a href="#our-bikes">Our Bikes</a></li>
                <li><a href="#about-us">About Us</a></li>
                <li><a href="#contact-us">Contact Us</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <!-- bikes section -->
        <section class="bikes" id="our-bikes">
            <h2>Our Bikes</h2>
            <div class="bike" id="bike-1">
                <h3>Mountain Bike</h3>
                <p>Price: $800</p>
                <button class="buy-btn">Buy Now</button>
            </div>
            <!-- add more bikes here -->
        </section>
        <!-- about us section -->
        <section class="about-us" id="about-us">
            <h2>About Us</h2>
            <p>We are a bike store with a passion for cycling.</p>
        </section>
        <!-- contact us section -->
        <section class="contact-us" id="contact-us">
            <h2>Contact Us</h2>
            <form>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name"><br><br>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email"><br><br>
                <label for="message">Message:</label>
                <textarea id="message" name="message"></textarea><br><br>
                <input type="submit" value="Send">
            </form>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>
CSS Styling:
Next, let's add some basic styling to our website using CSS.
CSS/* style.css */
body {
    font-family: Arial, sans-serif;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1em;
    text-align: center;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

nav li {
    margin-right: 20px;
}

nav a {
    color: #fff;
    text-decoration: none;
}

.bikes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.bike {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    margin: 1em;
    padding: 1em;
    width: calc(33.33% - 2em);
}

.buy-btn {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 0.5em 1em;
    cursor: pointer;
}

.buy-btn:hover {
    background-color: #555;
}

/* add more styles here */
JavaScript Functionality:
Finally, let's add some basic functionality to our website using JavaScript.
JavaScript// script.js
document.querySelectorAll('.buy-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        alert('Bike purchased!');
    });
});

document.querySelector('form').addEventListener('submit', (e) => {
    e.preventDefault();
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;
    alert(`Thank you, ${name}! We'll get back to you at ${email} about your message: ${message}`);
});

// add more functionality here
Conclusion:
That's it! You now have a basic bike website with HTML, CSS, and JavaScript. You can customize and enhance this project by adding more features, styles, and functionality. Some ideas include:
  • Adding more bike models and details
  • Implementing a shopping cart system
  • Creating a responsive design for mobile devices
  • Integrating social media links
  • Using a backend framework like Node.js or Ruby on Rails to manage data and user interactions
Remember, this is just a starting point, and the possibilities are endless! Keep practicing, and you'll become a proficient web developer in no time.
Get the code:
You can download the complete code for this project from [Here ]Feel free to use it as a reference or starting point for your own projects.
Share your thoughts:
If you have any questions, suggestions, or feedback, please leave a comment below. I'd love to hear from you!
Happy coding!