Linktree

HTMLCSS

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

Макет

Макет в Figma (Links - UI Design)
Сайт Vyshnav Gangadharan (Пример страницы вживую)

📝 Задача

Ваша задача — сверстать профиль со ссылками на социальные сети, чтобы он выглядел максимально близко к предоставленному макету.

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

Откройте макет у себя. На странице Design вы найдете дизайны для настольной и мобильной версий. На странице Components вы найдете ховер-эффекты и иконки.

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

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

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

1. Персонализируйте проект: добавьте свою информацию, свои ссылки на социальные сети, свои цвета.
2. Сосредоточьтесь на написании семантического HTML-кода, используя правильные элементы в соответствии с содержанием.
3. Убедитесь, что посетители могут перемещаться по ссылкам, используя только клавиатуру.
4. Тренируйте внимание к деталям, добиваясь максимального сходства вашего решения с макетом.

🤔 FAQ

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

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

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

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

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

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