david94ez, Да, такая ситуация, когда макет только один, распространена. И тем выше ценятся верстальщики, которые умеют сделать хорошо и без макета. На мой взгляд, у вас получилось достаточно гармонично. Можно где-то работать с отступами и шрифтами, но это во многом вопросы вкуса.
Где-то есть недочеты типа как указала постом выше.
Дальше работа над семантикой, доступностью, читаемостью классов, js и подобные усовершенствования.
david94ez, круть! Либо быстро либо первый раз недогрузилась страница.
Следующим ходом проверяйте сайт на всех размерах и во всех актуальных браузерах.
Например,
Наверное, переключалки должны были быть кружочками, а не овальчиками.
А текст видимым.
Но в общем, хорошо.
Можно поправить семантику, заменить бессмысленные картинки на фоны и/или псевдо, перестать закрывать одиночные теги и еще какие-нибудь мелочи.
Ivanushka255, если вы хотите поставить элементы в горизонтальный центр, используйте flex и justify-content: center
Или text-align если дети инлайн/инлайн-блоки.
По какой-то причине это свойство возвращает элемент на его начальное положение.
По причине того, что вы ему так сказали.
parent, как блочный элемент занимает всю ширину своего родителя.
Вы сказали left 50% - ок, блок подвинулся на 50% ширины родителя.
Потом, что его нужно сдвинуть обратно на половину своей ширины.
Но раз ширина одинаковая, то он встал туда где был.
Максим Морев, вы не о том спорите. И все ваши пассажи верные.
Только и через галп можно очевидным образом помечать img, которые нужно обернуть в пикчи. И несомненно именно так и нужно поступать. (Не в смысле галпом, а в смысле очевидности происходящего). А уж выбранный инструмент зависит от целей проекта и что там еще уже используется. Конечно, если там уже есть вью или твиг или еще что-нибудь приятное, то делать это галпом странно.
Популярность плагина, понятно, что низкая. Потому что обычно пикча людям нужна не только ради webp. А вот replace сделает как душе угодно.
Какая разница каким способом добавлять webp в picture, ручками или автоматом (и каким именно "автоматом")? И сами же пишете про компоненты. Это никак не влияет на конечную разметку и стили. Да и какие отдельные стили нужны для webp?
Аzad Kichibekov,
у вас есть несколько вариантов:
1. Ваш - с лишними обертками.
2. Таблицы (в смысле тег table), если это табличные данные.
3. display table (и его дочерние display)
4. display contents для li (осторожно, нарушается доступность, li перестанет восприниматься читалками как li) и display grid для родителя.
5. js
Сложно понять, какого эффекта нужно добиться, но вероятно, так https://jsfiddle.net/aw4kpjs8/
Без текста, раз он мешает: https://jsfiddle.net/3j18o5Lg/
Делается это не абсолютами, а гридами (или флексами) и фонами. Потому что смысла в этих изображениях нет никакого и вставлять их как img не очень хорошее решение.
Где-то есть недочеты типа как указала постом выше.
Дальше работа над семантикой, доступностью, читаемостью классов, js и подобные усовершенствования.
Удачи в развитии.