DEV Community

Cover image for Build a PWA learning JS DOM - Video tutorial series
Tharun Shiv
Tharun Shiv

Posted on • Updated on • Originally published at tharunshiv.com

Build a PWA learning JS DOM - Video tutorial series

This is a YouTube series on building a Progressive Web App which also refreshes your JavaScript DOM concepts.

In the current world of technologies, one of the technologies that is currently booming is the PWA. It was introduced by Google in 2015 and since then plenty of websites have adopted this technology. And the result obtained through this are also marvelous.

What are Progressive Web Apps?

Progressive Web Apps ( PWA ) lets you create websites with Native Apps like experience and features. These features include:

  • A mobile app-like experience
  • Offline capabilities
  • Push Notifications
  • Background Sync and more All of these can be created with the same technology that you use to build your websites. Yes, JavaScript I mean.

PWA stands for Progressive Web Apps. PWA is a web app, which can be displayed in the form of a regular App on a phone ( platform-independent) and also works like a regular responsive website on the internet. It is like building a usual website, using the same technologies that you would use, but giving that extra functionalities and advantages of Progressive Web Apps. It is light, fast and secure.

Prerequisites

  1. HTML : HTML Revision
  2. CSS : CSS YouTube Playlist My Udemy Paid Course on CSS
  3. JavaScript ES6 : JavaScript ES6 YouTube Playlist The Complete JavaScript ES6 Course
  4. JavaScript DOM : Free JavaScript DOM Course

The project:

http://bit.ly/stick-it-notes

The YouTube Project Playlist

The Playlist: The link to the PlayList

Video One:

Video Two:

Video Three:

Video Four:

Video Five:

Video Six:

Video Seven:

Video Eight:

Video Nine:

Hope this helps. 😊

Top comments (12)

Collapse
 
shaijut profile image
Shaiju T

Hi , 😄 your videos are good. Can you share the tools you used to create your YouTube videos, like which video recording/editing software, mic etc ? Is it open source ? Also should we record our audio while recording or after recording ?

Collapse
 
developertharun profile image
Tharun Shiv

Thanks a lot. :)

Tools: Audacity to record and edit audio, Adobe premiere pro ( paid ) for video editing, ShareX for screen recording, Blue Snowball iCe mic for recording audio, Samsung M30s for Video recording when necessary.
I record audio as I type the code itself. :) You can do it the way you're comfortable with. :)
Hope this helps

Collapse
 
sharmakushal profile image
Kushal sharma

Hi Tarun can you share how to embeed your profile card on the post

Collapse
 
developertharun profile image
Tharun Shiv

Sure..

tharunshiv image




🙂

Collapse
 
sharmakushal profile image
Kushal sharma

Thanks bro

Thread Thread
 
developertharun profile image
Tharun Shiv

🙂sure

Collapse
 
praveenreddy1798 profile image
praveenreddy1798

Amazing series, when will the remaining part of the series be out?

Collapse
 
developertharun profile image
Tharun Shiv

In a couple of days :)

Collapse
 
venkat121998 profile image
venkat anirudh

Very Helpful! Thank you so much.. Can you do a series on how to use Firebase as a backend for this application? Also on how to handle the data when the PWA is offline

Collapse
 
developertharun profile image
Tharun Shiv

Yes, that is coming up :)

Collapse
 
chandrika56 profile image
Jaya chandrika reddy

Very helpful and well taught.. Good Channel.. Keep it going..

Collapse
 
developertharun profile image
Tharun Shiv

Thank you