Firebase для начинающих: создание мобильного приложения на HTML, CSS и JavaScript

Узнайте, как создать мобильное приложение с помощью HTML, CSS, JavaScript и Google Firebase. Перейдите по этой ссылке, чтобы попробовать интерактивную версию для браузера: https://scrimba.com/learn/firebase ✏️ Этот курс создан Рафидом Ходой, преподавателем Scrimba. Вы можете следить за Рафидом в Твиттере здесь:   / rafidhoda   Мы рекомендуем вам изучить основы HTML, CSS и JavaScript перед прохождением этого курса. 💫 Упомянутые ссылки: 🔗 EpochConverter: https://www.epochconverter.com/ 🔗 Объяснение мета-просмотра от Кевина Пауэлла:    • Get your media queries working with the me...   🛠 Используемые инструменты: 🔗 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/ ⭐️ Код ⭐️ 🔗 Скачать через Scrimba: https://scrimba.com/learn/firebase 🐱 Хотите получить доступ к милым изображениям кошек, используемым в этом курсе? → Найдите в Google Images "Пич и кот Гома". ⭐️ Содержание ⭐️ ⌨️ (0:00:00) Введение ⌨️ (0:01:57) Создадим мобильное приложение с Firebase ⌨️ (0:06:02) Настройка каркаса приложения ⌨️ (0:09:53) Добавление CSS ⌨️ (0:14:16) Примечание: База данных Firebase Realtime Database ⌨️ (0:24:21) Добавление Firebase в проект ⌨️ (0:29:13) Правила безопасности ⌨️ (0:31:46) innerHTML для добавления li к ul ⌨️ (0:35:23) Рефакторинг ⌨️ (0:40:15) Примечание: Преобразование объекта в массив ⌨️ (0:44:28) Примечание: Получение элементов базы данных в реальном времени с помощью onValue ⌨️ (0:54:54) Обновление элементов в реальном времени ⌨️ (0:57:41) Цикл for для рендеринга элементов базы данных ⌨️ (1:00:42) Давайте исправим ошибку ⌨️ (1:03:32) Примечание: Flexbox flex-wrap ⌨️ (1:04:54) Примечание: Flexbox gap ⌨️ (1:06:15) Добавление CSS для li для обертывания элементов ⌨️ (1:10:22) Получение ID элемента в базе данных ⌨️ (1:14:35) Замена innerHTML на createElement ⌨️ (1:19:48) Примечание: Удаление элементов из Firebase ⌨️ (1:25:09) Удаление элемента при нажатии ⌨️ (1:29:22) Получение элементов из базы данных только при наличии снимка ⌨️ (1:33:28) Добавление стилей при наведении курсора на кнопки ⌨️ (1:35:20) Примечание: выбор пользователя ⌨️ (1:37:04) Примечание: Настройка области просмотра ⌨️ (1:38:58) Повышение удобства использования приложения на мобильных устройствах ⌨️ (1:40:35) Примечание: Фавикон ⌨️ (1:42:42) Добавление значков фавикона и телефона ⌨️ (1:43:58) Примечание: Манифест веб-приложения ⌨️ (1:46:39) Превращение веб-приложения в «мобильное» приложение ⌨️ (1:47:40) Персонализация вашего приложения ⌨️ (1:49:10) Развертывание на Netlify ⌨️ (1:51:48) Добавление приложения на главный экран ⌨️ (1:53:44) Поделитесь своим творением ⌨️ (1:55:32) Итоги ⌨️ (1:59:16) Заключение + Благодарности Подписывайтесь на Scrimba на YouTube:    / scrimba   Подписывайтесь на Scrimba в Twitter:   / scrimba   ❤️ Поддержка этого канала осуществляется нашими друзьями из Scrimba — платформы для программирования, которая переосмыслила интерактивное обучение: https://scrimba.com/freecodecamp