Firebase Tutorial for Beginners – Build a Mobile App with HTML, CSS, JavaScript

Firebase Tutorial for Beginners – Build a Mobile App with HTML, CSS, JavaScript

freeCodeCamp.org via freeCodeCamp Direct link

⌨️ Introduction

1 of 36

1 of 36

⌨️ Introduction

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Firebase Tutorial for Beginners – Build a Mobile App with HTML, CSS, JavaScript

Automatically move to the next video in the Classroom when playback concludes

  1. 1 ⌨️ Introduction
  2. 2 ⌨️ Let's Build a Mobile App with Firebase
  3. 3 ⌨️ Setting up app skeleton
  4. 4 ⌨️ Adding CSS
  5. 5 ⌨️ Aside: Firebase Realtime Database
  6. 6 ⌨️ Adding Firebase to project
  7. 7 ⌨️ Security Rules
  8. 8 ⌨️ innerHTML to append li to ul
  9. 9 ⌨️ Refactoring
  10. 10 ⌨️ Aside: Turning an Object into an Array
  11. 11 ⌨️ Aside: Fetching database items in realtime using onValue
  12. 12 ⌨️ Updating items in realtime
  13. 13 ⌨️ For loop to render database items
  14. 14 ⌨️ Let's smash the bug
  15. 15 ⌨️ Aside: Flexbox flex-wrap
  16. 16 ⌨️ Aside: Flexbox gap
  17. 17 ⌨️ Adding CSS for li to wrap items
  18. 18 ⌨️ Getting ID of item in database
  19. 19 ⌨️ Replacing innerHTML with createElement
  20. 20 ⌨️ Aside: Removing items from Firebase
  21. 21 ⌨️ Removing an item when clicked
  22. 22 ⌨️ Only fetching items from database if snapshot exists
  23. 23 ⌨️ Adding hover styles to buttons
  24. 24 ⌨️ Aside: user-select
  25. 25 ⌨️ Aside: Setting the viewport
  26. 26 ⌨️ Making the app more mobile-friendly
  27. 27 ⌨️ Aside: Favicon
  28. 28 ⌨️ Adding favicon and phone icons
  29. 29 ⌨️ Aside: Web Application Manifest
  30. 30 ⌨️ Turning web app into "mobile" app
  31. 31 ⌨️ Personalise your app
  32. 32 ⌨️ Deploy to Netlify
  33. 33 ⌨️ Add app to home screen
  34. 34 ⌨️ Share your creation
  35. 35 ⌨️ Recap
  36. 36 ⌨️ Outro + Credits

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.