fm recipe page

Наставник Frontend - Рецепт

Это решение проблемы страницы рецепта на наставнике Frontend. ПРОБЛЕМЫ FRONDENT MEDUTR помогут вам улучшить свои навыки кодирования, создавая реалистичные проекты.

Оглавление

• Обзор
  • Задача
  • Скриншот
  • Ссылки
• Мой процесс
  • Построен с
  • Что я узнал
  • Продолжение развития
  • Полезные ресурсы
• Автор
• Благодарности

Обзор

Задача

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

• JPEG Design Files для мобильных и настольных макетов
• Руководство по стилю для шрифтов, цветов и т. Д.
• Оптимизированные активы изображения
• Переменные и статические файлы шрифтов
• HTML-файл с предварительно написанным содержимым

Скриншот

Ссылки

• Фронтальное наставное решение
• Репозиторий GitHub
• Живой сайт

Мой процесс

Построен с

• Semantic Html5
• CSS пользовательские свойства
• Мобильный первый рабочий процесс

Что я узнал

Это решение включает в себя три вещи, которые были для меня новыми:

• Маркеры списка стиля
• Стилирование HTML -таблиц
• Использование медиа -запросов

Страница рецепта содержит два неупорядоченных списка со временем подготовки и ингредиентами, соответственно, и упорядоченным списком с инструкциями.

Для упорядоченного списка я назвал счетчики, используя псевдо-элемент ::marker

. instructions li :: marker {
  font-weight : 700 ;
  color : var ( --brown-800 );
}

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

. unordered {
  list-style : none;
  padding-left : 0 ;
}

. unordered li {
  display : flex;
  align-items : center;
  gap : 1.75 rem ;
  padding-left : 0.25 rem ;
}

. unordered li :: before {
  content : "•" ;
  font-weight : 700 ;
}

Для лучшей доступности я использовал role="list" в элементах <ul> в HTML. Без него, list-style: none не заставит браузер Safari больше не распознавать списки в дереве доступности, а читатель экрана больше не будет объявлять информацию, такую ​​как количество элементов.

Продолжение развития

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

Полезные ресурсы

• Творческий стиль списка Мишель Баркер для web.de - эта статья помогла мне выяснить, как стилизовать маркеры списка как для упорядоченных, так и для неупорядоченных списков.
• Стильные таблицы на MDN - эта статья является хорошим освежением для базовых методов стиля таблицы.

Автор

• Frontend Mentor - @sabineemden
• Мастодон - @sabineemden

Благодарности

В этом проекте используется CSS -сброс Джоша Комо.

Семьи шрифтов, используемые в этом проекте, являются молодыми засечками и одеждой. Шрифты лицензированы по открытой лицензии на шрифт.