This course teaches how to build a Mobile App using HTML, CSS, JavaScript, and Google Firebase. The learning outcomes include setting up app structure, adding CSS, integrating Firebase Realtime Database, updating items in real-time, and deploying the app to Netlify. Tools covered are Firebase, Favicon, Netlify, Figma, and Google Fonts. The teaching method involves practical coding sessions with step-by-step guidance. The intended audience is beginners with basic knowledge of HTML, CSS, and JavaScript looking to create mobile apps with Firebase integration.
Overview
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
Taught by
freeCodeCamp.org
