Skip to main content

Build a Podcast Player with JavaScript, CSS and Node.js

8h 30m 51s
English
Paid

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. This course will guide you in building a comprehensive podcast player that rivals the features of professional media players.

Course Overview

In this course, you will systematically create a podcast application that includes essential features like search, catalog, streaming, playback queue, and search history—all seamlessly integrated into your browser.

Backend Development

  • You'll work with Node.js and Express to build the backend infrastructure of your podcast player.
  • Learn how to connect to a podcast API and set up secure data delivery for seamless content streaming.

Frontend Development

  • Using HTML, CSS, and JavaScript, you will craft a stylish and responsive interface.
  • Create custom playback controls, ensuring a superior user experience.

Skills and Benefits

This course will significantly enhance your tech stack by teaching you to work with APIs, manage user data efficiently, and implement features that gain real user appreciation.

Course Outcome

Upon completion, you will have gained new skills and developed a finished project for your portfolio, distinguishing you as a developer in the competitive tech landscape.

About the Author: zerotomastery.io

zerotomastery.io thumbnail
Whether you are just starting to learn to code or want to advance your skills, Zero To Mastery Academy will teach you React, Javascript, Python, CSS and more to help you advance your career, get hired and succeed at some of the top companies in the world.

Watch Online 42 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 42 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (42)
#Lesson TitleDurationAccess
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 subscription