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

➡️ English Subtitles are now up for all the videos!

TimeStamps:
00:00:00 - Introduction
00:00:32 - Demo
00:01:29 - Free Hosting
00:04:45 - Planning
00:07:45 - Setting up Layout
00:09:41 - Creating Utility Classes
00:11:03 - Making the Sidebar and Header
00:49:32 - Making the Playlists
01:23:52 - Let's Write some JavaScript
02:58:09 - Responsiveness
03:31:45 - Previous & Next Button
03:45:13 - Volume Button
03:59:51 - More Responsiveness Fixes
04:02:01 - Dynamic Albums
05:01:15 - Hosting this app for FREE!
05:09:57 - More Improvement for Mobile Devices
05:34:44 - Conclusion

python, C, C++, Java, JavaScript and Other Cheatsheets [++]:

►Learn in One Video[++]:

►Complete course [playlist]:

Follow Me On Social Media
Comment "#HarryBhai" if you read this 😉😉

[CodeWithHarry]

We'll raise the bar like anything 😉😉

[devtomar]

Jahan aaj sab shiksha ke nam par loot rahe hai vahan yeh banda sabko coding free me aur best quality me sikhata hai.
This is a great man in current coding time.
Is bande ko Salute hai bhai. 🎉🎉❤❤

[Suresh-iutx]

Just want to say please don't discontinue this course.. No matter what please finish it.. There are lotta people like me who are benefitting from it.. Thank you harry bhai

[misterkhan]

What makes Code With Harry channel, standout all other coding/programming channel, is Harry bhai's consistency and dedcation to deliver the knowledge to us 🙏🙏🙏

[codingwithalizai]

Only regular viewers knew that harry has already made a spotify clone before that . But this looks cooler that that one

[Uzaifm]

This sigma web development course is job ready, this project proved that, and this is just starting of amazing projects.

[TechnoTrailblazers]

Oh my god, this man built something different, he put everything in this course from a beginner level to a very advanced level.
Hats off to you Harish sir !!
I will give this course 5/5 ⭐
#sigmabatchop
#india'sbestfullstackcourse
#harrybhaiop

[ayushprogrammer]

Who has completed this whole project together by typing each line of code on there own.🎉 Love the course❤

[codedxkt]

00:00 Creating a Spotify clone using free web hosting service
04:46 Creating a Spotify clone using HTML, CSS & JavaScript.
09:49 Creating utility classes for flexible layout and styling
11:41 Creating and using SVG in the Spotify clone
15:28 Adjusting website elements using CSS in the Spotify Clone
17:06 Setting margins using CSS properties.
20:39 Styling the background and container
22:29 Adjusting margin and padding for a better appearance
26:38 Using custom fonts in Spotify clone
29:30 Creating and customizing playlists and images using HTML and SVG
33:25 Adjust font size, alignment, and layout for a unique Spotify clone design
35:11 Styling using AI Babu and making adjustments in the code
38:46 Adjusting height and styling the page
40:57 Copying and adjusting SVG icons using HTML, CSS & JavaScript.
44:34 Adjusting background color and margins in the Spotify Clone using HTML, CSS & JavaScript
46:19 Understanding CSS specificity and applying styles
50:42 Designing a card with image, circle, h2, and paragraph
52:36 Setting the width and overflow in CSS
56:04 Styling the Spotify card using HTML and CSS
57:58 Styling elements and designing a play button
1:01:59 Copying and applying inline styles using classes
1:03:44 Styling the play button using CSS
1:07:14 Manipulating the top value and opacity for visual effects
1:08:55 Styling the footer and starting work on front end JavaScript.
1:12:25 Customizing scroll bar using CSS
1:14:20 Adjusting the max height of card container
1:18:24 Setting font size and styling for login and sign up buttons.
1:20:37 Adjusting styles on hover using CSS
1:24:24 Setting the title and creating a play bar using HTML, CSS, and JavaScript.
1:26:13 Customizing the design and layout of the Spotify clone website.
1:30:02 Styling the buttons and centering them
1:31:54 Using fetch API to retrieve songs and parse the response
1:36:35 Creating a client-side project to bring songs from the server using API.
1:38:28 The first song needs user interaction to play in the browser.
1:42:29 Implementing song cards and play button functionality
1:44:19 Creating a song list using HTML and CSS
1:48:55 Explaining the use of split and replace in JavaScript
1:50:47 Creating a Spotify clone interface using HTML, CSS, and JavaScript.
1:54:41 Styling the play button with font size and alignment
1:56:42 Creating a Spotify Clone with HTML, CSS & JavaScript
2:00:44 Adjusting font size and layout for song list
2:02:45 Adjusting margins and positions for song list display.
2:06:33 Adjusting width and positioning elements
2:08:28 Customizing the Spotify web player interface.
2:11:44 Creating the seek bar with customizable properties
2:13:30 Adjusting the height and position of the play bar
2:17:30 Customizing the design of the play bar
2:19:10 Styling input type range using transition property
2:23:02 Accessing and manipulating DOM elements using JavaScript
2:25:16 Creating a function to play music
2:29:22 Adding functionality to song buttons and play/pause logic
2:31:26 Implementing play and pause functionality for current song
2:35:36 Styling and arranging song info and time using flexbox
2:37:45 Implementing song info and time display
2:42:05 Implementing song play functionality
2:44:26 Implementing seek bar functionality using JavaScript.
2:48:34 Understanding the use of offset x and offset y in the Spotify Clone application
2:50:24 Demonstrating dynamic width adjustment and percentage calculation
2:54:22 Creating a Spotify clone with HTML, CSS, and JavaScript.
2:56:31 Using transform and media queries for responsive design
3:00:29 Adjusting the width of the play bar and adding a hamburger icon
3:02:32 Adding hamburger menu and SVG to the header
3:06:33 Using display flex and justified content for layout
3:09:00 Customizing background and icons for Spotify clone UI.
3:13:22 Handling click events and adjusting styles for the close button.
3:15:11 Adjusting the width and overflow settings for Spotify playlist
3:18:59 Customizing the seek bar and play bar
3:20:53 Adjusting width and margin of elements
3:24:46 Adjusting button sizes and display settings for better user experience
3:27:01 Customizing the flex direction and adjusting bar widths
3:31:31 Implementing event listeners for previous and next buttons.
3:33:25 Creating global variable for current song and searching for specific song in the list.
3:37:41 Adjusting the width of song info to 250 pixels
3:39:41 Identifying and addressing undefined error

[abhisheksingh_]

Unbelievable content ❤ harry bhai 5/5 🌟 star no anyone can give this level of knowledge in paid or free 😂 Courses 🙏🙏

[anandprakashverma]

Harry sir one request 🙏🙏🙏 -
Please don't even think to discontinue this series. This series is wonderful and many student's web dev is dependent on you only.
We love you harry bhai ❤❤❤

[bharathbolloju]

nearly it took 7 days to complete this, you're another level harry bhai... your student from Hyderabad

[shahzaibkhan]

Harry sir your tutorials are beacon of light for every student who is learning programming. Love you from Pakistan ❤

[pratikgabani]

This man is really born to make history 😱😱

[darshjogi]

Harry bhai a big salute,
Aapne jobhi Bola tha sab kuch karke dikhaya Harry bhai,
You are a hero ❤💯💯

[chaitanyaandhare]

Harry Bhai apki coding skillset boht amazing hai 👍👍

[cricmawa_]

5hrs video 🔥 Harry bhai your dedication 🫡
Most importantly Quality in your content is top notch❤️‍🔥

[bushrakhan]

1:22:43 Instead of padding and margin to the login button we can give width an height so that problem ll solve

[AbhishekGArts]

@CodewithHarry you could have searched for multiply to get the close your course....great wprk Harry bhai

[ChoraAtrangi]

The content quality jump is next level 🔥