• Медиазапрос применяется только для мобильных, а на другие разрешения почему-то не применяется?

    @Hatvis
    Укажите в html, внутри тега head, вот такую запись :

    60d19c364f7dd014673545.png

    Была похожая проблема, работал только один медиа-запрос, а остальные нет.
    Ответ написан
  • Как правильно центрировать кнопку?

    @Hatvis
    Задать родительскому блоку свойство margin: 0 auto;.
    Ответ написан
  • На каких ресурсах можно посмотреть актуальную информацию по "правильной" верстке?

    @Hatvis
    Универсальных решений по вёрстке не существует, всё зависит от конкретной задачи и конкретного макета.

    Названия классам можно давать какие угодно, главное, чтобы названия говорили разработчику ( в первую очередь вам ) о чём данный тег, что он из себя представляет. Существуют различные методологии по задаванию классов тегам, одна из популярных - БЭМ.

    Подробно про БЭМ можно прочитать здесь :
    httpss://ru.bem.info/methodology/quick-start/

    Flex'ы и Grid'ы

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

    Использование Grid'ов актуально, если вам нужно сверстать сложную структуру блока, в котором будет многоженство других, имеющих нестандартное расположение или соединения. Одним из существенных плюсов grid'ов - адаптивность ( подстраиваивание под разные размеры экранов.

    Если выбирать из этих двоих методов верстки что-то одно, то нельзя дать точный ответ на то, что будет лучше. Нужно будет попробовать оба метода и решить для себя, что для вас будет лучше. И, здесь всё, конечно, опять же, зависит от ситуации, в которой вы применяете эти медоты.

    SVG и картинки

    Одна из важнейших задач верстальщика - снизить нагрузку сайта на мобильный трафик пользователя, простыми словами - сжать вес всех элементов сайта к минимуму. Картинки ( JPG, PNG и другие форматы ) занимают немалый вес, который может стать причиной долгой скорости загрузки вашей страницы на стороне пользователя. Использование же SVG спрайтов - это использование векторной графики, т.е, спрайты - это те же самые картинки, только они создаются за счёт прямых и других линий, что позволяет им сохранять высокое качество даже при изменении их размера. Как вы уже, наверное, поняли, использование SVG спрайтов подразумевает с собой практически нулевой вес иконки, что уменьшает нагрузку на трафик пользователя.

    В случае с картинками всё будет хуже, они создаются при помощи растровой графики и весят много, да и при увеличении их размеров может ощутимо урезаться качество. В основном SVG спрайты являются иконками, логотипами и т.д. Скажем, если вам нужно будет использовать на сайте логотипы соц. сетей, к примеру, ВК, Discord, Skype и т.д, то лучше будет зайти на какой-нибудь ресурс SVG спрайтов и найти нужный спрайт там.

    Единицы измерения. Px и em

    Так как вы являетесь новичком в вёрстке, то для начала рекомендую пользоваться px ( пикселями ), т.к пиксели являются универсальной единицей для различных задач. Существуют так же и другие единицы, к примеру проценты %.

    Подробно про единицы измерений можно прочитать тут : https://learn.javascript.ru/css-units

    Комментирование кода

    Комментирование кода полезно не только для вас ( в случае, если проект крупный ), но и для других возможных будущих верстальщиков вашего проекта. Тут всё как с классами, чем подробнее закомментируете - тем легче будет верстальщику понять, что из себя представляет этот блок / тег.

    60a8b9763e7d4548315930.jpeg
    Рекомендую комментировать закрывающиеся теги лишь в том случае, если весь блок имеет большую вложенность элементов, иначе, без комментариев, вам будет сложно опеределить где именно находится конец того или иного тега в вашей вёрстке.
    Ответ написан