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

Learn how to build a Mobile App with HTML, CSS, JavaScript and Google Firebase. Go here to try the interactive browser-version: https://scrimba.com/learn/firebase

✏️ This course was created by Rafid Hoda, a teacher at Scrimba. You can follow Rafid on Twitter here: https://twitter.com/rafidhoda

We recommend that you learn basic HTML, CSS, and JavaScript before taking this course.

💫 Links mentioned:

🔗 EpochConverter: https://www.epochconverter.com/
🔗 Meta viewport explained by Kevin Powell: https://www.youtube.com/watch?v=SElOdK2qTpI

🛠 Tools used:
🔗 Firebase: https://firebase.google.com/
🔗 Favicon: https://favicon.io/
🔗 Netlify: https://www.netlify.com/
🔗 Figma: https://www.figma.com/
🔗 Google Fonts: https://fonts.google.com/

⭐️ Code ⭐️
🔗 Download via Scrimba: https://scrimba.com/learn/firebase

🐱 Want to get access to the cute cat images used in this course?
→ Search for "Peach and Goma cat" on Google Image.

⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:57) Let's Build a Mobile App with Firebase
⌨️ (0:06:02) Setting up app skeleton
⌨️ (0:09:53) Adding CSS
⌨️ (0:14:16) Aside: Firebase Realtime Database
⌨️ (0:24:21) Adding Firebase to project
⌨️ (0:29:13) Security Rules
⌨️ (0:31:46) innerHTML to append li to ul
⌨️ (0:35:23) Refactoring
⌨️ (0:40:15) Aside: Turning an Object into an Array
⌨️ (0:44:28) Aside: Fetching database items in realtime using onValue
⌨️ (0:54:54) Updating items in realtime
⌨️ (0:57:41) For loop to render database items
⌨️ (1:00:42) Let's smash the bug
⌨️ (1:03:32) Aside: Flexbox flex-wrap
⌨️ (1:04:54) Aside: Flexbox gap
⌨️ (1:06:15) Adding CSS for li to wrap items
⌨️ (1:10:22) Getting ID of item in database
⌨️ (1:14:35) Replacing innerHTML with createElement
⌨️ (1:19:48) Aside: Removing items from Firebase
⌨️ (1:25:09) Removing an item when clicked
⌨️ (1:29:22) Only fetching items from database if snapshot exists
⌨️ (1:33:28) Adding hover styles to buttons
⌨️ (1:35:20) Aside: user-select
⌨️ (1:37:04) Aside: Setting the viewport
⌨️ (1:38:58) Making the app more mobile-friendly
⌨️ (1:40:35) Aside: Favicon
⌨️ (1:42:42) Adding favicon and phone icons
⌨️ (1:43:58) Aside: Web Application Manifest
⌨️ (1:46:39) Turning web app into "mobile" app
⌨️ (1:47:40) Personalise your app
⌨️ (1:49:10) Deploy to Netlify
⌨️ (1:51:48) Add app to home screen
⌨️ (1:53:44) Share your creation
⌨️ (1:55:32) Recap
⌨️ (1:59:16) Outro + Credits

Follow Scrimba on YouTube: https://www.youtube.com/c/Scrimba
Follow Scrimba on Twitter: https://twitter.com/scrimba