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 ❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp