easybank landing page

Frontend Mentor - целевая страница EasyBank

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

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

ПРОБЛЕМЫ FRONDENT MEDUTR помогут вам улучшить свои навыки кодирования, создавая реалистичные проекты.

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

Задача

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

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

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

• Посмотреть оптимальный макет для сайта в зависимости от размера экрана их устройства
• Смотрите состояния наклона для всех интерактивных элементов на странице

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

Где все найти

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

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

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

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

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

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

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

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

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

Как упомянуто выше, есть много способов разместить ваш проект бесплатно. Наши рекомендуемые хозяева:

• GitHub Pages
• Вертел
• NetLify

Вы можете размещать свой сайт, используя одно из этих решений или любого из наших других доверенных провайдеров. Узнайте больше о наших рекомендуемых и доверенных хозяевах.

Создайте пользовательский README.md

Мы настоятельно рекомендуем перезаписать этот README.md с пользовательским. Мы предоставили шаблон внутри файла README-template.md в этом стартере.

Шаблон предоставляет руководство для того, чтобы добавить. Пользовательский README поможет вам объяснить ваш проект и подумать о ваших знаниях. Пожалуйста, не стесняйтесь редактировать наш шаблон столько, сколько вам нравится.

После того, как вы добавили свою информацию в шаблон, удалите этот файл и переименуйте файл README-template.md в README.md . Это заставит его отображаться как файл Readme вашего репозитория.

Отправив ваше решение

Отправьте свое решение на платформе для остальной части сообщества. Следуйте нашему «Полному руководству по отправке решений» для советов о том, как это сделать.

Помните, что если вы ищете отзывы о своем решении, обязательно задавайте вопросы при его отправке. Чем более конкретный и подробный вы со своими вопросами, тем выше вероятность того, что вы получите ценные отзывы от сообщества.

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

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

1. Поделитесь своей страницей решения в канале #готовых проектов сообщества.
2. Tweet @Frontendmentor и упомяните @Frontendmentor , включая репо и живые URL -адреса в твите. Мы хотели бы взглянуть на то, что вы построили, и помочь поделиться этим.
3. Поделитесь своим решением на других социальных каналах, таких как LinkedIn.
4. Блог о вашем опыте создания вашего проекта. Написание о вашем рабочем процессе, техническом выборе и обсуждение вашего кода - это блестящий способ укрепить то, что вы узнали. Отличные платформы для написания Dev.to, Hashnode и Codenewbie.

Мы предоставляем шаблоны, чтобы помочь вам поделиться вашим решением, как только вы отправите его на платформу. Пожалуйста, отредактируйте их и включите конкретные вопросы, когда вы ищете отзывы.

Чем конкретно вы находитесь со своими вопросами, тем более вероятно, что другой член сообщества даст вам отзывы.

Есть отзывы для нас?

Мы любим получать отзывы! Мы всегда стремимся улучшить наши проблемы и нашу платформу. Так что, если у вас есть что -то, что вы хотели бы упомянуть, пожалуйста, напишите HI [AT] Frontendor [DOT] IO.

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

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