Black Friday 2024: 25+ Ways to Save on Online Learning

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Scrimba

Build a Mobile App with Firebase

via Scrimba

Go to class Write review

Overview

Build your first mobile app using HTML, CSS and JavaScript + Firebase. Firebase is a magical database service that lets you easily make realtime apps.
  • import
  • Firebase: initializeApp
  • Firebase: getDatabase
  • Firebase: reference
  • Firebase: push
  • Firebase: onValue
  • Firebase: snapshot
  • Firebase: remove
  • IDs
  • Object → Array
  • createElement
  • Flexbox: flex-wrap
  • Flexbox: gap
  • user-select
  • Setting the viewport
  • Favicon
  • Web Application Manifest

Syllabus

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

Reviews

Start your review of Build a Mobile App with Firebase

Go to class

Never Stop Learning.

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

Sign up for free
Someone learning on their laptop while sitting on the floor.