Skip to main content

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

8h 30m 51s
English
Paid

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Grokking JavaScript Fundamentals

Grokking JavaScript Fundamentals

Sources: DesignGurus.io
Start learning JavaScript from scratch. This course is ideal for those who want to master programming and web development without any prior experience.
Explore the JavaScript Universe (Explore the JavaScript Universe)

Explore the JavaScript Universe (Explore the JavaScript Universe)

Sources: Dan Abramov
On a good day, programming feels like magic. You patiently enchant the machine with a tapestry of digital spells. With a few confident keystrokes, you breathe l
Web security: Injection Attacks with Java & Spring Boot

Web security: Injection Attacks with Java & Spring Boot

Sources: udemy
Are you a Java web developer and want to write secure code? Do you want to learn Ethical hacking and Web application security? With this hands-on injection attacks course you wi...
8 hours 44 minutes 36 seconds
Understanding HTML and CSS

Understanding HTML and CSS

Sources: udemy
Deeply understand Semantic HTML, CSS, Flexbox, Grid, learn to read the specifications, and more. In this course you'll gain a deep understanding of HTML and CSS
17 hours 52 minutes 36 seconds
Conquer JavaScript by Building Your Own Framework from Scratch

Conquer JavaScript by Building Your Own Framework from Scratch

Sources: zerotomastery.io
Understand how JavaScript works at a deeper level, enhance your JavaScript skills, and build an awesome portfolio project in this project-based course! Ever...
1 hour 18 minutes 15 seconds