Смотреть проект >>> Ссылка на GitHub Pages
Порядок работы над проектом «Свой Pikabu». Часть 1
- Этап 1. «Создание каркаса сайта». Ознакомился с дизайн-макетом в Figma. Сделал HTML-разметку страницы.
- Этап 2. «Верстка постов». Сверстал посты из дизайн-макета.
- Этап 3. «Верстка сайдбара». Сверстал Сайдбар — это такая панель на сайте, обычно справа.
- Этап 4. «Адаптив, JavaScript и публикация сайта». Написал скрипт для сайта. Сделал сайт адаптивным. Опубликовал в GitHub Pages.
Делаем проект «Pikadu на JS» функциональным c использованием FireBase. Часть 2
- Этап 1. «Создание структуры проекта на JavaScript». Получил со страницы необходимые элементы. Реализовал регистрацию и авторизацию (logIn, signUp). Изменил верстку для авторизованного пользователя.
- Этап 2. «Вывод постов». Добавил возможность выходить logOut. Добавил возможность редактировать пользователя editUser. Реализовал вывод постов на страницу.
- Этап 3. «FireBase». Добавил возможность добавлять посты авторизованному пользователю. Подключил в проект FireBase.
- Этап 4. «Завершаем проект». Авторизацию переделал через FireBase. Выполнил отправку постов на сервер и вывод с сервера.
Доработанный мной макет, по которому я верстал мини-сайт: смотреть макет в Figma
Код проекта: смотреть на GitHub
Дата создания статьи: 18.11.2022
Дата последнего обновления проекта: 20.01.2025
Поддержи автора
Надеюсь, эта статья была для вас полезной и интересной. Если вы хотите, чтобы я создавал больше контента и делал это чаще, вы можете поддержать меня донатом. Благодарю вас за ваш вклад в творческий процесс!
Т-Банк (Тинькофф): 2200700867913161
Ozon Bank: 2204240107102131
Boosty: https://boosty.to/woronokin/donate
Личный блог
