Профиль в Инсте

HTMLCSS

Создание страницы профиля социальной сети — это классическая задача на проверку умения работать с комбинированными раскладками. Здесь необходимо гармонично сочетать гибкие контейнеры (Flexbox) для шапки профиля и жесткую модульную сетку (Grid) для галереи публикаций.

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

Макет

Ссылка на макет в Figma (Instagram Mockup/Template)

📝 Задача

Вам необходимо сверстать адаптивную копию страницы личного профиля. Основное внимание следует уделить двум зонам:

1. Шапка профиля: Аватар, статистика (публикации, подписчики, подписки), имя и био. Используйте Flexbox для выравнивания элементов.
2. Сетка публикаций: Галерея изображений в формате 3х3. Используйте CSS Grid для создания идеальных квадратов и управления отступами.

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

1. Технологический стек: Вы можете использовать любые технологии для выполнения задания: CSS-препроцессоры (Sass/Less), современные фреймворки (Tailwind CSS) или методологию БЭМ.
2. Гибкость реализации: «Пиксель-перфект» не является обязательным требованием, но приветствуется. Вы имеете полное право на творческие эксперименты в рамках предложенного стиля.
3. Интерактивность: Попробуйте реализовать эффект hover при наведении на публикацию (появление иконок лайков и комментариев) или открытие изображения в модальном окне при клике.
4. Адаптивность: Настройте сетку так, чтобы на мобильных устройствах количество колонок уменьшалось, а элементы шапки перестраивались в вертикальный стек.

🤔 FAQ

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

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

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

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

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

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