Spotify Clone using HTML, CSS & JavaScript | Sigma Web Development Course - Tutorial #84

Key Concepts

• Web Hosting: Hosting a website on a server, in this case, using Web Host Most.
• Free Hosting: Hosting services offered without cost, allowing users to deploy projects without initial investment.
• Subdomain: A domain that is part of a larger domain, e.g., spotify.webhostbox.net.
• HTML, CSS, JavaScript: Core web development technologies for structure, styling, and interactivity.
• Responsive Design: Designing websites to adapt to different screen sizes and devices.
• Utility Classes: CSS classes designed for single, reusable purposes, like flex, justify-center, align-items-center.
• SVG (Scalable Vector Graphics): An XML-based vector image format for web graphics.
• DOM (Document Object Model): A programming interface for HTML and XML documents.
• Fetch API: A modern interface for making HTTP requests in JavaScript.
• Asynchronous JavaScript: Techniques for handling operations that don't block the main thread, like fetching data.
• Event Listeners: Functions that respond to specific events, like clicks or hovers.
• Media Queries: CSS rules that apply styles based on device characteristics, like screen size.
• Flexbox: A CSS layout module for creating flexible and responsive layouts.
• JavaScript DOM Manipulation: Using JavaScript to modify the structure, style, and content of a web page.

Detailed Summary

1. Introduction and Project Overview

• The video demonstrates building a Spotify clone, spotify.com, and hosting it on Web Host Most, a hosting service that offers free hosting without requiring credit card information.
• The project aims to replicate the basic functionality and design of Spotify's web interface.

2. Setting Up Web Host Most

• Account Creation: The first step involves creating an account on Web Host Most.
• Service Selection: Navigate to the client area, then to "Services," and select "Order New Services."
• Choosing a Plan: Select the free 125 MB hosting plan, which is considered sufficient for the project.
• Subdomain Selection: Choose a free subdomain, such as spotify.webhostbox.net.
• Terms and Conditions: Accept the terms and conditions and proceed to checkout without needing to provide credit card details.
• Service Activation: After checkout, the free website is created, and the user waits for the server to be set up.

3. Initial HTML Structure

• Creating index.html: An index.html file is created with a basic HTML boilerplate template.
• Linking CSS: A style.css file is linked to the HTML to handle styling.
• Creating Two Main Divisions: The layout is divided into two main sections: .left and .right.
• Setting Widths: The .left section is set to 25vw (viewport width), and the .right section is set to 75vw.

4. Utility CSS Classes

• Creating Utility Classes: Utility classes are created for reusable styling:
  • .flex: Sets display: flex.
  • .justify-center: Sets justify-content: center.
  • .align-items-center: Sets align-items: center.
  • .border: Adds a temporary border for visualizing elements.
• Creating utility.css: A separate utility.css file is created to store these classes.
• Linking utility.css: The utility.css file is linked to the HTML.

5. Constructing the Left Section

• Creating Home and Library Sections: Inside the .left section, two divisions are created: .home and .library.
• Adding SVG Icons: SVG icons for "Home" and "Search" are added using <img> tags.
• Downloading SVG Icons: The video demonstrates how to copy SVG elements directly from the Spotify website using the browser's developer tools.
• Addressing SVG Display Issues: The video notes that when using SVG files, the xmlns attribute must be included for the SVG to render correctly.
• Styling the Left Section: CSS is used to style the .home and .library sections, including removing list styles from the unordered list (<ul>) and setting widths for the list items (<li>).
• Inverting SVG Colors: A CSS class .invert is created to invert the colors of the SVG icons, making them visible on a dark background.
• Adding Background Colors: CSS classes .bg-black and .bg-gray are created to set background colors.
• Adding Rounded Corners: A CSS class .rounded is created to add rounded corners to elements.
• Adding Margins: CSS classes .m1 and .m2 are created to add margins to elements.
• Adding Padding: CSS classes .p1 is created to add padding to elements.

6. Constructing the Right Section

• Adding Header and Navigation: A header section is added to the .right section, containing navigation buttons (left and right arrows) and sign-up/login buttons.
• Styling the Header: CSS is used to style the header, including setting the background color and spacing the elements.
• Adding Spotify Playlists Section: A section for displaying Spotify playlists is added, including a heading and a container for the playlist cards.
• Creating Playlist Cards: A basic HTML structure for playlist cards is created, including an image, title, and description.
• Styling Playlist Cards: CSS is used to style the playlist cards, including setting the width, background color, and border radius.
• Adding Hover Effects: CSS is used to add hover effects to the playlist cards, including changing the background color and displaying a play button.
• Adding a Footer: A footer section is added to the .right section, containing links to legal information and language settings.
• Using ChartGPT to remove all classes from HTML code: The video uses ChartGPT to remove all the classes from the HTML code and then style it again.

7. Implementing the Music Player

• Adding a Play Bar: A play bar is added to the bottom of the .right section, containing controls for playing, pausing, skipping, and seeking.
• Styling the Play Bar: CSS is used to style the play bar, including setting the background color and positioning the elements.
• Adding a Seek Bar: A seek bar is added to the play bar, allowing users to control the playback position.
• Styling the Seek Bar: CSS is used to style the seek bar, including setting the width, height, and background color.
• Adding a Volume Control: A volume control is added to the play bar, allowing users to adjust the volume.
• Styling the Volume Control: CSS is used to style the volume control, including setting the width, height, and background color.
• Adding JavaScript Functionality: JavaScript is used to implement the functionality of the music player, including playing, pausing, skipping, seeking, and adjusting the volume.
• Fetching Song Data: JavaScript is used to fetch song data from a server, including the song title, artist, and duration.
• Updating the UI: JavaScript is used to update the UI with the song data, including the song title, artist, duration, and playback position.
• Adding Event Listeners: JavaScript is used to add event listeners to the play bar controls, allowing users to interact with the music player.

8. Implementing Responsiveness

• Adding Media Queries: Media queries are added to the CSS to adjust the layout and styling of the website for different screen sizes.
• Adjusting Layout for Mobile Devices: The layout is adjusted for mobile devices, including hiding the left sidebar and displaying a hamburger menu.
• Adjusting Styling for Mobile Devices: The styling is adjusted for mobile devices, including setting the font size and spacing of the elements.

9. JavaScript Implementation

• Fetching Song List: The video uses JavaScript to fetch a list of songs from a directory on the server.
• DOM Parsing: The fetched HTML is parsed to extract the song file names.
• Dynamic List Generation: The extracted song names are used to dynamically generate a list of songs in the "Your Library" section.
• Audio Playback: JavaScript is used to handle audio playback, including creating a new Audio object and setting the src attribute to the song file path.
• Event Handling: Event listeners are added to the song list items to trigger audio playback when clicked.
• Time Update Event: An event listener is added to the audio element to track the current playback time and update the UI accordingly.
• Seek Bar Functionality: JavaScript is used to implement the seek bar functionality, allowing users to jump to different points in the song.
• Volume Control: JavaScript is used to implement the volume control functionality, allowing users to adjust the volume of the audio playback.
• Previous and Next Buttons: JavaScript is used to implement the previous and next button functionality, allowing users to skip to the previous or next song in the list.
• Mute Button: JavaScript is used to implement the mute button functionality, allowing users to mute the audio playback.

10. Deployment

• Uploading Files: The video demonstrates how to upload the website files to Web Host Most using the file manager.
• Setting Permissions: The video notes that it may be necessary to set permissions on the song files to allow them to be accessed by the website.
• Testing the Website: The video demonstrates how to test the website by visiting the URL in a web browser.

11. Conclusion

• The video concludes by summarizing the steps involved in building and deploying the Spotify clone.
• The video emphasizes the importance of responsive design and JavaScript functionality in creating a modern web application.
• The video encourages viewers to experiment with the code and add their own features.