Очень хотелось бы услышать мнение/критику на счёт верстки. Это одна из моих первых версток (до этого из рассылки №50 верстал торты и финансы (но как я понимаю не очень).
Верстал на LESS, классы пробовал писать по методологии БЭМ (не знаю насколько получилось).
Делал с фреймворком бутсрап 4, потом чуть подправил адаптивность, сайт от 320px работает.
И все это дело собрал галпом, с оптимизацией изображения, автопрефиксами, сжатием и т.д.
Прошел проверку валидатором на html и css, вроде все хорошо.
google speed page тоже показывает хороший результат на сколько я понял.
У меня следующие вопросы:
Данный макет 1600px, я его растянул под свой монитор 1920px, правильно ли я сделал или надо было просто центрировать 1600px, а колонки пустые оставлять по бокам
Прочитал тему про “организацию отступов”, насколько я понял, позиционировать через top, left и т.д, не совсем корректно(если не бг), лучше через падинги/маргини? (в этом проекто только их использвал).
У бургера (дроп меню) есть только значок бургера, в шаблоне я не увидил никакого скрытого меню, так и надо было оставлять бургером?
Слайдеры сделал через бутсраповскую карусель, это нормальная практика? т.к js только учу.
Из опыта у меня только курсы html academy (без иненсивов) и видео с ютуба.
Готовая верстка: https://sohouser.github.io
p.s работал через Zeplin, удобно создаёт миксины, пробовал авокадо, тоже очень понравилась прога, но она платная
Зависит от контента и конкретного случая. Если контента хватает, чтобы растянуть, и при этом всё выглядело нормально, то почему нет.
О каком позиционировании идет речь? (в каком блоке например)
На ваше усмотрение. Макеты из рассылки верстаются для себя, никакого перечня требований и правил к готовой верстке я не видела.
Так наверное быстрее. Но использование готовых плагинов и фреймворков - это не так эффективно, на мой взгляд. Гораздо полезнее в учебном смысле делать всё вручную.
Немного замечаний по верстке:
Пустые div-ы в разметке для иконок (как в футере например, и повсюду как выяснилось) - плохо. Лучше бы это были псевдоэлементы.
Интересно размечены основные секции страницы - с помощью article. Почему не section?
Для body перечислены все варианты шрифтов (и безопасные в том числе в зависимости от ОС), но дальше для блоков указывается только один. Добавьте к нему хотя бы семейство (serif, sans-serif)
Шрифт подключен только в формате ttf. Почему не добавили woff?
Отдельный бутстраповский класс для выравнивания текста по центру - это не излишне? Смотрю по хедеру. Текст размечен как БЭМ-элементы. Если бы были “блоки”, тогда мера понятна - выравнивание добавляется отдельно в зависимости от того, в каком месте блок переиспользуется. А здесь проще вручную дописать text-align и не портить разметку дополнительными классами.
Отсутствуют стили для ссылок (кнопок) в активном состоянии, есть только при наведении.
Почему-то не сгруппированы общие стили для декоративного элемента с пунктиром. В каждом блоке для него отдельный класс: intro__img, generic__img и т.д. И это снова пустой div в разметке - лучше заменить на псевдоэлемент.
Еще одна из особенностей бутстрапа - пустые сеточные блоки в разметке (div.col).
Что еще добавить - даже не знаю.
Был бы репозиторий на гитхаб - можно было бы посмотреть less-код.
Немного не понял, про какие вы пустые дивы?
В футере и в остальных местах, где соц.иконки, у меня стоит 1див родитель для центровки (флекс), в нем 3 ссылки, , которые я сделал круглые, с бэкграундом-иконкой.
Валидатор сказал, что для section нужен header и заголовок для правильной семантики, а для aside нужен только заголовок (а в данном макете как раз на каждый новый блок свой заголовок).
Хотя я видел как и секциями верстают, в семантике html5 не силён, торты как раз на секциях верстал (но их не покажу, стыдно, я там пол сайта через pos:absolute и top, left сделал, вместо сетки и т.д))
А разве свойства font-family не наследуемое, т.е если по какой то причине, заданный в блоке шрифт не будет отображаться, он полезет к этому свойству в корни, в body и оттуда возьмёт всё значения шрифта? Или я не прав? (просто если так, то зачем дублировать свойства?)
если честно не читал про шрифты, не знал что несколько форматов надо, просто скачал искомый шрифт и вставил. Обычно с гуглфонтс подключаю, но этих не было
5)Согласен излишнее, баловался так сказать и text-uppercase добавлял иногда) А так под конец уже через css всё задавалю
6)Точно! про них всегда забываю… для меня только ховер существует. Хорошим тоном кроме активного состояния еще и посещенное наверно надо добавить?
Вот тут я вас понял про пустой элемент, а кому по хорошему тону псевдоэлемент задавать?
Идущему перед ним заголовку или идущему после него тексту? или нет разницы.
Не понял, про что вы? div.col div.col-md-6 div.col про это? это я сделал для центровки, инфомацию взял остюда http://bootstrap-4.ru/docs/4.0/layout/grid/ раздел "Установка ширины одной колонки"
Я еще пока зеленый репозиторий заводить)) но видимо надо, займусь сегодня
3. Наследуемое. Но у вас свойство переопределяется:
для body написано font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
а ниже для заголовка секции задано font-family: GothamRounded; и всё, ни безопасного шрифта в качестве замены, ни семейства. 7. Псевдоэлемент создается к элементу, к которому относится ближе всего. В данном случае это “украшение” для заголовка. 8. Я поняла, что для центровки. Пустые блоки портят код, в этом дело. Но в бутстрапе наверное по-другому нельзя.
До less + gulp доросли, а до github-а нет, как же так?
У меня такая логика, что да, я переопределил шрифт, но если он вдруг не загрузиться или еще что, то тогда свойство font-family в любом блоке наследует это свойства от body. Я не так это понимаю?
8)Да по сути можно. Cделать div.col-md-12(то есть на всю страницу), а самим блокам margin: 0 auto;
да и вообще в данном случае эти ряды не нужны были, можно было в .container обернуть и всё. Это я больше для понимания бутстрапа делал)
less тут на курсах был, мне очень понравился стал сразу с ним верстать. А gulp часто слышал, решил посмореть в интернете урок и вроде ничего сложного, один раз файл и плагины настроить)
А вот про гит вообще ничего не слышал, в голове крутиться только “гитхаб” и “система контроля версий”, как то так)) Вот щас ищу на ютубе что то типо “гит для самых маленьких”
А ссылка работает, потому что я перезалил на новый хост
Нет. Вы можете проверить это сами. Например, намеренно испортить ссылку на шрифт в @font-face и посмотреть каким же шрифтом тогда отображается h1. А потом вернуть всё обратно и просто закомментировать свойство font-family: GothamRounded; Эффект будет другой.
