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
Syllabus
- 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
- 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
- Don't over-use 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
- Want to become a Scrimbassador?
- Solo Project (PRO) - We are the Champions
- How to Utilize Your Certificate