Make a Spotify Clone from Scratch: JavaScript PHP and MySQL
Do you want to become an expert in JavaScript, PHP and MySQL? Do you want to build a real music streaming site just like Spotify? If so, you’re in the right place! This course will guide you step by step in creating your own Spotify clone COMPLETELY from scratch. We’re talking the kind of website that will amaze anybody that sees it. The kind of website that will get you hired in no time!
More
Why let me teach you?
I work as a Software Engineer at Microsoft where I build products used by millions of people all over the world! I want to take the skills I’ve gained through years of working with some of the best developers in the world and transfer them directly to you!
I’ve taught thousands of students here on Udemy and created some of the most popular development courses on Udemy!
Okay so what’s the course about?
I will personally guide you, step by step, in creating your own music streaming site just like Spotify complete with:
User registration
Search for all their favorite artists, albums and songs in real time!
Create and customize their own playlists
Control the music with all the usual controls such as play, pause, skip, previous, shuffle, repeat etc.
And much, much more!
Whether you are a complete beginner* or an experienced programmer, this course will be massively beneficial to you.
Why should I take the course?
In the programming world, the “big 4” often consists of Google, Microsoft, Facebook and Amazon. To get a job at any of these companies, you absolutely MUST know the essentials: HTML, CSS, PHP, JQuery, JavaScript and MySQL.
If you take this course, you will have nothing to worry about because we use all of these skills extensively!
Skills:
There is so much to learn! In the course, you will become very familiar an excellent range of technical skills such as HTML, CSS, PHP, JavaScript, JQuery and MySQL. Any good developer will agree that these skills are KEY to becoming an excellent developer/software engineer. If you're just starting out, after completing this course, you will be in a very good position with a fundamental foundation of skills.
Support:
By enrolling in this course, you will have the COMPLETE support of a Microsoft Software Engineer (me). I'm always ready to answer any question you may have. Programming issues, errors, feature requests, general programming advice - it doesn't matter, I'm always happy to help! I always aim to respond to questions within a few hours and it's also worth noting that I've answered EVERY SINGLE question asked so far on all of my courses.
Future course discounts:
By enrolling in this course, you will get access to ALL of my current and future courses for the lowest possible discount we as instructors are capable of offering on Udemy - FOREVER.
Project portfolio:
The site you create in this course will be the highlight of your project portfolio! Any potential employer who see's this project on your resume will want to hear all about it. The reason? They know that a project like this means you're familiar with the wide range of technical skills they need their employees to know.
Fun!
Finally, this project is a lot of fun and I know you'll have a great time implementing your own unique ideas as well as the ones we implement together. What are you waiting for?
*You don't need any experience to take this course, however a basic understanding of HTML would be great. I will explain everything as I go, but some things I spent more time on than others. I don't spent a huge amount of time on the absolute lowest level basics e.g. what is HTML. So if you have absolutely no experience programming, you are absolutely fine to take this course, just ask me to explain things further if you would like a more detailed explanation :)
Requirements:
No prior knowledge needed! A basic understanding of HTML is helpful - but not essential
A computer
- Any aspiring software engineers or web developers dreaming of working at a company like Google, Facebook or Microsoft
- Anyone who wants to master HTML, JavaScript, PHP, MySQL
What you'll learn:
- Build your own music streaming service like Spotify
- Master important areas of development in JavaScript, PHP, HTML and MySQL
- Discover important techniques that are essential for any aspiring software engineers
Watch Online Make a Spotify Clone from Scratch: JavaScript PHP and MySQL
| # | Title | Duration |
|---|---|---|
| 1 | Setting up your local server | 08:34 |
| 2 | Creating the login form | 09:29 |
| 3 | Creating the register form | 04:54 |
| 4 | Intro to PHP - Handling form submission | 04:11 |
| 5 | Form sanitation - Cleaning the input | 10:58 |
| 6 | Separating our code | 04:41 |
| 7 | Preparing our validation functions | 03:40 |
| 8 | Creating the Account class | 07:20 |
| 9 | Validating the username | 06:52 |
| 10 | Validating the name and emails | 04:45 |
| 11 | Validating the passwords | 03:58 |
| 12 | Checking if the sign up was successful | 03:08 |
| 13 | Outputting error messages | 08:59 |
| 14 | Creating our Constants class | 08:59 |
| 15 | Remembering form values | 05:49 |
| 16 | Creating the users table | 04:59 |
| 17 | Connecting to our database from PHP | 04:47 |
| 18 | Inserting user details | 09:11 |
| 19 | Testing out the sign up process! | 03:33 |
| 20 | Query not working? Watch this video | 04:36 |
| 21 | Last remaining validation checks | 04:45 |
| 22 | Login handler | 06:08 |
| 23 | Sessions | 05:35 |
| 24 | Adding a background image | 06:56 |
| 25 | Styling the login container | 08:34 |
| 26 | Styling our text boxes | 06:55 |
| 27 | Input placeholder color | 03:22 |
| 28 | Styling the submit buttons | 03:57 |
| 29 | Buttons to switch between forms | 03:25 |
| 30 | Showing and hiding the forms on press | 07:56 |
| 31 | Showing only the relevant form when data is submitted | 06:57 |
| 32 | Show/hide button - mouse pointer | 01:16 |
| 33 | Right section content | 04:31 |
| 34 | Applying style to the right section content | 05:11 |
| 35 | 56,800+ icons FOR FREE - Icons8 | 08:17 |
| 36 | Styling the error messages | 02:47 |
| 37 | Remembering the username after failed log in attempt | 01:10 |
| 38 | Quick overview of the index page | 01:18 |
| 39 | Now playing bar container | 05:19 |
| 40 | Creating the now playing bar element | 03:53 |
| 41 | Left, center and middle sections of the bar | 05:00 |
| 42 | All the icons for our site | 02:31 |
| 43 | Adding our player buttons | 10:32 |
| 44 | Making the play and pause buttons larger | 02:33 |
| 45 | Progress bar parent elements | 04:56 |
| 46 | The progress bar | 05:59 |
| 47 | Album artwork | 05:24 |
| 48 | Track info labels | 06:58 |
| 49 | Volume bar | 05:36 |
| 50 | Page containers | 03:37 |
| 51 | Creating our navigation bar container | 02:56 |
| 52 | Navigation bar site logo | 05:34 |
| 53 | Navigation items | 05:38 |
| 54 | Navigation search icon | 06:12 |
| 55 | Navigation links color change on hover | 01:52 |
| 56 | Overview of our MySQL table structure | 05:57 |
| 57 | Creating our database tables | 05:13 |
| 58 | Inserting data into the artists, genres and albums tables | 06:14 |
| 59 | Inserting data into the songs table + FREE music files | 04:42 |
| 60 | Shortcut to inserting data into the songs table | 00:59 |
| 61 | Organisational trick | 03:55 |
| 62 | Main view containers | 06:23 |
| 63 | Header and footer files | 02:46 |
| 64 | Getting albums from the database | 05:21 |
| 65 | Outputting the album artwork images | 05:45 |
| 66 | Styling the album artwork images | 05:26 |
| 67 | Styling the album title | 02:59 |
| 68 | Making the albums clickable links | 04:39 |
| 69 | Getting album id from url | 05:23 |
| 70 | Getting the artist of the album | 03:17 |
| 71 | Creating the Artist class | 05:58 |
| 72 | Creating the Album class | 07:46 |
| 73 | Album header section | 05:00 |
| 74 | Styling the header section | 06:19 |
| 75 | Displaying the number of songs in the album | 04:37 |
| 76 | Creating the Song class | 07:29 |
| 77 | Getting the songs on an album | 06:57 |
| 78 | Outputting the track count | 05:59 |
| 79 | Outputting the track name and artist name | 02:44 |
| 80 | Outputting the track duration | 02:19 |
| 81 | Styling the track list rows | 03:44 |
| 82 | Styling the track count | 04:04 |
| 83 | Track style finishing touches | 05:45 |
| 84 | Introduction to HTML5 Audio | 07:40 |
| 85 | Creating our initial playlist of 10 random songs | 06:25 |
| 86 | Including JQuery | 01:59 |
| 87 | Set track function setup | 05:47 |
| 88 | Set track function | 04:58 |
| 89 | Playing and pausing the song via buttons | 06:41 |
| 90 | Introduction to Ajax calls | 05:57 |
| 91 | Getting a song via ajax | 07:21 |
| 92 | Getting the artist via ajax | 06:27 |
| 93 | Getting the album via Ajax | 04:37 |
| 94 | Updating the plays count when a song is played | 09:22 |
| 95 | Displaying the time remaining label | 03:38 |
| 96 | Formatting the time remaining | 05:43 |
| 97 | Updating the progress bar as the song plays | 07:12 |
| 98 | Dragging the progress bar on click | 11:46 |
| 99 | Controlling the volume | 04:06 |
| 100 | Updating the volume progress bar | 04:38 |
| 101 | Preventing controls from highlighting on mouse drag | 03:44 |
| 102 | Skipping to the next song | 05:53 |
| 103 | Song repeat mode | 02:59 |
| 104 | Repeat button | 03:58 |
| 105 | Playing the next song when current song ends | 01:43 |
| 106 | Previous song button | 04:08 |
| 107 | Mute button | 03:31 |
| 108 | Shuffle button | 03:27 |
| 109 | Shuffle - Part 1 | 06:20 |
| 110 | Shuffle - Part 2 | 10:23 |
| 111 | Playing songs by clicking on the song's play button | 08:43 |
| 112 | Fixing the song's play button bug | 04:29 |
| 113 | UserLoggedIn JavaScript variable | 02:19 |
| 114 | Changing pages dynamically | 07:51 |
| 115 | Knowing if a page was loaded from ajax or not | 09:07 |
| 116 | Replacing all links with our dynamic links | 07:59 |
| 117 | Small play button bug | 01:03 |
| 118 | Changing the URL when we load a new page | 02:33 |
| 119 | Browse page | 02:31 |
| 120 | Artist info section | 05:31 |
| 121 | Styling the artist info section | 04:34 |
| 122 | Songs section | 05:33 |
| 123 | Albums section | 03:30 |
| 124 | Artist page play button | 01:49 |
| 125 | Now playing bar links | 07:11 |
| 126 | Creating our search input section | 06:34 |
| 127 | Styling the search input | 04:28 |
| 128 | Searching when the user stops typing | 07:42 |
| 129 | Searching for songs | 06:56 |
| 130 | Searching for artists | 08:05 |
| 131 | Styling the artists search results section | 02:39 |
| 132 | Fixing the artist name bug | 02:53 |
| 133 | Searching for albums | 04:58 |
| 134 | Invalidating the search timer | 01:53 |
| 135 | Creating our playlist MySql tables | 02:38 |
| 136 | Creating the playlist page | 05:58 |
| 137 | The createPlaylist function | 07:05 |
| 138 | Create playlist file | 08:00 |
| 139 | Creating the User class | 06:43 |
| 140 | Outputting the user's playlists | 05:31 |
| 141 | Creating the Playlist class | 04:30 |
| 142 | Playlist links | 02:32 |
| 143 | Styling the playlists | 01:25 |
| 144 | Creating the header section of the page | 08:22 |
| 145 | Displaying the playlist's songs | 05:13 |
| 146 | Delete playlist function | 02:55 |
| 147 | Delete playlist ajax | 04:43 |
| 148 | Creating the options menu | 07:25 |
| 149 | Showing the options menu | 07:08 |
| 150 | Hiding the options menu | 04:51 |
| 151 | Add to playlist dropdown menu | 04:38 |
| 152 | Populating the dropdown with playlists | 04:13 |
| 153 | Styling the dropdown menu | 03:08 |
| 154 | When the dropdown menu is changed | 09:19 |
| 155 | Saving songs to a playlist | 13:19 |
| 156 | Copying options menu to other pages | 03:46 |
| 157 | Remove song from playlist function | 02:34 |
| 158 | Removing song ajax code | 05:54 |
| 159 | Settings page setup | 07:13 |
| 160 | Logout button | 05:22 |
| 161 | Settings link on the navigation menu | 05:10 |
| 162 | User details forms | 06:34 |
| 163 | Styling the user details forms | 05:52 |
| 164 | Update email function | 04:11 |
| 165 | Update email ajax code | 09:38 |
| 166 | Update password function | 03:34 |
| 167 | Update password ajax code | 12:10 |
| 168 | You made it! Congratulations! | 02:10 |
Similar courses to Make a Spotify Clone from Scratch: JavaScript PHP and MySQL
JavaScript: The Advanced Concepts
Creating a simple portfolio website with WebGL and Barba.js
PHP From Scratch 2024 | Beginner To Advanced
Crash Course: Build a Full-Stack Web App in a Weekend!
DevOps.js Conference 2021
Modern JavaScript Full Course
