Учебный макет для начинающих
Всем привет! В рамках текущего обучающего проекта по персональному менторству буду периодически публиковать посты с учебными задачами различного уровня сложности. Моя цель - предоставить вам возможность попрактиковаться в выполнении задач, максимально приближенных к реальной работе фронтендера, после выполнения которых, напоминаю, вы можете запросить от меня код-ревью, чтобы определить в ваших навыках разработчика слабые места, которые следует проработать.
Материал буду стараться отбирать качественный, но если будут присутствовать недочеты (кривой слой в макете, разные отступы у одинаковых элементов, некорректно выгружаемая иконка, внезапно переставшее работать API), то прошу отнестись с пониманием, т. к. всю информацию, в частности макеты, я беру из публичного доступа, дизайнеры бывают ошибаются, а найти идеально выполненный макет очень сложно, потому прошу критически оценивать каждую проблему, если с подобным столкнётесь.
Начнём с простого - макет лендинга доставки еды на 7 секций:
Начальное ТЗ максимально простое: сверстать десктопную версию сайта по макету.
Возможные улучшения (в порядке увеличения сложности):
- адаптивная мобильная версия;
- реализация компонента 'BurgerButton' и 'MobileOverlay' (меню навигации в шапке, открывающееся по клику на бургер-кнопку в шапке, которая появляется на узких экранах устройств);