Карточка блога

HTMLCSS

Это задание, использующее только HTML и CSS, идеально подойдёт новичкам, которые хотят освоить основы HTML и CSS, такие как структура HTML-документа и модель блоков (box model).

Макет

Макет в Figma (blog-preview-card)

📝 Задача

Ваша задача — сверстать карточку блога (превью) и сделать её как можно ближе к предоставленному макету.

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

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

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

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

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

🤔 FAQ

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

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

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

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

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

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