Ох, и задолбался же я с резиновой вёрсткой за эти дни, друзья! :) Кроме неё, добавил реальных ссылок и кое-где анимацию и плавные переходы.

Причина - в том, что знаний, как сделать резиновую вёрстку, изначально было мало, и, в отличие от HTML/CSS, они ничем не были закреплены. Пожалел, что не пошёл на продвинутый интенсив (не с тем, чтобы сдать или серт получить, а с тем, чтобы увидеть, как это всё делать, и применить у себя).

К сожалению, аж целая неделя ушла на то, чтобы вникать в резину, но не делать реальный результат.

Тем не менее, пользуясь курсами и вопросами к гуглу, таки сделал UX Energy. Осталось сделать интерактивность.

• Слайдеры в секциях мобайл апп и промо (js). Самая обычная прокрутка, в мобайл - прокрутка фонового изображения.
• Слайдер в отзывах (js). Я планирую это сделать так: при нажатии на крайний отзыв он переплывает влево/вправо (в зависимости от того, левый крайний он или правый крайний), а его прежнее место занимает отзыв, который был крайним с противоположной стороны. То есть, это будет нечто вроде бесконечной прокрутки списка отзывов.
• Видео. Пока не работает, надо доделать.

Список курсов и статей, которые я использовал для резинового макета:

1. Пример резинового списка с картинками
2. Responsive nav menu using only CSS
3. Просто справочная информация по video
4. Высота блока относительно его ширины (как по мне, способ не очень, ибо лишние псевдоэлементы, но может кому пригодится)
5. Кнопка play/pause для видео (именно то, что пока у меня не получилось)
6. Основной курс респонзива, который я смотрел на udemy
7. Резиновая вёрстка 1 (несмотря на то, что на флоатах она, новичку вроде меня может быть полезно)
8. Резиновая вёрстка 2, или Что делать с колонками в сетке
9. Курс адаптива, как я понял, краткая "выжимка" по частям - части раз, два, три

Отчасти - получилось хорошо, мне нравится. Отчасти - от недостатка опыта - получилось не очень. Например, взять главную навигацию и меню в футере: у меня никак не получалось сделать их в процентах - благодаря ul, которые никак не хотят растягиваться во флексе на всё свободное место, несмотря на flex-grow. Некоторые секции и места - например, в фичах и отзывах - оставил как есть, во-первых от отсутствия представления, что должно с ними происходить при изменении масштаба, а во-вторых, "от греха подальше" (тем более что эти секции и так неплохо смотрятся). В итоге - получился некий "гибрид" вёрстки. Мне кажется, много на это повлиял изначальный фиксированный вариант, так как задача была "переделать" фиксированный вариант под резину. Несмотря на отчаянный гуглёж, я пока что не смог сделать лучше, если это возможно - ВОЗМОЖНО ЛИ?

Кстати, во время гугления о процентах, em'aх и медиазапросах пришёл к выводу, что уж лучше сразу переходить к респонзиву и адаптиву, но не ограничиваться полумерами в виде гибридной (как у меня) верстки просто с "растягиванием" блоков.

В связи с этим есть вопрос и просьба.

ВОПРОС: ЕСЛИ ВАМ ПОПАДАЕТСЯ МАКЕТ, СДЕЛАННЫЙ ПОД ФИКСИРОВАННУЮ ШИРИНУ, А ВАС ПРОСЯТ СДЕЛАТЬ ПО НЕМУ РЕЗИНОВУЮ ВЕРСТКУ ИЛИ АДАПТИВ - КАКОВЫ ВАШИ ДЕЙСТВИЯ? КАК ИМЕННО ИСПРАВЛЯЕТЕ? КАК ПЛАНИРУЕТЕ ШИРИНЫ, ВЫСОТЫ, ПОВЕДЕНИЕ БЛОКОВ И ЭЛЕМЕНТОВ? ИЛИ НЕ СВЯЗЫВАЕТЕСЬ ВООБЩЕ (ОЖИДАЯ ВАРИАНТОВ МАКЕТА ДЛЯ ВСЕХ УСТРОЙСТВ И ШИРИН ИЛИ ДЕЛАЕТЕ ДЛЯ ОДНОГО ТИПА УСТРОЙСТВА, ЕСЛИ ЕСТЬ МАКЕТ ТОЛЬКО ДЛЯ НЕГО)?

ПРОСЬБА: ЕСЛИ КТО СЛЕДИТ И РЕВЬЮИТ МОИ ПРОЕКТЫ - МОЖЕТЕ ПОГЛЯДЕТЬ, УКАЗАТЬ НА ОШИБКИ, ПОДЕЛИТЬСЯ BEST PRACTICES ПО ПРИМЕНЕННЫМ МНОЙ РЕШЕНИЯМ?

Кстати. Это был первый макет, свёрстанный мной резиново. Век живи - век учись! :)