CourseFlix

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

Course content

42 lessons · 8h 30m 51s
Show all 42 lessons
  1. 1 Introduction 07:46
  2. 2 Podcast Index API 13:18
  3. 3 Node Install - Github Repo 08:41
  4. 4 Install NPM - Run Express 12:21
  5. 5 Server.js API Call (Part 1) 10:45
  6. 6 Server.js API Call (Part 2) 12:51
  7. 7 Font, Background, Nav UI 11:46
  8. 8 Containers UI 15:12
  9. 9 Search Container UI 14:47
  10. 10 Loader UI 06:45
  11. 11 Cards Container UI 16:29
  12. 12 Player UI 17:29
  13. 13 Queue UI 14:32
  14. 14 Mobile Navigation UI 19:59
  15. 15 Mobile Player UI 10:16
  16. 16 Mobile Search UI 15:48
  17. 17 Blisk 13:24
  18. 18 Search Container JS (Part 1) 10:09
  19. 19 Search Container JS (Part 2) 16:13
  20. 20 Search Results JS 12:09
  21. 21 Podcast Cards JS 15:45
  22. 22 Episodes API JS 11:38
  23. 23 Episode Cards JS 17:40
  24. 24 Lazy Load Images JS (Part 1) 12:14
  25. 25 Lazy Load Images JS (Part 2) 10:07
  26. 26 Player JS (Part 1) 12:33
  27. 27 Player JS (Part 2) 11:38
  28. 28 Player JS (Part 3) 16:28
  29. 29 Mobile Container UI 04:02
  30. 30 Queue JS (Part 1) 08:39
  31. 31 Queue JS (Part 2) 12:12
  32. 32 PWA Manifest 11:20
  33. 33 PWA Service Worker 18:26
  34. 34 Render Deployment 11:22
  35. 35 Let's Keep Learning Together! 01:23
  36. 36 Introduction 05:02
  37. 37 Mac / Linux Device Setup 05:35
  38. 38 Windows Device Setup 06:58
  39. 39 VSCode Setup & Template 19:27
  40. 40 VSCode Extensions 09:11
  41. 41 DevTools 13:57
  42. 42 GitHub 14:34

Related courses

  • 100 Days Of Code: The Complete Web Development Bootcamp 2024 thumbnail

    100 Days Of Code: The Complete Web Development Bootcamp 2024

    By: Academind Pro (Maximilian Schwarzmüller)
    100 Days of Code: Complete Web Development Bootcamp 2022 by Colt Steele — HTML, CSS, JavaScript, Node, Express, Mongo, and full-stack projects.
    78 hours 51 minutes 55 seconds
  • Machine Learning in JavaScript with TensorFlow.js thumbnail

    Machine Learning in JavaScript with TensorFlow.js

    By: Udemy
    Interested in using Machine Learning in JavaScript applications and websites? Then this course is for you! This is the tutorial you've been looking for to becom
    6 hours 42 minutes 20 seconds
  • Responsive Design for Beginners thumbnail

    Responsive Design for Beginners

    By: Jess Chan
    You have already learned the basics of HTML and CSS... so what's next? Yes, you can follow the steps from the tutorial and have become a master at finding answe
    30 hours 51 seconds

Frequently asked questions

What is Build a Podcast Player with JavaScript, CSS and Node.js about?
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…
Who teaches Build a Podcast Player with JavaScript, CSS and Node.js?
Build a Podcast Player with JavaScript, CSS and Node.js is taught by Zero To Mastery. You can find more courses by this instructor on the corresponding source page.
How long is Build a Podcast Player with JavaScript, CSS and Node.js?
Build a Podcast Player with JavaScript, CSS and Node.js contains 42 lessons with a total runtime of 8 hours 30 minutes. All lessons are available to watch online at your own pace.
Is Build a Podcast Player with JavaScript, CSS and Node.js free to watch?
Build a Podcast Player with JavaScript, CSS and Node.js is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Build a Podcast Player with JavaScript, CSS and Node.js online?
Build a Podcast Player with JavaScript, CSS and Node.js is available to watch online on CourseFlix at https://courseflix.net/course/build-a-podcast-player-with-javascript-css-and-node-js. The page hosts every lesson with the integrated video player; no download is required.