via YouTube Free video
Learn how to build a Mobile App with HTML, CSS, JavaScript and Google Firebase. Go here to try the interactive browser-version: https://scrimba.com/learn/firebase
✏️ This course was created by Rafid Hoda, a teacher at Scrimba. You can follow Rafid on Twitter here: https://twitter.com/rafidhoda
We recommend that you learn basic HTML, CSS, and JavaScript before taking this course.
💫 Links mentioned:
🔗 EpochConverter: https://www.epochconverter.com/
🔗 Meta viewport explained by Kevin Powell: https://www.youtube.com/watch?v=SElOdK2qTpI
🛠 Tools used:
🔗 Firebase: https://firebase.google.com/
🔗 Favicon: https://favicon.io/
🔗 Netlify: https://www.netlify.com/
🔗 Figma: https://www.figma.com/
🔗 Google Fonts: https://fonts.google.com/
⭐️ Code ⭐️
🔗 Download via Scrimba: https://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 YouTube: https://www.youtube.com/c/Scrimba
Follow Scrimba on Twitter: https://twitter.com/scrimba
❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp
Some points apply to every course of this kind; see how we rank.
freeCodeCamp is in Tier 3: good universities, respected companies, nonprofits and well-known teachers of our institution ranking (78/100). Free full courses and certifications; practical, but not university-level depth.
This is CS50P, CS50's Introduction to Programming with Python. Register for free at https://cs50.edx.org/python. Slides and source code at https://cs50.harvard.edu/python. Playlist at https://www.youtube.com/playlist?list=PLhQjrBD2T3817j24-GogXmWqO5Q5vYy0V. An introduction to programming using a la…
Instructor: Ana Bell View the complete course: https://ocw.mit.edu/courses/6-100l-introduction-to-cs-and-programming-using-python-fall-2022/ *Note: Lectures 6, 10 have been updated! This subject is aimed at students with little to no programming experience. It aims to provide students with an under…
This is CS50W, CS50's Web Programming with Python and JavaScript. Register for free at https://cs50.edx.org/web. Slides and source code at https://cs50.harvard.edu/web. This course picks up where Harvard University’s CS50 leaves off, diving more deeply into the design and implementation of web apps…
This course explores the concepts and algorithms at the foundation of modern artificial intelligence, diving into the ideas that give rise to technologies like game-playing engines, handwriting recognition, and machine translation. Through hands-on projects, students gain exposure to the theory beh…
This course explores the concepts and algorithms at the foundation of modern artificial intelligence, diving into the ideas that give rise to technologies like game-playing engines, handwriting recognition, and machine translation. Through hands-on projects, students gain exposure to the theory beh…
View the complete course: http://ocw.mit.edu/18-S997F11 Instructor: Yossi Farjoun This course is intended to assist undergraduates with learning the basics of programming in general and programming MATLAB® in particular. License: Creative Commons BY-NC-SA More information at http://ocw.mit.edu/term…
