Welcome to Van Halen '83, a virtual journey back to 1983 where the legendary rock band Van Halen reigns supreme. Step into the world of roaring guitar solos, electrifying stage performances, and timeless hits that continue to resonate with fans today.
Imagine a time when the internet, as we know it today, existed alongside the thrilling energy of Van Halen's heyday. The website takes you on a nostalgic ride, blending the magic of the band with the possibilities of the digital era.
This website transports you back to the thrilling era of Van Halen in 1983, specifically late 1983 when the band is hot off the tails from their number 1 single 'Jump' and is about to release their much-anticipated album '1984' in the new year.
Thanks for checking this out! This is my love letter to the raddest band to ever exist!
The live website can be found here
This project was created solely for educational purposes to showcase my design and web development skills and as a tribute to the band. All content included on this website is attributed to its respective owners, and no infringement of copyright is intended. This project is not for commercial purposes and is not affiliated with Van Halen.
- Purpose of Project
- User Stories
- Web Design
- Wire frames
The aim is to reimagine what it would be like if today's internet existed during 1983. In addition to providing information about the band, their music, and their iconic world tour of 1984, there's a fictional merch section, a ticket-buying experience for the tour, and even a platform to send fan mail and pre-order their upcoming album, '1984'. While these features are not functional in reality, they simulate the experience of engaging with Van Halen's world as if you were a passionate fan in 1983. Through these interactive elements, the aim is to capture the nostalgia and excitement surrounding Van Halen at the height of their fame and provide a portal to that era.
- As a user, I want to know about the band and their history. I expect to find information about the band's formation and significant milestones in their career. Additionally, I would like to learn about the individual band members and their contributions to Van Halen's success.
- As a user, I want to explore Van Halen's music and discography. I expect to find a well-organised and easily accessible discography section that lists their albums, along with album cover art and track listings. It would be great to have the ability to listen to song previews or access full tracks through embedded Spotify playlists, allowing me to immerse myself in Van Halen's iconic sound.
- As a user, I want to connect with Van Halen's online presence. I look forward to finding links to their official social media profiles, such as Facebook and Instagram. This would enable me to stay up-to-date with the band's latest news, announcements, and engage with other fans in the community.
- As a user, I want to dive deeper into Van Halen's visual content. I expect to find a collection of music videos, pictures of the band, and interviews. These multimedia elements will provide me with a visual and auditory experience, allowing me to further appreciate Van Halen's artistry and stage presence.
- As a user, I want to feel immersed in the Van Halen experience of the late 1983 era. I expect the website's design, colour scheme, and layout to reflect the aesthetic and vibe of that time period, transporting me back to the excitement and energy of Van Halen's heyday.
- As a user, I want to explore the tour section that will list their ‘upcoming’ tour in 1984. I expect to find information about the tour dates, venues, and ticket purchasing options. Although the tour is fictional, it would be engaging to experience the anticipation and excitement surrounding a major concert tour.
- As a user, I want to immerse myself in the fictional merch section and browse through the available merchandise inspired by Van Halen's iconic branding. It would be great to have an option to "purchase" these fictional items for added engagement.
- As a user, I want to feel connected to Van Halen by utilizing the fictional contact section. I expect to find a fan mail form where I can express my admiration for the band, a ticket purchase form to simulate buying tickets for their upcoming tour, and a pre-order form for their anticipated 1984 album. Although these forms are fictional, they can provide a fun and interactive way to engage with the band's imagined activities.
The website features a design that is inspired by the aesthetic of the 1980s and a color scheme that is reminiscent of the band's aesthetic.
Lato is the only font used throughout the website. I found this font from drawing inspiration from the font used in the first two album covers for the bands name.
The site's design and element placement have been illustrated using Balsamiq wireframes, providing a visual representation of the site's appearance.
| Homepage: | |
|---|---|
 |
| Newspage: | |
|---|---|
 |
| Tourpage: | |
|---|---|
 |
| Musicpage: | |
|---|---|
 |
| Mediapage: | |
|---|---|
 |
| Aboutpage: | |
|---|---|
 |
| Merchpage: | |
|---|---|
 |
| Contactpage: | |
|---|---|
 |
-
Animated Nav Bar, with dropdown
-
Youtube embedded videos
-
Spotify embedded albums
-
Booking form
-
Image Slide Shows
-
Social Media links which opens in new tab
Website Walkthrough - Upon visiting the website, users are greeted with the band's logo and a Youtube video of their new single "Jump", which would have been released at the time. From there, users can navigate to different sections of the website using the menu at the top of the page. The Tour section displays information about the band's 'upcoming world tour' starting in 1984, including the dates and locations of the concerts. The Media section includes photos and videos of the band, showcasing their performance and style. The Music section displays the album covers and includes embedded Spotify playlists, allowing users to listen to the band's music as they browse the website. The Merch section features fictional items for users to buy, such as t-shirts, posters, and hats, all designed with the iconic Van Halen logo. The News section announces the 'upcoming' release of their 1984 album, keeping users up-to-date with the latest news about the band. Finally, the Contact section provides three fictional forms, one for fan mail, one to purchase tickets for the upcoming tour, and the last one to pre-order the album.
- HTML5 (was used for structuring and presenting content of the website)
- CSS (used for the styling of the content)
- Google Fonts (used for all the font styling within the project, fonts used were Cinzel, and Cinzel decorative with serif used for a backup)
- Bootstrap (used for the responsive code in the header for multiple devices)
- wikimedia
- flaticon
- Chrome (used to debug and test the source code using HTML5 and to test site responsiveness)
- GitHub (used to create the repository and store the projects code after pushed from Git)
- Gitpod (used for the editing of code within the project for the site)
- vscode
- W3C Markup (used for validating the html5 code)
- Jigsaw Validator (used for validating the CSS code)
- Squoosh (Used for image decompression)
- Adobe Photoshop(Used to enhance album cover images)
- Am I Responsive?(Used for responsiveness testing)
I used Lighthouse in Chrome DevTools to analyze the performance, accessibility, and adherence to SEO and Best Practices.
| Homepage: | |
|---|---|
 |
 |
| Newspage: | |
|---|---|
 |
 |
| Tourpage: | |
|---|---|
 |
 |
| Musicpage: | |
|---|---|
 |
 |
| Mediapage: | |
|---|---|
 |
 |
| Aboutpage: | |
|---|---|
 |
 |
| Merchpage: | |
|---|---|
 |
 |
| Contactpage: | |
|---|---|
 |
 |
There are some minor format issues with the html code that are brought up in the validator. Will resolve as soon as possible.
No errors were found.
Functionality Testing:
- All navlinks and footer links wre tested and work on all pages.
- The arrow button and YouTube player weere tested and work on the homepage.
- The pre-order link was tested and works in the news section.
- The buy tickets button was tested and works in the tour section.
- The purchase vinyl links and Spotify playlists were tested and work in the music section.
- The photo/videos carousels were tested and function properly in the media section.
- The buy buttons were tested and work in the merch section.
- The forms were tested and function properly and submit to the desired places.
Usability Testing:
- The website's navigation and menu structure are intuitive and easy to understand.
- The readability and legibility of the website's is mostly there, but can be improved upon at a later date.
- The website is mostly consistent in terms of design elements, layout, and color scheme throughout the different pages but can be improved upon.
Responsiveness Testing: The website was tested in Chrome DevTools for Bootstrap breakpoints and also with amiresponsive.com. For the most part, it looks great on any screen size or device, but there is still room for improvement, particularly with image sizing on ipad size viewports.
I deployed the website initially using Gitpod and later continued development using Visual Studio Code (VSCode). Here are the steps I followed:
With Gitpod:
-
Created a new repository on GitHub by logging into my GitHub account and selecting "New" repository.
-
Named the repository "vanhalen_milestone_project" and added a brief description.
-
Selected the desired options for repository visibility (public or private) and created the repository.
-
Once the repository was created, I navigated to the repository page on GitHub.
-
Clicked on the "Gitpod" button on the GitHub repository page.
-
This action automatically launched the Gitpod IDE, providing me with an online development environment preconfigured with the repository.
-
Developed and tested the website within the Gitpod workspace, using the Gitpod IDE features and tools.
-
Previewed the website by launching a local server within Gitpod.
-
Accessed the live preview of the website in the browser within the Gitpod workspace.
-
The site was fully deployed and accessible for testing and demonstration purposes within Gitpod.
With VScode:
-
Cloned the Git repository to a local directory using the following command: git clone
https://github.com/myusername/vanhalen_milestone_project.git -
Opened the project folder in Visual Studio Code (VSCode) by selecting "Open Folder" from the File menu and choosing the appropriate directory.
-
Made any necessary changes and committed them to the Git repository using the following commands:
Add changes:
git add .
Commit changes:
git commit -m "Added x feature to...".
Pushed the changes to the GitHub repository:
git push origin main -
Opened any of the HTML files (e.g., index.html, tour.html, media.html, etc.) in a web browser of my choice directly from the local project directory.
Fork and Clone Repository:
-
Visit the GitHub repository and click on the "Fork" button in the top-right corner. This will create a copy of the repository under your GitHub account.
-
On your forked repository's page, click on the "Code" button and copy the repository's URL.
-
Open your preferred Command Line Interface (e.g., Terminal, Git Bash) and navigate to the directory where you want to clone the repository.
-
Enter the following command in the command line:
git clone [repository URL] -
Navigate into the Repository: Use the cd command to navigate into the cloned repository:
cd [repository name]
(Replace [repository URL] with the actual URL of your forked repository and [repository name] with the name of the cloned repository on your local machine.)
- CMetalCore via Wikimedia Commons (For band logo in navbar)
- 1000 Logos (For main logo on homepage - click on 'DOWNLOAD PNG' to access all band's logos, including the one I used)
- Carl Lender via Wikimedia Commons (For Eddie Van Halen image)
- Van Halen's official Youtube channel (For music videos)
- Wikipedia
- spotify (For embedded Spotify album/playlists in Music section)
- getty (For Photo Gallery in Media section, Van Halen and David Lee Roth images in the About section all getty images are credited in the footers of the images themselves)
- Brett Jordan (Used for Van Halen's 1984 album cover art in News, Music and Contact sections)
- The Mighty Van Halen (Used for 1984 tour poster in Tour and Contact sections)
- All first 5 album cover images were taken from wikipedia and enhanced with photoshop
- All images have been credited in html code as well