Web development code challenge
Project – Build a web page for your favorite band. A fun challenge can be creating a webpage for your favorite musical artist. Start by using only static HTML, and if you want to challenge yourself, even more, add CSS and JavaScript. Then, for extra credit, build it in a front-end framework like React and make it an interactive experience.
That sounds like a fun project! Let’s break it down into steps to build a webpage for your favorite band. For simplicity, I’ll use The Beatles as an example, but you can apply these steps to any band you like.
Step 1: Basic HTML
First, let’s start with a simple static HTML page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Beatles</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>The Beatles</h1>
<nav>
<ul>
<li><a href="#bio">Bio</a></li>
<li><a href="#albums">Albums</a></li>
<li><a href="#tour">Tour</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="bio">
<h2>Biography</h2>
<p>The Beatles were an English rock band formed in Liverpool in 1960. The group consisted of John Lennon, Paul McCartney, George Harrison, and Ringo Starr.</p>
</section>
<section id="albums">
<h2>Albums</h2>
<ul>
<li>Abbey Road (1969)</li>
<li>Sgt. Pepper's Lonely Hearts Club Band (1967)</li>
<li>Revolver (1966)</li>
</ul>
</section>
<section id="tour">
<h2>Tour Dates</h2>
<p>Unfortunately, The Beatles are no longer touring.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Email: [email protected]</p>
</section>
<footer>
<p>© 2024 The Beatles Fan Club</p>
</footer>
<script src="scripts.js"></script>
</body>
</html>Step 2: Add CSS
Create a styles.css file to style your webpage.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}
header h1 {
margin: 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
section {
padding: 20px;
margin: 0 auto;
max-width: 800px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: absolute;
bottom: 0;
width: 100%;
}Step 3: Add JavaScript
Create a scripts.js file. Let’s add a simple JavaScript to enhance the interactivity, like smooth scrolling.
document.querySelectorAll('a').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});Step 4: Build with React (Optional)
To make the page interactive using React, follow these steps:
- Create a React App:
npx create-react-app beatles-fan-page cd beatles-fan-page
- Update
src/App.js:
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<header>
<h1>The Beatles</h1>
<nav>
<ul>
<li><a href="#bio">Bio</a></li>
<li><a href="#albums">Albums</a></li>
<li><a href="#tour">Tour</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="bio">
<h2>Biography</h2>
<p>The Beatles were an English rock band formed in Liverpool in 1960. The group consisted of John Lennon, Paul McCartney, George Harrison, and Ringo Starr.</p>
</section>
<section id="albums">
<h2>Albums</h2>
<ul>
<li>Abbey Road (1969)</li>
<li>Sgt. Pepper's Lonely Hearts Club Band (1967)</li>
<li>Revolver (1966)</li>
</ul>
</section>
<section id="tour">
<h2>Tour Dates</h2>
<p>Unfortunately, The Beatles are no longer touring.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Email: [email protected]</p>
</section>
<footer>
<p>© 2024 The Beatles Fan Club</p>
</footer>
</div>
);
}
export default App;
- Add CSS in
src/App.css: You can use the same CSS rules as in the static HTML version or customize them as needed. - Run Your React App:
npm start
This will start your React app, and you can view it in your browser. You now have an interactive page for your favorite band!
Feel free to adjust the content and style as you see fit. Have fun with your project!
