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

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

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

Build Telegram Bots with JavaScript: The Complete Guide

Build Telegram Bots with JavaScript: The Complete Guide

Sources: udemy
Telegram is a cloud-based instant messaging app that provides API to developers to create bots that interact with users. This course aims to provide you with complete set of kno...
5 hours 28 minutes 48 seconds
Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

Sources: Nomad Coders
We will do a Uber clone (backend + frontend + deployment). From head to toe using JavaScript! This time full stack, full JavaScript stack!
22 hours 41 minutes 56 seconds
NodeJS Internals and Architecture

NodeJS Internals and Architecture

Sources: udemy, Hussein Nasser
My favorite part of engineering is making complex systems transparent and understandable. Node.js is one of the most popular runtimes for server development...
21 hours 9 minutes 56 seconds
MERN Stack Web Development with Ultimate Authentication

MERN Stack Web Development with Ultimate Authentication

Sources: udemy
MERN Stack (MongoDB Express React Node) FullStack Project from Scratch to Live Server with production ready Authentication Learn MERN stack web development by building productio...
9 hours 24 minutes 59 seconds
Master Full-Stack Web Development | Node, SQL, React, & More

Master Full-Stack Web Development | Node, SQL, React, & More

Sources: udemy
Build a fullstack project with Node.js, PostgreSQL, SQL, React, Redux and more! Covers APIs, authentication, and beyond!
18 hours 36 minutes 51 seconds