Постер в швейцарском стиле

HTMLCSS

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

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

Референсы

Для вдохновения изучите работы Йозефа Мюллер-Брокманна или Вима Краувела. Основные черты: шрифт без засечек (Helvetica/Arial), сильная иерархия и много свободного пространства.

Макет

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

📝 Задача

Ваша задача — сверстать постер, используя CSS Grid. Макет должен состоять из четких колонок и рядов, где элементы могут занимать сразу несколько ячеек.

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

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

🤔 FAQ

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

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

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

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

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

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