Complete Mobile App Tutorial With Only HTML, CSS and JavaScript | PWA Tutorial

Outline:

Introduction - 00:00:00
What we're building - 00:00:56
Setting up our app - 00:04:14
Structuring our app with HTML - 00:06:02
Styling our app with CSS - 00:09:22
Adding items to our IndexedDb database - 00:16:23
Getting items from our IndexedDb database - 00:19:27
Creating a function to calculate our items total price - 00:23:24
Displaying items in our shopping app - 00:25:38
Updating data in our IndexedDb database - 00:28:26
Deleting data from our IndexedDb database - 00:31:04
Setting up Workbox for PWA - 00:32:37
Generating our Service worker - 00:34:00
Making our app installable - 00:38:38
Challenge - 00:42:22

#webdevelopment #coding #programming #pwa #mobiledevelopment

[EbenezerDon]

Thank you for watching! Don't forget to subscribe. I need your support.


Ignore the highlighted text in the JavaScript code like "type", "selector" and "Event". That's auto-added by my IDE as a description of parameters/arguments. You shouldn't write it.

If you're getting syntax errors, it's likely because you're writing those hints in your code too. Ignore the type hints. (event: Event) should be written as (event) without the time type hint, "Event".

I hope this clears things up

[Radek]

Great video! It is not easy to find nice vanilla mobile app tutorial.

[rationaloptimist]

I have an idea for an app, do I need another programming language as well?

[ndangawandji]

Another approach of mobile app development beside the (hard style) approach with Java, Kotlin and C/C++.
The Github part of the video is usefull for me. Thank.

[aliualaruba]

I am stuck at the adding of the items info to dexiedb, it brings syntax error for the 'onsubmit'
Here is what I have there

itemForm.onsubmit = async (event) => {}
Chrome dev tools console
Reads Uncaught TypeError: Cannot set properties of null(setting 'onsubmit')
Please help me out

[ngxumzalg]

I really enjoyed this tutorial, so informative. I think I will upgrade my Bootcamp e-commerce app with IndexedDb and Workbox. Thanks The Don.

[unlimitedalliancefederation]

@EdenezarDon at the beginning of you Video you had the mobile application open and the java script on the right of the mobile app. on the screen. Was that an application that shows what the mobile app looks like as you code or was that just a side-by-side view of two screens. If it was an application. What was that application that you were using, showing the mobile app as you were adjusting code?

[Softlinks]

This is Amazing!....I really love this course.

[_The_OPs]

I have tried coding along but it's keeps showing error
I use vscode ide can you please tell me what to Install to write this indexdb code because it keeps giving error and I don't know why

[wcoolers]

Thanks, Boss Don for this teaching. Please can you explain or do a lesson on how to continuously update the app without clearing cookies, as promised?

[victorekea]

Interesting, let's build this! 🏃

[softgene]

Wow Great Job Don... Please can you drop the link to the workbox documentation

[solomonabuh]

Beautiful boss! Hope modification is allowed?

[Area-bt]

كيف يمكنني ان اجعل تطبيقي قابلا للرفع على غوغل بلاي سطور ، هل من طريقة

[lexidunique]

how did you duplicate the purchased. i have tried several times but can't duplicate it.

[jomobrain]

how do i get the apk for phone..i dint get it clear..anyway nice job

[bradspitts]

What ide is used in the making of this mobile app?

[gamallielsharon]

What theme that you use on the vs code?