Firebase Tutorial for Beginners – Build a Mobile App with HTML, CSS, JavaScript
Discover ways to construct a Mobile App with HTML, CSS, JavaScript and Google Firebase. Go right here to strive the interactive browser-version:
✏️ This course was created by Rafid Hoda, a instructor at Scrimba. You may comply with Rafid on Twitter right here:
We advocate that you just be taught fundamental HTML, CSS, and JavaScript earlier than taking this course.
💫 Hyperlinks talked about:
🔗 EpochConverter:
🔗 Meta viewport defined by Kevin Powell:
🛠 Instruments used:
🔗 Firebase:
🔗 Favicon:
🔗 Netlify:
🔗 Figma:
🔗 Google Fonts:
⭐️ Code ⭐️
🔗 Obtain through Scrimba:
🐱 Wish to get entry to the lovable cat photos used on this course?
→ Seek for “Peach and Goma cat” on Google Picture.
⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:57) Let’s Build a Mobile App with Firebase
⌨️ (0:06:02) Organising app skeleton
⌨️ (0:09:53) Including CSS
⌨️ (0:14:16) Apart: Firebase Realtime Database
⌨️ (0:24:21) Including Firebase to challenge
⌨️ (0:29:13) Safety Guidelines
⌨️ (0:31:46) innerHTML to append li to ul
⌨️ (0:35:23) Refactoring
⌨️ (0:40:15) Apart: Turning an Object into an Array
⌨️ (0:44:28) Apart: Fetching database gadgets in realtime utilizing onValue
⌨️ (0:54:54) Updating gadgets in realtime
⌨️ (0:57:41) For loop to render database gadgets
⌨️ (1:00:42) Let’s smash the bug
⌨️ (1:03:32) Apart: Flexbox flex-wrap
⌨️ (1:04:54) Apart: Flexbox hole
⌨️ (1:06:15) Including CSS for li to wrap gadgets
⌨️ (1:10:22) Getting ID of merchandise in database
⌨️ (1:14:35) Changing innerHTML with createElement
⌨️ (1:19:48) Apart: Eradicating gadgets from Firebase
⌨️ (1:25:09) Eradicating an merchandise when clicked
⌨️ (1:29:22) Solely fetching gadgets from database if snapshot exists
⌨️ (1:33:28) Including hover kinds to buttons
⌨️ (1:35:20) Apart: user-select
⌨️ (1:37:04) Apart: Setting the viewport
⌨️ (1:38:58) Making the app extra mobile-friendly
⌨️ (1:40:35) Apart: Favicon
⌨️ (1:42:42) Including favicon and cellphone icons
⌨️ (1:43:58) Apart: Internet Application Manifest
⌨️ (1:46:39) Turning internet app into “cell” app
⌨️ (1:47:40) Personalise your app
⌨️ (1:49:10) Deploy to Netlify
⌨️ (1:51:48) Add app to house display screen
⌨️ (1:53:44) Share your creation
⌨️ (1:55:32) Recap
⌨️ (1:59:16) Outro + Credit
Observe Scrimba on YouTube:
Observe Scrimba on Twitter:
source
Hats off to you for making this hosting guide! Ive tested DreamHost and Bluehost, however Cloudways with TST20 c oupon is the final bargain.
Amazing teaching skills. This is a talent that every teacher should have. 🔥🔥🔥🔥🔥
GOLD!!!!
amazing thank you very much
Dúvida de build, como coloca com segurança .json do firebase no apk?
top a dublagem kkkk
Thanks you so much for this awsome video
just improved my code logic and how to structure code thanks
Awesome
sir i can't retrive data from my database
I would like to know if what kind of editor he'd used ?
This is great! One thing: where can we find the bestreads program?
Thank you for this, I was stressing all of last night trying to find a good firebase tutorial, and this was the BEST thing I could have asked for.
onValue function?????????
After many videos and times wasted, getting it done with you was reliving. Very informative. Thank you for this video.
Also born 91, left India for Canada though.
Excellent tutorial broski!! Thank you for sharing
19:21 , How can I get that link? I am new to firebase, I am getting errors in console saying cannot use import statement outside a module
Also, why did you prefer netlify over firebase hosting?
Excellent material! Excellent way to teach! You rock!
you provide your subject in a wonderful way.
i cannot sign up in netlify
Great course. Not for JavaScript beginners, but for Firebase instead. Excellent job!
Hello Teacher I cannot connect the database with my code while i try I get a lot of errors!
Good Work
when i try to do what exactly you do, i cannot push the data into firebase. Is it because im running the website on localhost? can someone help me
Been frustrated by this error even though I copy my exact databaseURL, with included the project ID how to fix this
@firebase/database: FIREBASE FATAL ERROR: Can't determine Firebase Database URL. Be sure to include a Project ID when calling firebase.initializeApp().
At 35:00, use "null" instead of empty string. Because the empty string should hold a value and every time you click the add button it will keep entering that value in the database. Setting it null wont add anything to the database.