Build a Podcast Player with JavaScript, CSS and Node.js
Course description
"Creating a Podcast Player with JavaScript, CSS, and Node.js" is a practical full-stack project where you will develop a modern web application for listening to podcasts.
Throughout the course, you will step-by-step create an application that is on par with real media players: search, catalog, streaming, playback queue, and search history - all right in the browser.
- On the backend, you will work with Node.js and Express, connect to a podcast API, and set up secure data delivery.
- On the frontend, using HTML, CSS, and JavaScript, you will create a stylish, responsive interface with custom playback controls.
The course will be a significant upgrade for your stack: you will learn to work with APIs, manage user data, and implement features that real users value.
As a result, you will have not only new skills but also a finished project for your portfolio that will set you apart among developers.
Watch Online
All Course Lessons (42)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction Demo | 07:46 | |
| 2 | Podcast Index API | 13:18 | |
| 3 | Node Install - Github Repo | 08:41 | |
| 4 | Install NPM - Run Express | 12:21 | |
| 5 | Server.js API Call (Part 1) | 10:45 | |
| 6 | Server.js API Call (Part 2) | 12:51 | |
| 7 | Font, Background, Nav UI | 11:46 | |
| 8 | Containers UI | 15:12 | |
| 9 | Search Container UI | 14:47 | |
| 10 | Loader UI | 06:45 | |
| 11 | Cards Container UI | 16:29 | |
| 12 | Player UI | 17:29 | |
| 13 | Queue UI | 14:32 | |
| 14 | Mobile Navigation UI | 19:59 | |
| 15 | Mobile Player UI | 10:16 | |
| 16 | Mobile Search UI | 15:48 | |
| 17 | Blisk | 13:24 | |
| 18 | Search Container JS (Part 1) | 10:09 | |
| 19 | Search Container JS (Part 2) | 16:13 | |
| 20 | Search Results JS | 12:09 | |
| 21 | Podcast Cards JS | 15:45 | |
| 22 | Episodes API JS | 11:38 | |
| 23 | Episode Cards JS | 17:40 | |
| 24 | Lazy Load Images JS (Part 1) | 12:14 | |
| 25 | Lazy Load Images JS (Part 2) | 10:07 | |
| 26 | Player JS (Part 1) | 12:33 | |
| 27 | Player JS (Part 2) | 11:38 | |
| 28 | Player JS (Part 3) | 16:28 | |
| 29 | Mobile Container UI | 04:02 | |
| 30 | Queue JS (Part 1) | 08:39 | |
| 31 | Queue JS (Part 2) | 12:12 | |
| 32 | PWA Manifest | 11:20 | |
| 33 | PWA Service Worker | 18:26 | |
| 34 | Render Deployment | 11:22 | |
| 35 | Let's Keep Learning Together! | 01:23 | |
| 36 | Introduction | 05:02 | |
| 37 | Mac / Linux Device Setup | 05:35 | |
| 38 | Windows Device Setup | 06:58 | |
| 39 | VSCode Setup & Template | 19:27 | |
| 40 | VSCode Extensions | 09:11 | |
| 41 | DevTools | 13:57 | |
| 42 | GitHub | 14:34 |
Unlock unlimited learning
Get instant access to all 41 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Chrome Extension Mastery: Build Full-Stack Extensions with React & Node.js
Docker for Node.js Projects From a Docker Captain
