The ‘Make a Spotify Clone from Scratch: JavaScript PHP and MySQL Course’ is an upskilling program that teaches students how to create a music streaming website similar to Spotify. The course covers everything that Spotify offers such as user registration, real-time search for artists & songs, creating and editing playlists, and basic controls like play, pause, skip, shuffle and repeat.
The course is suitable for anyone. It teaches several in-demand skills including HTML, CSS, PHP, JavaScript, JQuery, and MySQL. This course is an excellent resource for anyone looking to stand out as a software developer or software engineer. The course is usually available for INR 2,299 on Udemy but students can click on the link and get the ‘Make a Spotify Clone from Scratch: JavaScript PHP and MySQL Course’ for INR 449.
Who all can opt for this course?
- Web developers or software engineers who aspire to work for a company like Google, Facebook, or Microsoft.
- Those who wish to learn HTML, JavaScript, PHP, and MySQL.
Course Highlights
| Key Highlights | Details |
|---|---|
| Registration Link | Apply Now! |
| Price | INR 449 ( |
| Duration | 15 hours |
| Rating | 4.5/5 |
| Student Enrollment | 10,173 students |
| Instructor | Reece Kenney https://www.linkedin.com/in/reecekenney |
| Topics Covered | Handling user data, styling registration page, navigation menu, tables, music player, search bar, etc. |
| Course Level | Beginner |
| Total Student Reviews | 1,809 |
Learning Outcomes
- Create your own music streaming platform similar to Spotify.
- Master JavaScript, PHP, HTML, and MySQL.
- Learn vital skills that are crucial for any aspiring software engineer.
Course Content
| S.No. | Module (Duration) | Topics |
|---|---|---|
| 1. | Setting up the sign up/ log in forms (22 minutes) | Setting up your local server |
| Creating the login form | ||
| Creating the register form | ||
| 2. | Handling the user’s submitted data (01 hour 13 minutes) | Intro to PHP – Handling form submission |
| Form sanitation – Cleaning the input | ||
| Separating our code | ||
| Preparing our validation functions | ||
| Creating the Account class | ||
| Validating the username | ||
| Validating the name and emails | ||
| Validating the passwords | ||
| Checking if the sign up was successful | ||
| Outputting error messages | ||
| Creating our Constants class | ||
| Remembering form values | ||
| 3. | Completing the sign up / log in process (43 minutes) | Creating the users table |
| Connecting to our database from PHP | ||
| Inserting user details | ||
| Testing out the sign up process! | ||
| Query not working? Watch this video | ||
| Last remaining validation checks | ||
| Login handler | ||
| Sessions | ||
| 4. | Styling the registration page (01 hour 10 minutes) | Adding a background image |
| Styling the login container | ||
| Styling our text boxes | ||
| Input placeholder color | ||
| Styling the submit buttons | ||
| Buttons to switch between forms | ||
| Showing and hiding the forms on press | ||
| Showing only the relevant form when data is submitted | ||
| Show/hide button – mouse pointer | ||
| Right section content | ||
| Applying style to the right section content | ||
| 56,800+ icons FOR FREE – Icons8 | ||
| Styling the error messages | ||
| Remembering the username after failed log in attempt | ||
| 5. | Creating the now playing bar (59 minutes) | Quick overview of the index page |
| Now playing bar container | ||
| Creating the now playing bar element | ||
| Left, center and middle sections of the bar | ||
| All the icons for our site | ||
| Adding our player buttons | ||
| Making the play and pause buttons larger | ||
| Progress bar parent elements | ||
| The progress bar | ||
| Album artwork | ||
| Track info labels | ||
| Volume bar | ||
| 6. | Navigation menu (25 minutes) | Page containers |
| Creating our navigation bar container | ||
| Navigation bar site logo | ||
| Navigation items | ||
| Navigation search icon | ||
| Navigation links color change on hover | ||
| 7. | Tables and data (22 minutes) | Overview of our MySQL table structure |
| Creating our database tables | ||
| Inserting data into the artists, genres and albums tables | ||
| Inserting data into the songs table + FREE music files | ||
| Shortcut to inserting data into the songs table | ||
| 8. | ‘Music you might like’ page (37 minutes) | Organisational trick |
| Main view containers | ||
| Header and footer files | ||
| Getting albums from the database | ||
| Outputting the album artwork images | ||
| Styling the album artwork images | ||
| Styling the album title | ||
| Making the albums clickable links | ||
| 9. | Album page (01 hour 17 minutes) | Getting album id from url |
| Getting the artist of the album | ||
| Creating the Artist class | ||
| Creating the Album class | ||
| Album header section | ||
| Styling the header section | ||
| Displaying the number of songs in the album | ||
| Creating the Song class | ||
| Getting the songs on an album | ||
| Outputting the track count | ||
| Outputting the track name and artist name | ||
| Outputting the track duration | ||
| Styling the track list rows | ||
| Styling the track count | ||
| Track style finishing touches | ||
| 10. | The music player (02 hours 42 minutes) | Introduction to HTML5 Audio |
| Creating our initial playlist of 10 random songs | ||
| Including JQuery | ||
| Set track function setup | ||
| Set track function | ||
| Playing and pausing the song via buttons | ||
| Introduction to Ajax calls | ||
| Getting a song via ajax | ||
| Getting the artist via ajax | ||
| Getting the album via Ajax | ||
| Updating the plays count when a song is played | ||
| Displaying the time remaining label | ||
| Formatting the time remaining | ||
| Updating the progress bar as the song plays | ||
| Dragging the progress bar on click | ||
| Controlling the volume | ||
| Updating the volume progress bar | ||
| Preventing controls from highlighting on mouse drag | ||
| Skipping to the next song | ||
| Song repeat mode | ||
| Repeat button | ||
| Playing the next song when current song ends | ||
| Previous song button | ||
| Mute button | ||
| Shuffle button | ||
| Shuffle – Part 1 | ||
| Shuffle – Part 2 | ||
| Playing songs by clicking on the song’s play button | ||
| Fixing the song’s play button bug | ||
| 11. | Seamless page transitions (33 minutes) | UserLoggedIn JavaScript variable |
| Changing pages dynamically | ||
| Knowing if a page was loaded from ajax or not | ||
| Replacing all links with our dynamic links | ||
| Small play button bug | ||
| Changing the URL when we load a new page | ||
| Browse page | ||
| 12. | Artist page (28 minutes) | Artist info section |
| Styling the artist info section | ||
| Songs section | ||
| Albums section | ||
| Artist page play button | ||
| Now playing bar links | ||
| 13. | Search page (45 minutes) | Creating our search input section |
| Styling the search input | ||
| Searching when the user stops typing | ||
| Searching for songs | ||
| Searching for artists | ||
| Styling the artists search results section | ||
| Fixing the artist name bug | ||
| Searching for albums | ||
| Invalidating the search timer | ||
| 14. | Your music page (playlists) (44 minutes) | Creating our playlist MySql tables |
| Creating the playlist page | ||
| The createPlaylist function | ||
| Create playlist file | ||
| Creating the User class | ||
| Outputting the user’s playlists | ||
| Creating the Playlist class | ||
| Playlist links | ||
| Styling the playlists | ||
| 15. | The playlist page (21 minutes) | Creating the header section of the page |
| Displaying the playlist’s songs | ||
| Delete playlist function | ||
| Delete playlist ajax | ||
| 16. | Song options menu (01 hour 08 minutes) | Creating the options menu |
| Showing the options menu | ||
| Hiding the options menu | ||
| Add to playlist dropdown menu | ||
| Populating the dropdown with playlists | ||
| Styling the dropdown menu | ||
| When the dropdown menu is changed | ||
| Saving songs to a playlist | ||
| Bug fix: Adding to an empty playlist | ||
| Copying options menu to other pages | ||
| Remove song from playlist function | ||
| Removing song ajax code | ||
| 17. | Settings page (01 hour 01 minutes) | Settings page setup |
| Logout button | ||
| Settings link on the navigation menu | ||
| User details forms | ||
| Styling the user details forms | ||
| Update email function | ||
| Update email ajax code | ||
| Update password function | ||
| Update password ajax code | ||
| You made it! Congratulations! |
Resources Required
No prior knowledge is required. If students are aware of basic HTML that would be beneficial, but it is not a pre-requisite.
Featured Review
Ahmad Sheraz (5/5): I loved the course and it was an amazing journey. Instructor cooperation was more than I could ask for. As a beginner in programming, I can say without any doubt that this course is absolutely necessary for anyone who wants to learn programming not just web development. With due respect, I do have a suggestion that this course can become an ultimate source for learning programming if it also had exercises. For that to work out, udemy must have some way to increase progress by doing exercises in some courses so that learners actually get inclined to do it there, so I don’t blame the instructor entirely for that. I also have a request for the instructor, please provide sources where you think we can learn the best and go deeper in the knowledge. That would be an added bonus. Last, there is some advice for people who want to buy this course, don’t buy this course if you are a complete beginner. Even though the instructor explained everything in complete detail without wasting time. It’s way better if you have some background knowledge about programming. If you are going to buy it and you have experience then rest assured this course is the absolutely necessary step you took toward your programming journey.
Pros
- Keith K (5/5): One of my best takeaways from this was the de-romanticising of coding.
- Nanette Julius (5/5): You have literally been the best instructor I have come across on Udemy.
- Tyler Billings (5/5): Reece’s instructional methods and teaching styles are perfect for those learning the concepts of JavaScript, PHP, and MySQL.
- Chris (5/5): I wouldn’t say its for beginners but It has been excellent and the fact he answers questions still made me decide to go from 4.5 to 5 stars.
Cons
- Jori E. (3.5/5): I definitely did enjoy this course but I only had a couple of problems with it. The course says that no prior knowledge is needed other than HTML but that is not true. You need to know at least the syntax of PHP before doing this course or you will be confused at the beginning until you’ve done enough. The instructor doesn’t really take the time to explain the syntax of the languages but more just goes straight into it. Another thing, is that I felt best practices were not used in this course. It felt as if the code was all over the place but that could just be PHP (I’m fairly new to PHP so this just may the case of the language). If you are an absolute beginner, I would not recommend the course but if you are a beginner looking for more PHP practice then I would definitely recommend this course. All in all though, good job to the instructor cause I definitely did learn a lot from this course!
- Michael B. (3.5/5): Overall, it’s a decent course. I was dissapointed because mp3 formats allow you to house album metadata and is accessible through javascript. It kinda makes the whole thing needlessly complicated. I did love the fact that he goes into MySQL database creation and manipulation, then accessing it through HTML/js.
About the Author
The instructor of this course is Reece Kenney who is a software engineer at Microsoft. With a 4.7 instructor rating and 8,802 reviews on Udemy, he offers 9 courses and has taught 32,118 students so far.
- Reece Kenney is from Rugby, England.
- He works as a software engineer for Microsoft, working on a range of front-end and back-end programming projects using languages such as JavaScript, TypeScript, and C#, etc.
- He has a lot of expertise in creating products that are used every day by millions of people thanks to his job at Microsoft.
- He has also collaborated with some of the world’s top-notch software engineers for a couple of projects.
Comparison Table
| Parameters | Make a Spotify Clone from Scratch: JavaScript PHP and MySQL | Build a Social Network from Scratch: JavaScript PHP + MySQL | Make a Responsive Portfolio Website: JavaScript and HTML |
|---|---|---|---|
| Offers | INR 449 ( | INR 449 ( | INR 449 ( |
| Duration | 15 hours | 17 hours | 4 hours |
| Rating | 4.5/5 | 4.7/5 | 4.4/5 |
| Student Enrollments | 10,172 | 13,513 | 4,054 |
| Instructors | Reece Kenney | Reece Kenney | Reece Kenney |
| Register Here | Apply Now! | Apply Now! | Apply Now! |
Leave feedback about this