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: 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: www.epochconverter.com/
🔗 Meta viewport explained by Kevin Powell: • Get your media queries...
🛠 Tools used:
🔗 Firebase: firebase.google.com/
🔗 Favicon: favicon.io/
🔗 Netlify: www.netlify.com/
🔗 Figma: www.figma.com/
🔗 Google Fonts: fonts.google.com/
⭐️ Code ⭐️
🔗 Download via Scrimba: 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 KZbin: / scrimba
Follow Scrimba on Twitter: / scrimba

[@akifahmed9610]

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.

[@markivkovic7235]

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 firebase........

[@rafidhoda]

Thank you so much Mark for those amazingly kind words! So nice to hear that you noticed all that :) Exactly what I love to hear 🤩 You’ll be happy to hear I’m working on a much bigger Firebasr course that will cover all the other cool stuff Firebase had to offer!

[@soumelee5661]

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.

[@eugene9340]

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

[@tonybowen455]

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

[@vlad-alex2gavanescu888]

Great tutorial. Learned so much even as a more advanced programmer. Thank you for this amazing tutorial!

[@saipavan77]

Indians attendance

[@lottexy]

Racist, everyone is welcomed

[@rafidhoda]

🇮🇳

[@avijitpal1421]

Present sir

[@06tausif31]

Present bro 🇮🇳

[@lescargos51]

Are Sri Lankans welcome? 🥺 🇮🇳♥️🇱🇰

[@LostZenith_]

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.

[@tryingtobeproductive]

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.

[@rafidhoda]

So happy to hear that :) Hope you have fun!

[@tryingtobeproductive]

I did, thanks for your contribution!@@rafidhoda

[@tusharkutre6378]

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

[@rafidhoda]

Yes! I really hope you enjoy it Tushar :)

[@user-uh8bq6xl6i]

possibly the best and most thorough tutorial. Thank you so much!

[@WweLegends511]

Go for this course , the teaching and knowledge provided is awesome 🔥🔥🔥🔥

[@usernotfound5857]

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

[@rafidhoda]

That's great to hear :) THank you so much for the comment :)

[@prasannasundaram9158]

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

[@rafidhoda]

You're welcome :) Glad you enjoyed it!

[@guillermo5295]

Amazinly well explained. Bravo!! and thanks a lot!!

[@FaisalKhan-vy6kr]

Thanks for the awesome project. I learned a lot from this video. Now I am feeling much more confident that I will make project with firebase.

[@thelocalgodd]

absolutely loved and enjoyed this project

[@menghongpor2667]

You have just made it so easy!!!! You have saved my confidence!

[@rafidhoda]

Thank you so much, Meng!!!

[@ammaribrahim8236]

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

[@rafidhoda]

Thank you so so so so so much ❤❤❤❤❤ 🙌🙌🙌🙌🙌 Thank you for following my tutorial! Really appreciate it :)

[@user-xy8px9lj2o]

Thank you soooo much!!! your course is amazing!!! Thank you so much for your time and energy to create the video!

[@TheZiommati]

Thank you for this tutorial specially for segments where I had to code something myself. This tutorial really learned me a lot 🔥

[@ajinkya-]

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.

[@rafidhoda]

That's a great catch! Thank you so much for commenting :)

[@amermoosa]

really appreciated your job hopefully if you can make the same app with exactly the same functionality without adding or removing anything but now using react or next Js so that you can teach the all old school and the new school at the same time it will be amazing to compare between them, especially by using use-State user-effect and other stuff which can handle the same options inside this beautiful tutorial.

[@rafidhoda]

Thank you so much :) If you want to challenge yourself then a great exercise would be for you to make the exact same app but using React.

[@henryherrera5043]

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

[@rafidhoda]

Happy to hear that :) Thank you so much!

[@mrbaranyt]

After many videos and times wasted, getting it done with you was reliving. Very informative. Thank you for this video.

[@rafidhoda]

Happy to hear that! Thank you so much for the kind words :) Really appreciate it!

[@something4401]

@Rafid Hoda Your teaching is so GOOD...

[@jeffjames15]

so nice! thank you!❤

[@didyouknowthat.channel]

Thank you! This is exactly what I need

[@rafidhoda]

Awesome to hear that! THanks :)

[@arthurhakobyan7343]

Amazing teaching skills. This is a talent that every teacher should have. 🔥🔥🔥🔥🔥

[@rafidhoda]

Thank you so much, Arthur! Really grateful 🙏

[@Web_Chanel]

Thanks for the awesome project. Salam🙋saya dari Indonesia

[@sarfaraz306]

Great effort ❤

[@victorleman2916]

Really helpful tutorial!

[@robiyaALDC]

I liked this video really helped my firebase project, thank you for sharing this video.

[@bigbeeforever]

not sure you covered but you can enter empty strings into the db, defensive programming for this would be to add an if statement in the add to cart button event listener. ie if(inputValue){}

[@izaiahevans6989]

I like your video, your amazing, thank you for showing me how to create an app and learning java script.

[@vasiliyilyuhin8793]

Hi! Thank you for this tutorial. It is awesome. Especially for those new to firebase. I ended up with the same result as yours. Everything works ) Now I want to add a feature that allows each user to have their own list. Can you give me some idea or link how I can do it?

[@akoscsonka6802]

Thank you for all of these courses. It helps me a lot encourage me.

[@rafidhoda]

Awesome! That's great to hear :)

[@luisdomiciano]

Ótimo vídeo!

[@richardmakuchete7433]

Thank you Rafid

[@nettyYTube]

been waiting for this for long

[@rafidhoda]

Yay! Hope you'll enjoy it :)

[@elou]

Awesome, thanks

[@Ranjeetvishwakarma-72]

This is very helpful and enjoying video. I learned many new tips and tricks to solve many javascript and css problem with ease.Aur last me to maja hi aa gya 😄

[@dimasnytin]

This is that unreally 🤩🤩🤩 Thanks you from your work

[@rafidhoda]

You're welcome :) Hope you'll like it :)

[@jssecrets]

Thank you very much!!! ❤

[@zebahgraphy]

you provide your subject in a wonderful way.

[@rafidhoda]

Thank you so much!!

[@SatyamCodesss]

Rashid is amazing, thanks for this video!

[@rafidhoda]

Thank you Satyam for this lovely comment :)

[@shubhsharma19]

Rafid on fire 🔥💪💜

[@rafidhoda]

Shubh!!!! Thank you so much for the support :)

[@TheMrOhTwo]

just got here, this guy is an amazing tutor

[@rafidhoda]

Wow! Thank you so much, Lucas! Really appreciate it :)

[@akbarhlubis]

Thank you!

[@jenzojo3421]

Wow so nice I was recently asked if I knew firebase and the answer was not really But u jhus encouraged me to go learn it and make my own apps

[@rafidhoda]

Thanks for the comment! Hope you’ll enjoy the course :)

[@faizanahmed9304]

Amazing video, thank you enjoyed a lot.

[@rafidhoda]

Thank you so much, Faizan! Super glad to hear you enjoyed it :)

[@gauravprakash7451]

Best Platform.Great course. Great Tutor

[@rafidhoda]

Thank you so much Gaurav!

[@manuelaraujo81]

Excellent material! Excellent way to teach! You rock!

[@manuelaraujo81]

I have a question: why did you use a realtime database instead of a firestore database?

[@rafidhoda]

Thank you so much! Really appreciate the kind words :)

[@rafidhoda]

@@manuelaraujo81 Because it's easier for beginners :)

[@yadday5153]

Wow Hoda, enjoyed and understood this course thorougly! It answered a lot of my concerns -without even asking it to. Thank you. You're a unique peson, keep it up. Thank you freecodecamp for publishing his work. And to Scrimba, for being so friendly and gentle in approach.

[@GGPALVE]

Great tutorial.

[@LordGhapa]

I'm from Brazil, thanks for the translation

[@user-lw6wn6gv9x]

Thank you very much sir

[@bryandche]

Beautiful 🥰. Well explained 💯💯

[@rafidhoda]

Thank you so much :)

[@skyy_banerjee]

Jaha dekho, waha Tiranga. Awright! Pumped up! Jeg elsker Norge! And ofcs Mera Bharat ❤

[@rafidhoda]

Thank you so much for the comment Soumadip. Tusen takk!

[@skyy_banerjee]

@@rafidhoda Welcome Dada.

[@mindmusee]

just improved my code logic and how to structure code thanks

[@rafidhoda]

Great to hear!

[@debakroy1842]

Absolutely loved it. Many many thanks Rafid🙏.

[@rafidhoda]

So awesome to hear Debak! Thank you so much for the comment :)

[@SvetlanaKova]

thank you !!!

[@dkdas8689]

Great video😇

[@shubhsharma19]

started building it!

[@rafidhoda]

Awesome!

[@jeffreyhill854]

I added two small additions. You can add items with a 'keypress' event on enter event.key === "Enter" and you can not enter an empty string. inputValue !== '' two simple conditionals that can be added for a bit more functionality

[@Klrfl101]

Or you can use a form for the input, and listen for a submit event (when you press enter In a form it submits automatically, so you don't need to listen to the enter key)

[@Cattherine._t]

you explain very cool

[@michaljanicek6187]

Hey Rafid, I have to say that you perfect skills to engage and inspire your audience. Love the way you have talked us through the course. Could i please ask what source code editor have you used. It might be obvious for experienced programmers but I’m new to coding world and absolutely love to learn more . Many thanks and please do some more of your courses. Best wishes

[@carlosorellana9952]

He is using scrimba, is not a code editor, but more like a code teaching enviroment, if i may call it that way, the link is bellow the video, you may try scrimba or set your own enviroment in your computer

[@rafidhoda]

Thank you so so much for your kind words :) I really appreciate it! As the other person already commented, I'm using the Scrimba coding platform. You should definitely check it out!

[@Sk8erMorris]

One thing to point out are the image files, trying to find the same one with the size is difficult, a github w src would be lovely

[@rafidhoda]

Excellent point. I’ll see what I can do. Thanks for the comment :)

[@sbingyu]

Great tutorial, thank you! What I don't completely understand: can you mix server and client-side script in the same js file? (reading the DOM and calling the database)

[@ichigo23984]

Thanks you so much for this awsome video

[@rafidhoda]

Glad you liked it :)

[@ichigo23984]

@@rafidhoda ❤️

[@faisalmehar10]

Good Work

[@rafidhoda]

Thank you!

[@studyTime2503]

A simple insight: For the font to apply to all elements including text input areas you can include it in the universal selector *

[@asaadkittaneh2928]

amazing thank you very much

[@rafidhoda]

you're welcome :) glad you liked it

[@surajkumarsingh4857]

Very informative

[@rafidhoda]

Thank you, Suraj!

[@stipemaric]

Thanx!!! Beautyful

[@rafidhoda]

Thank you 🙏

[@fixmath.a4349]

Great

[@debashish4307]

Thanks❤

[@rafidhoda]

You're welcome :)

[@maryannjose3205]

This is the most cutest thing ever 😭

[@rafidhoda]

Thaaaank youuuu :)

[@HonduranHunk]

I was having problems running the app through my browser. The error I got was "cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted." However, this video right here solved my problem: kzbin.info/www/bejne/pKmbdmh4e5WLq6c&ab_channel=dcode I hope this helps out anyone running into the same issues.

[@creativeturbo]

I am 17 and think it is super easy and i can build the same in 10mins

[@mrxtreme005]

What is the software that you used to code in??? Is it visual studio code? Or?

[@dclxviclan]

Cool lesson

[@rafidhoda]

Thanks!!

[@rodrigoservice]

thanks! thanks! thanks! thanks! thanks!

[@rafidhoda]

"you're welcome"x5

[@KumarSahil78]

There is a problem if you don't write anything and simply press add to cart, it still gets pushed to the database with an empty string,so to avoid this you can write like this, addButtonEl.addEventListener("click", function () { let inputValue = inputFieldEl.value; if (inputValue === "") { return; } push(shoppingListInDB, inputValue); clearInputFieldEl(); });

[@rafidhoda]

Yes, you're absolutely right! Thank you so much for sharing :)

[@sundayolaoye713]

Good work! I uploaded my app on netlify it works on desktop but on my android phone it was saying fake site ahead and was blocking it from shown. what should I do?

[@manuelaraujo81]

Also, why did you prefer netlify over firebase hosting?

[@Magicforextrades]

If the same database is used wont the shopping list items be same for all users?

[@benjamindame3879]

I would like to know if what kind of editor he'd used ?

[@samaradel22]

Can I follow this tutorial to build an app for college system that has attendece, and uploading college work and stuff like this ? Like registering for a course ,knowing grades of each subjects , having notifications for important post from the admin / doctors ???

[@anycolouryoulike9160]

When I add to the homescreen the site doesnt look like an app. I still can see the search bar above the app like in a regular browser.

[@Kholturaev06]

During your course I'll never get bored😅

[@rafidhoda]

Wow, really? THanks!

[@paschalkings8184]

this is good

[@rafidhoda]

thank you!

[@MohdImran-oy1yx]

question, when it become like an app my iphone didnt show the keyboard how to fix it ? but i works fine when in safari

[@muadzrosli]

Hi. I just want to share. I think for the input and button font, can use font-family: inherit. Correct me if I’m wrong.

[@rafidhoda]

That's correct! That should definitely work :) Thanks for sharing!

[@Defnotgayforalastor]

Can i usee visual studio cose instead

[@owusuagyei8447]

Awesome

[@rafidhoda]

Awesome

[@enriquedb666]

GOLD!!!!

[@rafidhoda]

THANK YOU!!!

[@southeastofengland]

This is great! One thing: where can we find the bestreads program?

[@rafidhoda]

Thank you! Haha bestreads is something you're going to have to build yourself :)

[@Philbiee]

For 31:52, the lists are writing to the database, but doesn't display on my preview list on the li?

[@qelvinqelvin3097]

That chat gpt part took me out damn!!!😂😂