CF

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.

Additional

https://sweet-tellurium-e16.notion.site/JS-CSS-Projects-Handbook-12ab2273e75280118369d9af8a6a9622

About the Author: Zero To Mastery

Zero To Mastery thumbnail

Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.

The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.

The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.

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

Related courses

Frequently asked questions

What prerequisites are necessary for this course?
Prospective students should have a basic understanding of JavaScript, HTML, and CSS before enrolling. Familiarity with Node.js and Express will be beneficial but is not required, as the course will cover these technologies in detail during the backend development lessons.
What will I build by the end of the course?
You will build a fully functional podcast player web application. The project includes features such as searching for podcasts, managing playback queues, and keeping a search history. The application will be capable of streaming content and will be integrated directly into the browser with a stylish, responsive interface.
Who is the target audience for this course?
This course is designed for aspiring web developers who want to enhance their full-stack development skills. It is particularly suited for those interested in building media applications and learning how to work with APIs and server-side technologies like Node.js and Express.
What specific tools and platforms will be used?
The course employs Node.js and Express for backend development, and HTML, CSS, and JavaScript for the frontend. Additionally, it includes lessons on setting up a development environment with VSCode, using GitHub for version control, and deploying the project using the Render platform.
What topics or technologies are not covered in this course?
The course does not cover advanced server-side frameworks beyond Express, nor does it delve into database management systems. While it includes API integration, it does not cover the creation of APIs from scratch.
How much time should I expect to commit to this course?
The course consists of 42 lessons. While the exact runtime is not specified, students should plan to dedicate several weeks to complete the course, factoring in time for hands-on exercises and applying the skills learned in building the podcast player project.
How can the skills learned in this course benefit my career?
By completing this course, you will gain practical experience in creating a real-world web application, enhancing your portfolio with a finished project. The skills in API integration, responsive design, and full-stack development are valuable in many tech roles and can help distinguish you as a developer in the competitive tech landscape.