За время стажировки тебе предстоит реализовать сервис наподобие Инстаграма.
В index.html ты найдешь основу для верстки. Ты можешь менять её под себя, либо вообще сверстать проект с нуля
Давай разберем основные моменты, чтобы тебе было проще работать с заготовкой, если ты все же решишь ее использовать.
Для скрытия HTML-элементов с помощью display: none используется класс .hidden.
Если же тебе нужно спрятать элемент, сохранив его место в документе (чтобы контент не «прыгал»), используй класс .v-hidden.
В верстке сейчас присутствует три модальных окна:
- Добавление нового поста
.add-post-modal - Просмотр поста
.preview-post-modal - Редактирование пользовательских данных
.edit-bio-modal(повышенный уровень сложности)
По умолчанию модальные окна скрыты. Для показа интересующего тебя модального окна, добавь ему класс .active. (.modal.active в CSS-файле)
При открытии любого модального окна на заднем плане должен появиться темный оверлэй, запрещающий прокрутку.
Для этого добавь класс .with-overlay на body (body.with-overlay в CSS-файле) и класс .active элементу .body-overlay (.body-overlay.active в CSS-файле)
Все модальные окна должны закрываться по клику на внешнюю область (можешь добавить обработчик на оверлэй)
На этом с общими рекомендациями по верстке все — идем дальше 🙂
Перед началом написания кода внимательно ознакомься с критериями.
Куда проще изначально ориентироваться на них, чем потом править весь код проекта в последний момент.
Советую разбить свой код на модули по смыслу.
Так, например, один файл у тебя будет отвечать за добавление постов, а другой — за лайки и комментарии. Меньше кода в одном файле — проще ориентироваться в написанном.
Важные моменты взаимодействия с бэкендом описаны в этой памятке.
Обязательно прочитай ее перед началом работы.
На стажировке ты встретишься с новым для тебя инструментом Swagger. Он очень популярен в айти-компаниях и облегчает общение фротенд- и бэкенд-разработчиков.
Ниже представлено техническое задание, разделенное по неделям для твоего удобства
Четвертая неделя — бонусная. Во время нее ты сможешь доделать что не успела или заняться реализацией дополнительной функциональности вне ТЗ.
P.S. ТЗ охватывает далеко не все возможности бэкенда, так что можешь поисследовать доступное API бэкенда сама, или написать куратору.