Результаты теста

HTMLCSSJS

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

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

📝 Задача

Вам необходимо сверстать карточку Результатов теста (Results Summary). Левая часть содержит общий балл и оценку, правая — детализацию по категориям (реакция, память, вербальные и визуальные навыки).

Макет

Макет в Figma (results-summary-component)

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

1. Семантика и доступность: Используйте правильные заголовки и списки. Убедитесь, что цветовой контраст соответствует стандартам доступности (A11Y).
2. Работа с JSON: Для тех, кто хочет попрактиковаться в JavaScript, попробуйте не хардкодить данные в HTML, а подгружать их из отдельного файла data.json и рендерить список динамически.

[
  {
    "category": "Reaction",
    "score": 80,
    "icon": "./assets/images/icon-reaction.svg",
    "color": "hsl(0, 100%, 67%)"
  },
  {
    "category": "Memory",
    "score": 92,
    "icon": "./assets/images/icon-memory.svg",
    "color": "hsl(39, 100%, 56%)"
  },
  {
    "category": "Verbal",
    "score": 61,
    "icon": "./assets/images/icon-verbal.svg",
    "color": "hsl(166, 100%, 37%)"
  },
  {
    "category": "Visual",
    "score": 73,
    "icon": "./assets/images/icon-visual.svg",
    "color": "hsl(234, 85%, 45%)"
  }
]

3. Современный CSS: Используйте CSS-переменные для управления цветами категорий. Это позволит легко менять палитру в одном месте, не переписывая все стили.

🤔 FAQ

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

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

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

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

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

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