Build your first mobile app using HTML, CSS and JavaScript + Firebase. Firebase is a magical database service that lets you easily make realtime apps.
Overview
COURSE DIFFICULTY
Skills Learned
After completing this online training course, students will be able to:
import
Firebase: initializeApp
Firebase: getDatabase
Firebase: reference
Firebase: push
Firebase: onValue
Firebase: snapshot
Firebase: remove
IDs
Object → Array
createElement
Flexbox: flex-wrap
Flexbox: gap
user-select
Setting the viewport
Favicon
Web Application Manifest
01. Build a Mobile App with Firebase
- 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
- Personalize Your App
- Deploy to Netlify
- Add App to Home Screen
- Share Your Creation
- Recap
- Solo Project (PRO) – We Are the Champions
SKILLS LEARNED
Skills Learned
After completing this online training course, students will be able to:
import
Firebase: initializeApp
Firebase: getDatabase
Firebase: reference
Firebase: push
Firebase: onValue
Firebase: snapshot
Firebase: remove
IDs
Object → Array
createElement
Flexbox: flex-wrap
Flexbox: gap
user-select
Setting the viewport
Favicon
Web Application Manifest
COURSE OUTLINE
01. Build a Mobile App with Firebase
- 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
- Personalize Your App
- Deploy to Netlify
- Add App to Home Screen
- Share Your Creation
- Recap
- Solo Project (PRO) – We Are the Champions
