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

Overview

Embark on a comprehensive tutorial to build a mobile app using HTML, CSS, JavaScript, and Google Firebase. Learn essential web development concepts and Firebase integration as you progress through topics like setting up the app skeleton, adding CSS, working with Firebase Realtime Database, implementing security rules, and manipulating the DOM. Explore advanced techniques such as real-time data fetching, updating, and removing items from the database. Dive into responsive design principles, including flexbox and viewport settings, to create a mobile-friendly interface. Discover how to add favicons, create a web application manifest, and deploy your app to Netlify. By the end of this hands-on tutorial, you'll have the skills to develop, personalize, and share your own mobile web application.

Syllabus

⌨️ Introduction
⌨️ Let's Build a Mobile App with Firebase
⌨️ Setting up app skeleton
⌨️ Adding CSS
⌨️ Aside: Firebase Realtime Database
⌨️ Adding Firebase to project
⌨️ Security Rules
⌨️ innerHTML to append li to ul
⌨️ Refactoring
⌨️ Aside: Turning an Object into an Array
⌨️ Aside: Fetching database items in realtime using onValue
⌨️ Updating items in realtime
⌨️ For loop to render database items
⌨️ Let's smash the bug
⌨️ Aside: Flexbox flex-wrap
⌨️ Aside: Flexbox gap
⌨️ Adding CSS for li to wrap items
⌨️ Getting ID of item in database
⌨️ Replacing innerHTML with createElement
⌨️ Aside: Removing items from Firebase
⌨️ Removing an item when clicked
⌨️ Only fetching items from database if snapshot exists
⌨️ Adding hover styles to buttons
⌨️ Aside: user-select
⌨️ Aside: Setting the viewport
⌨️ Making the app more mobile-friendly
⌨️ Aside: Favicon
⌨️ Adding favicon and phone icons
⌨️ Aside: Web Application Manifest
⌨️ Turning web app into "mobile" app
⌨️ Personalise your app
⌨️ Deploy to Netlify
⌨️ Add app to home screen
⌨️ Share your creation
⌨️ Recap
⌨️ Outro + Credits