todo app frontend mentor

Frontend Mentor - приложение Todo

Добро пожаловать!

Спасибо за проверку этого фронтального задания кодирования.

Проблемы наставника Frontend позволяют вам улучшить свои навыки в реальном рабочем процессе.

Чтобы выполнить этот вызов, вам нужно хорошее понимание HTML, CSS и JavaScript.

Задача

Ваша задача состоит в том, чтобы создать это приложение Todo и привести его как можно ближе к дизайну.

Вы можете использовать любые инструменты, которые вам нравятся, чтобы помочь вам выполнить задачу. Так что, если у вас есть что -то, что вы хотели бы практиковать, не стесняйтесь попробовать.

Ваши пользователи должны иметь возможность:

• Просмотреть оптимальный макет для приложения в зависимости от размера экрана их устройства
• Смотрите состояния наклона для всех интерактивных элементов на странице
• Добавить новый Todos в список
• Марк Тодос как полный
• Удалить Todos из списка
• Фильтр по всем/активным/полным Todos
• Очистите все завершенные Todos
• Переключить свет и темный режим
• Бонус : перетаскивать, чтобы переупорядочить элементы в списке

Хотите поддержать вызов? Присоединяйтесь к нашему сообществу Slack и задайте вопросы в канале #Help .

Где все найти

Ваша задача состоит в том, чтобы построить проект в проектах внутри папки /design . Вы найдете как мобильный, так и настольная версия дизайна для работы.

Конструкции в статическом формате JPG. Это будет означать, что вам нужно будет использовать свое лучшее суждение для таких стилей, как font-size , padding и margin . Это должно помочь обучить ваш взгляд на восприятие различий в пространствах и размерах.

Если вам нужны файлы проектирования (мы предоставляем версии Sketch & Figma), чтобы более подробно проверить дизайн, вы можете подписаться в качестве Pro -член.

Вы найдете все необходимые активы в папке /images . Активы уже оптимизированы.

Существует также файл style-guide.md , который содержит необходимую информацию, такую ​​как цветовая палитра и шрифты.

Создание вашего проекта

Не стесняйтесь использовать любой рабочий процесс, с которым вы чувствуете себя комфортно. Ниже приведен предложенный процесс, но не чувствуете, что вам нужно следовать этим шагам:

1. Инициализируйте свой проект как общественный репозиторий на GitHub. Это облегчит обмену вашим кодом с сообществом, если вам нужна помощь. Если вы не уверены, как это сделать, прочитайте этот ресурс Try Git.
2. Настройте свой репозиторий, чтобы опубликовать свой код на URL. Это также будет полезно, если вам нужна помощь во время вызова, так как вы можете поделиться URL -адресом для вашего проекта с помощью URL -адреса. Есть несколько способов сделать это, но мы рекомендуем использовать Vercel. У нас есть больше информации о развертывании вашего проекта с Vercel ниже.
3. Посмотрите на проекты, чтобы начать планирование того, как вы будете заниматься проектом. Этот шаг имеет решающее значение, чтобы помочь вам заранее подумать о классах CSS, которые вы могли бы создать для создания повторно используемых стилей.
4. Прежде чем добавить какие -либо стили, структурируйте свой контент с помощью HTML. Сначала написание HTML может помочь сосредоточить ваше внимание на создании хорошо структурированного контента.
5. Запишите базовые стили для вашего проекта, в том числе общие стили контента, такие как font-family и font-size .
6. Начните добавлять стили в верхнюю часть страницы и работать. Переходите к следующему разделу, только после того, как вы довольны, вы закончили область, над которой вы работаете.

Развертывание вашего проекта

Как упомянуто выше, есть несколько способов бесплатно размещать ваш проект. Мы рекомендуем использовать Vercel, так как это удивительный сервис, и он очень прост в настройке. Если вы хотите использовать Vercel, вот несколько шагов для начала:

1. Зарегистрируйтесь в Vercel и пройдите через поток адаптации, гарантируя, что ваша учетная запись GitHub подключена, используя их Vercel для интеграции GitHub.
2. Подключите свой проект к Vercel со страницы «Импорт проекта», используя кнопку «От репозитория GIT» и выбрав проект, который вы хотите развернуть.
3. После подключения, каждый раз, когда вы git push , Vercel создаст новое развертывание, а URL -адрес развертывания будет отображаться на вашей панели панели. Вы также получите электронное письмо для каждого развертывания с URL.

Делясь своим решением

Есть несколько мест, где вы можете поделиться своим решением:

1. Отправьте его на платформе, чтобы другие пользователи увидели ваше решение на сайте. Вот наше «Полное руководство по отправке решений», чтобы помочь вам сделать это.
2. Поделитесь своей страницей решения в канале #готовых проектов сообщества Slack.
3. Tweet @Frontendmentor и упомяните @Frontendmentor, включая репо и живые URL -адреса в твите. Мы хотели бы взглянуть на то, что вы построили, и помочь поделиться этим.

Давая отзыв

Отзывы всегда приветствуются, поэтому, если вам нужно, чтобы выделили этот вызов, пожалуйста, отправьте электронное письмо по электронной почте HI [AT] Frontendor [DOT] IO.

Эта задача совершенно бесплатна. Пожалуйста, поделитесь этим со всеми, кто найдет это полезным для практики.

Получайте удовольствие!

Спонсоры сообщества

Большое спасибо нашим спонсорам сообщества!

• Zero to Mastery - это невероятный учебный ресурс для всех вещей веб -разработки. Во главе с Андреем Неагои курсы представляют собой действительно качественный контент и охватывают широкий спектр востребованных навыков.
• Diversify Tech - это удивительный ресурс для недопредставленных людей в технологии. На сайте есть списки вакансий для тех, кто ищет новые возможности. Раздел ресурсов также полон полезных ссылок на погружение!
• Triplebyte - это действительно хорошее предложение, если вы ищете новую роль. Это бесплатный сервис, который позволяет вам пройти конфиденциальную тест. Основываясь на ваших результатах, компании будут предлагать вам свои вакантные роли!