Минималистичный сайт-портфолио

HTMLCSSJS

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

Макет

Макет в Figma (Minimalistic Portfolio Template)

📝 Задача

Ваша задача — создать этот многостраничный сайт-портфолио и максимально точно воспроизвести предоставленный дизайн.

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

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

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

1. Нажать на кнопку-призыв к действию "Contact Me" на главной странице, после чего должна открываться страница "Contact".

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

   • Если поля «Имя» или «Адрес электронной почты» не заполнены — отображать сообщение: «Это поле обязательно для заполнения».
   • Если адрес электронной почты указан в неверном формате — отображать сообщение: «Пожалуйста, укажите корректный адрес электронной почты».

3. Сайт должен хорошо выглядеть на любом экране.

4. Видеть состояния при наведении курсора hover и при фокусе focus для всех интерактивных элементов на странице.

💡 Идеи для практики

1. Напишите стили с использованием препроцессора, например Sass, Less или Stylus.
2. Тренируйте внимание к деталям, добиваясь максимального сходства вашего решения с макетом.
3. Попробуйте заранее оценить, сколько времени у вас займёт выполнение проекта. Затем сравните вашу оценку с реальным временем. Умение давать точные оценки — важный, хотя и часто недооцениваемый навык профессиональных разработчиков.

🤔 FAQ

Оставьте ссылки на код, например на GitHub, и на live-просмотр вашего решения в комментариях.

Смотрите решения других участников и спрашивайте совета в комментариях ниже.

Безусловно! Пожалуйста, добавляйте всё, что вы создадите, в своё портфолио. Одна из главных идей создания этой платформы — помочь разработчикам пополнить портфолио профессионально выглядящими проектами!

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

Twep.ru — это сообщество совместного обучения, где каждый может давать друг другу обратную связь. Если вы хотите получить отзывы от сообщества, обязательно задайте конкретный вопрос при отправке своего решения. Чем точнее вы сформулируете свой вопрос, тем выше вероятность получить полезные комментарии от других участников.

Конечно! Наши задания включают профессиональные макеты, но никаких ограничений на используемые инструменты нет. Вы можете использовать всё, что вам нравится, чтобы реализовать проект.