От макета — к работающему интерфейсу

Попробуйте подход на трёх задачах

Сначала соберите собственное решение. Затем сравните поведение с примером и проверьте результат по понятным критериям.

Свой код ·
Своя практика

Выберите упражнение

3 самостоятельных задания

Начальный · 30–60 минут

Адаптивные карточки

Сетка услуг, которая сохраняет порядок и читаемость на разных экранах.

Посмотрите, как это работает

Пример в отдельном окне: его CSS не влияет на статью.

Измените ширину и проследите, как три колонки превращаются в две, затем в одну.

От примера — к своему решению

01

Соберите первую версию

Сначала структура и работающие состояния. Используйте собственный текст и не пытайтесь повторить чужой макет до пикселя.

02

Проверьте поведение

Телефон, длинный текст, пустые поля, ошибочные значения и клавиатура. Исправьте то, что мешает пользоваться интерфейсом.

03

Покажите результат

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