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

Показать описание

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

💫 Links mentioned:

🛠 Tools used:

⭐️ Code ⭐️

🐱 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

freeCodeCamp.org

Рекомендации по теме

Комментарии

Really liked this tutorial. This was one of the best tutorial which I have ever seen. Instead of just copying somebody's code, this time I felt that I used my knowledge to write the code and whenever I got stuck your code helped me to rectify my mistakes. I wish every instructor starts teaching like this, it makes students think about the code rather than blindy copy pasting it.

akifahmed

I've built many todo/list app so far in my progression. This is one great version. Super simple yet does the trick perfectly. Love the teaching style and the asides as the course progresses. Quality scrimba content, not just a "follow me and build this" it's more a "let me guide you through building this." experience.
Now addicted to

markivkovic

At 35:00, use "null" instead of empty string. Because the empty string should hold a value and every time you click the add button it will keep entering that value in the database. Setting it null wont add anything to the database.

ajinkya.

I built this on Scrimba! I use it at least twice a week for my shopping list!

tonybowen

Just completed this project. Loved it ♥
Loved your way of teaching.
Thanks for teaching this technology with such positive vibe.

ammaribrahim

Finally its here, I was waiting for so long time like front-end dev with firebase..❤

tusharkutre

Also born 91, left India for Canada though.
Excellent tutorial broski!! Thank you for sharing

HSA-

Thank you for this, I was stressing all of last night trying to find a good firebase tutorial, and this was the BEST thing I could have asked for.

tryingtobeproductive

Great course. Not for JavaScript beginners, but for Firebase instead. Excellent job!

henryherrera

took me about a week to finish this course. thank you for your dedication and amazing teaching skills!!!

eugene

Recap towards the end was the icing on the cake. Thanks so much!

prasannasundaram

This was so helpful. I learned so many new things. Completed this fully and I'm very very happy to be able to open this in my phone and desktop.

soumelee

I swear I was just about to work on this!! Thank you so much!! :D
I will be back here to thank you once I launch my PWA

usernotfound

Thanks for this app tutorial! I have to learn firebase for a work project. I decided to make a similar app to this video for my girlfriend's birthday, who is studying abroad for a semester. Super awesome, and I'm sure she will love it.

LostZenith_