Газетная полоса

HTMLCSS

До появления CSS Grid создание многоколоночных газетных макетов было настоящей головной болью для разработчиков. Сегодня же это отличный способ научиться управлять пространством и выравниванием.

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

Макет

Макет в Figma (Design History: Swiss Design)

📝 Задача

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

Технические требования:

• Семантика: Используйте теги <header>, <main>, <article>, <section> и <footer>.
• CSS Grid: Постройте общую сетку страницы.
• Многоколоночность: Для длинных текстовых блоков внутри статей попробуйте свойство column-count.
• Адаптивность: Сделайте так, чтобы на узких экранах (мобильных) колонки выстраивались друг под другом.

🤔 FAQ

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

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

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

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

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

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