Frontend Mentor: практика frontend-разработки и примеры

После учебника кнопка получается. После первого настоящего макета возникают вопросы: почему карточки разъезжаются, куда поставить меню на телефоне, как показать ошибку формы и что считать готовым результатом? Frontend Mentor помогает перейти от отдельных упражнений к законченной работе. Разберём, как использовать такую практику с пользой, а затем потренируемся на собственных примерах прямо здесь.

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

Что даёт Frontend Mentor и чего ждать от практики

Frontend Mentor — площадка с заданиями, которые предлагают реализовать интерфейс по дизайну или требованиям. На ней есть решения участников, сообщество и автоматические проверки с помощью ИИ. Набор возможностей зависит от плана: доступны бесплатные задания и дополнительные возможности Pro. Перед началом смотрите условия конкретного проекта на официальном сайте.

Ценность такого формата — в самостоятельных решениях. В видео преподаватель уже выбрал структуру, назвал классы и нашёл ошибку. Здесь нужно самому понять, какие части повторяются, где хватит HTML и CSS, а где понадобится состояние. Вы тренируете не только синтаксис, но и умение довести небольшую задачу до понятного результата.

Учебный проект полезно рассматривать как работу по договорённости. Есть цель, ограничения, ожидаемое поведение и проверка. При этом он не воспроизводит все условия коммерческой разработки: согласования, поддержку старого кода, реальные данные и ответственность перед заказчиком. Завершённый макет показывает навык, но сам по себе не гарантирует трудоустройство.

Как выбрать задание, которое получится закончить

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

На Frontend Mentor есть учебные маршруты по адаптивной вёрстке, JavaScript, доступности, фреймворкам и другим темам. Используйте их как ориентир, если трудно выбрать последовательность. Для собственного плана достаточно записать: «что уже умею», «что проверю в этом проекте» и «какой результат покажу».

До старта прочитайте требования, посмотрите варианты экранов и состав материалов. Уточните, какие ресурсы доступны вашему плану. Не начинайте с поиска готового решения: сначала набросайте свою структуру. Когда есть собственная попытка, чужой подход становится материалом для сравнения, а не единственным способом двигаться дальше.

Объём можно ограничить результатом: одна карточка с устойчивым содержимым, страница с мобильным меню или форма со всеми сообщениями. Запишите критерии завершения заранее. «Красиво смотрится» трудно проверить; «три карточки на широком экране, одна на узком, длинный текст не создаёт горизонтальную прокрутку» уже даёт конкретную цель.

Рабочий процесс: от задания до готовой страницы

1. Разберите содержание. Выпишите заголовки, изображения, поля, действия и сообщения. Отметьте повторяющиеся части и порядок чтения.
2. Соберите HTML. Сначала сделайте понятную структуру без декоративных эффектов. Проверьте, что ссылка ведёт на страницу, а кнопка выполняет действие.
3. Настройте размеры и сетку. Затем добавьте типографику, цвета и отступы. Исправляйте общую систему, прежде чем подгонять отдельный элемент.
4. Добавьте поведение. Реализуйте расчёт, выбор, проверку формы или меню. Обработайте пустые и неверные значения.
5. Проверьте и опубликуйте. Пройдите сценарии мышью и клавиатурой, откройте страницу на телефоне, подготовьте описание решения.

Работайте небольшими изменениями. После HTML сохраните первую версию, после сетки — следующую, после поведения — ещё одну. Если новая правка сломает результат, будет понятно, где искать причину. Полезны содержательные сообщения в истории: «добавлена проверка отрицательного количества» объясняет изменение лучше, чем «исправления».

Для первых задач можно использовать HTML5, CSS и обычный JavaScript; для сетки — Bootstrap 5. Фреймворк стоит брать, когда вы понимаете, какую часть он упрощает. Frontend Mentor разрешает выбирать инструменты реализации; это указано в FAQ платформы. Не тратьте всю практику на настройку сборки, если цель — научиться устойчивой вёрстке.

Для быстрого исследования блоков пригодится наш конструктор страниц Bootstrap 5. После сборки всё равно разберите получившийся код. Умение объяснить, почему выбран именно этот контейнер и как меняется сетка, полезнее одного скачанного шаблона.

Авторская мастерская: три задачи для проверки навыков

Ниже можно познакомиться с распространёнными сценариями и увидеть результат без отдельной настройки проекта. Начните с карточек, затем изучите расчёт и форму. Используйте мастерскую как ориентир: повторите выбранный пример самостоятельно, измените содержание и проверьте, какие допущения перестали работать.

В режиме «Задание» прочитайте цель и критерии. В «Рабочем примере» изучите результат, а в «Коде» разберите реализацию. Переключайте ширину предпросмотра между 320, 390, 768 и 1024 пикселями, затем сравните с полной шириной. Это меняет область примера; саму страницу на телефоне тоже стоит проверить. Отмечайте пункты локального списка только после собственного прохождения: галочка фиксирует вашу проверку и не является автоматической оценкой навыка.

Карточки: одинаковая структура, разное содержание

Проверяйте не только первый аккуратный текст. Сделайте один заголовок длиннее, описание короче, поменяйте порядок карточек. Смысл упражнения — сохранить понятную иерархию и удобное действие. Для самостоятельной версии можно взять такой каркас; изображение здесь декоративное, поэтому у него пустой alt.

<article class="practice-card">
  <img src="preview.svg" alt="" width="640" height="360">
  <h3>Практика адаптивной вёрстки</h3>
  <p>Соберите карточку и проверьте её с длинным текстом.</p>
  <a href="./lesson.html">Открыть упражнение</a>
</article>

Расчёт: число на выходе должно иметь смысл

Поменяйте количество и цену, затем попробуйте очистить поле или ввести отрицательное значение. Интерфейс должен различать допустимый ноль и отсутствие числа. Успешный результат должен показывать, что именно посчитано, а ошибка — подсказывать, какое поле исправить. Ниже разберём небольшую функцию без привязки к оформлению.

Форма: сначала ошибки, потом подтверждение

Отправьте форму пустой, с неправильным email и с корректными данными. В учебном примере отправка демонстрирует состояние интерфейса; она не заменяет сервер и не должна создавать впечатление доставленного письма. В собственной реализации отдельно решите, куда уходят данные и что произойдёт при недоступности сервера.

В скачиваемом проекте — наши примеры и инструкция запуска. Официальные материалы платформы в архив не включены: условия распространения стартового кода и дизайнов описаны в лицензии Frontend Mentor. Такое разделение позволяет самостоятельно менять упражнения и использовать исходники нашего стенда.

Адаптивность: проверяйте содержание, а не две картинки

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

В простой сетке карточек можно обойтись автоматическим распределением колонок. Следующий CSS относится к контейнеру .practice-grid с карточками из предыдущего примера. Ограничение через min(100%, 15rem) позволяет колонке сжаться вместе с очень узким контейнером; min-width: 0 и перенос длинных слов защищают содержание от типичного переполнения.

.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}
.practice-card { min-width: 0; overflow-wrap: anywhere; }
.practice-card img { display: block; width: 100%; height: auto; }
.practice-card a:focus-visible { outline: 3px solid #155e63; outline-offset: 3px; }

auto-fit помогает разместить доступное число колонок, а minmax задаёт пределы их ширины. Подробный синтаксис есть в документации MDN о колонках Grid. В Bootstrap похожая задача решается классами сетки; используйте один понятный подход для конкретного блока.

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

Состояния и данные: здесь часто прячутся ошибки

Любое действие имеет несколько исходов. Расчёт может быть готов, поля — пустыми, значение — неверным. Форма может ждать ввода, показывать ошибку, отправляться или завершиться сбоем. Выпишите эти состояния отдельно: тогда «что делать после клика» перестанет быть догадкой в обработчике.

Для учебного расчёта количества на цену используйте отдельную функцию. Передавайте ей числовые значения, например input.valueAsNumber. Пустое числовое поле не должно незаметно превращаться в ноль. null ниже означает, что результата нет; допустимый результат 0 остаётся числом.

function calculateTotal(quantity, unitPrice) {
  if (!Number.isFinite(quantity) || !Number.isFinite(unitPrice)) return null;
  if (quantity < 0 || unitPrice < 0) return null;
  const total = quantity * unitPrice;
  if (!Number.isFinite(total)) return null;
  const tolerance = Number.EPSILON * Math.max(1, total);
  const rounded = Math.round((total + tolerance) * 100) / 100;
  return Number.isFinite(rounded) ? rounded : null;
}

Это пример для небольших учебных сумм. Небольшая относительная поправка учитывает погрешность двоичных дробей: например, 2.5 × 19.99 должно дать 49.98 после округления до сотых. В финансовой системе отдельно проектируют единицы хранения денег, округление и предельные значения. Даже здесь проверьте обычную пару, ноль, дробное количество, отрицательное число и отсутствие значения. Отделённая функция проверяется независимо от цвета кнопки и расположения панели.

Для формы начните с нативных полей, подписей и ограничений. Этот пример использует обязательное имя и email. role="status" нужен для сообщения о результате; реальная ошибка конкретного поля должна оставаться связанной с этим полем.

<form id="practice-form">
  <label for="practice-name">Имя</label>
  <input id="practice-name" name="name" autocomplete="name" required maxlength="80">
  <label for="practice-email">Email</label>
  <input id="practice-email" name="email" type="email" autocomplete="email" required>
  <button type="submit">Проверить учебную заявку</button>
  <p id="practice-status" role="status"></p>
</form>

Подключите обработчик после HTML формы. Он проверяет поля и показывает честное подтверждение без сетевой отправки. textContent выводит текст, не интерпретируя введённое имя как HTML.

const form = document.querySelector("#practice-form");
const status = document.querySelector("#practice-status");
form.addEventListener("input", () => { status.textContent = ""; });
form.addEventListener("submit", (event) => {
  event.preventDefault();
  if (!form.checkValidity()) { form.reportValidity(); return; }
  const name = form.elements.namedItem("name").value.trim();
  if (!name) {
    status.textContent = "Укажите имя, а не только пробелы.";
    form.elements.namedItem("name").focus();
    return;
  }
  status.textContent = `${name}, поля проверены. Это учебный пример: данные не отправлены.`;
});

Если добавляете анимацию, предусмотрите спокойный вариант для prefers-reduced-motion. Движение не должно быть единственным сигналом успеха. Проверяйте форму клавиатурой: понятен ли порядок фокуса, видно ли выделение и можно ли исправить ошибку, не возвращаясь в начало страницы.

Как проверить решение и получить полезный разбор

Проверяйте по сценарию, а не по общему впечатлению. Откройте страницу заново, пройдите основной путь, затем намеренно нарушьте условия. Увеличьте текст, очистите поле, отключите сеть там, где есть запрос, нажмите кнопку повторно. Записывайте наблюдаемую проблему вместе с условиями её появления.

Для диагностики используйте руководство по Chrome DevTools: в Elements ищите причину переполнения, в Console — ошибки выполнения, в Network — неудачные запросы. Эмуляция телефона помогает проверить размеры; настоящее устройство дополнительно показывает работу касания, клавиатуры и адресной панели.

Просите разбор конкретного решения: «при длинном заголовке кнопки стоят на разной высоте; стоит ли разделить области карточки?» полезнее, чем «оцените мой сайт». Покажите ссылку на работающую версию, участок кода, ожидаемое поведение и свои попытки. Человеку будет проще воспроизвести проблему и предложить обоснованную правку.

Обратная связь сообщества не гарантирована по срокам и объёму. Автоматический разбор тоже полезнее воспринимать как список гипотез для проверки. Сначала воспроизведите замечание, затем сопоставьте его с требованиями. Если рекомендация улучшает внешний вид, но ломает клавиатуру, нужна другая реализация. Исправление завершается повторным прохождением сценария.

Как превратить упражнение в понятный проект портфолио

Портфолио должно показывать результат и ход решения. Добавьте работающую демонстрацию, репозиторий, снимки разных экранов и короткое описание задачи. Расскажите, что реализовано, какие состояния проверены и какое решение вы приняли самостоятельно. Честно обозначайте учебное происхождение проекта.

Согласно FAQ Frontend Mentor, выполненные проекты можно показывать в портфолио. При публикации соблюдайте атрибуцию и условия выбранного задания. Самостоятельная работа и материалы платформы имеют разные условия использования; ссылка на источник задания помогает это различить.

В README полезны пять ответов: что делает страница, как запустить её локально, чем она собрана, как проверить ключевые сценарии и что осталось улучшить. Если требуется сборка, укажите команды и версию среды. Если достаточно статических файлов, объясните способ запуска через локальный сервер. Проверьте инструкцию в новой папке.

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

Проверка перед публикацией и следующий шаг

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

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

После этого выберите подходящий проект в каталоге Frontend Mentor и пройдите весь цикл. Запишите главный навык следующей работы и один вопрос, на который хотите ответить. Так практика превращается в последовательное развитие, а законченные страницы — в проверяемые свидетельства вашего опыта.