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

Published: 12 April 2023
on channel: freeCodeCamp.org

262,731

8.2k

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:   / 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:    • Get your media queries working with the me...

🛠 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:    / scrimba
Follow Scrimba on Twitter:   / scrimba

❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp

On this page of the site you can watch the video online Firebase Tutorial for Beginners – Build a Mobile App with HTML, CSS, JavaScript with a duration of hours minute second in good quality, which was uploaded by the user freeCodeCamp.org 12 April 2023, share the link with friends and acquaintances, this video has already been watched 262,731 times on youtube and it was liked by 8.2 thousand viewers. Enjoy your viewing!

6,053