Рассылка №51 Halcyon Лендинг проекта.

Очень хотелось бы услышать мнение/критику на счёт верстки. Это одна из моих первых версток (до этого из рассылки №50 верстал торты и финансы (но как я понимаю не очень).

Верстал на LESS, классы пробовал писать по методологии БЭМ (не знаю насколько получилось).
Делал с фреймворком бутсрап 4, потом чуть подправил адаптивность, сайт от 320px работает.
И все это дело собрал галпом, с оптимизацией изображения, автопрефиксами, сжатием и т.д.
Прошел проверку валидатором на html и css, вроде все хорошо.
google speed page тоже показывает хороший результат на сколько я понял.

У меня следующие вопросы:

  1. Данный макет 1600px, я его растянул под свой монитор 1920px, правильно ли я сделал или надо было просто центрировать 1600px, а колонки пустые оставлять по бокам

  2. Прочитал тему про “организацию отступов”, насколько я понял, позиционировать через top, left и т.д, не совсем корректно(если не бг), лучше через падинги/маргини? (в этом проекто только их использвал).

  3. У бургера (дроп меню) есть только значок бургера, в шаблоне я не увидил никакого скрытого меню, так и надо было оставлять бургером?

  4. Слайдеры сделал через бутсраповскую карусель, это нормальная практика? т.к js только учу.

Из опыта у меня только курсы html academy (без иненсивов) и видео с ютуба.

Готовая верстка: https://sohouser.github.io
p.s работал через Zeplin, удобно создаёт миксины, пробовал авокадо, тоже очень понравилась прога, но она платная

На готовую верстку тортов хотелось бы посмотреть. Рассылка №50 Макет торты на заказ
Что касается вопросов о Halcyon, то:

  1. Зависит от контента и конкретного случая. Если контента хватает, чтобы растянуть, и при этом всё выглядело нормально, то почему нет.
  2. О каком позиционировании идет речь? (в каком блоке например)
  3. На ваше усмотрение. Макеты из рассылки верстаются для себя, никакого перечня требований и правил к готовой верстке я не видела.
  4. Так наверное быстрее. Но использование готовых плагинов и фреймворков - это не так эффективно, на мой взгляд. Гораздо полезнее в учебном смысле делать всё вручную.

Немного замечаний по верстке:

  1. Пустые div-ы в разметке для иконок (как в футере например, и повсюду как выяснилось) - плохо. Лучше бы это были псевдоэлементы.
  2. Интересно размечены основные секции страницы - с помощью article. Почему не section?
  3. Для body перечислены все варианты шрифтов (и безопасные в том числе в зависимости от ОС), но дальше для блоков указывается только один. Добавьте к нему хотя бы семейство (serif, sans-serif)
  4. Шрифт подключен только в формате ttf. Почему не добавили woff?
  5. Отдельный бутстраповский класс для выравнивания текста по центру - это не излишне? Смотрю по хедеру. Текст размечен как БЭМ-элементы. Если бы были “блоки”, тогда мера понятна - выравнивание добавляется отдельно в зависимости от того, в каком месте блок переиспользуется. А здесь проще вручную дописать text-align и не портить разметку дополнительными классами.
  6. Отсутствуют стили для ссылок (кнопок) в активном состоянии, есть только при наведении.
  7. Почему-то не сгруппированы общие стили для декоративного элемента с пунктиром. В каждом блоке для него отдельный класс: intro__img, generic__img и т.д. И это снова пустой div в разметке - лучше заменить на псевдоэлемент.
  8. Еще одна из особенностей бутстрапа - пустые сеточные блоки в разметке (div.col).
    Что еще добавить - даже не знаю.
    Был бы репозиторий на гитхаб - можно было бы посмотреть less-код.

Блин хостинг бесплатный лёг(

  1. Немного не понял, про какие вы пустые дивы?
    В футере и в остальных местах, где соц.иконки, у меня стоит 1див родитель для центровки (флекс), в нем 3 ссылки, , которые я сделал круглые, с бэкграундом-иконкой.
    div

  2. Валидатор сказал, что для section нужен header и заголовок для правильной семантики, а для aside нужен только заголовок (а в данном макете как раз на каждый новый блок свой заголовок).
    Хотя я видел как и секциями верстают, в семантике html5 не силён, торты как раз на секциях верстал (но их не покажу, стыдно, я там пол сайта через pos:absolute и top, left сделал, вместо сетки и т.д))

  3. А разве свойства font-family не наследуемое, т.е если по какой то причине, заданный в блоке шрифт не будет отображаться, он полезет к этому свойству в корни, в body и оттуда возьмёт всё значения шрифта? Или я не прав? (просто если так, то зачем дублировать свойства?)

  4. если честно не читал про шрифты, не знал что несколько форматов надо, просто скачал искомый шрифт и вставил. Обычно с гуглфонтс подключаю, но этих не было

5)Согласен излишнее, баловался так сказать и text-uppercase добавлял иногда) А так под конец уже через css всё задавалю

6)Точно! про них всегда забываю… для меня только ховер существует. Хорошим тоном кроме активного состояния еще и посещенное наверно надо добавить?

  1. Вот тут я вас понял про пустой элемент, а кому по хорошему тону псевдоэлемент задавать?
    Идущему перед ним заголовку или идущему после него тексту? или нет разницы.

  2. Не понял, про что вы? div.col div.col-md-6 div.col про это? это я сделал для центровки, инфомацию взял остюда http://bootstrap-4.ru/docs/4.0/layout/grid/
    раздел "Установка ширины одной колонки"

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

Перезалил на гит: https://sohouser.github.io

3. Наследуемое. Но у вас свойство переопределяется:
для body написано font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
а ниже для заголовка секции задано font-family: GothamRounded; и всё, ни безопасного шрифта в качестве замены, ни семейства.
7. Псевдоэлемент создается к элементу, к которому относится ближе всего. В данном случае это “украшение” для заголовка.
8. Я поняла, что для центровки. Пустые блоки портят код, в этом дело. Но в бутстрапе наверное по-другому нельзя.

До less + gulp доросли, а до github-а нет, как же так?

Предыдущая ссылка на сайт у меня работает.

  1. У меня такая логика, что да, я переопределил шрифт, но если он вдруг не загрузиться или еще что, то тогда свойство font-family в любом блоке наследует это свойства от body. Я не так это понимаю?

8)Да по сути можно. Cделать div.col-md-12(то есть на всю страницу), а самим блокам margin: 0 auto;
да и вообще в данном случае эти ряды не нужны были, можно было в .container обернуть и всё. Это я больше для понимания бутстрапа делал)

less тут на курсах был, мне очень понравился стал сразу с ним верстать. А gulp часто слышал, решил посмореть в интернете урок и вроде ничего сложного, один раз файл и плагины настроить)
А вот про гит вообще ничего не слышал, в голове крутиться только “гитхаб” и “система контроля версий”, как то так)) Вот щас ищу на ютубе что то типо “гит для самых маленьких” :smile:
А ссылка работает, потому что я перезалил на новый хост

Нет. Вы можете проверить это сами. Например, намеренно испортить ссылку на шрифт в @font-face и посмотреть каким же шрифтом тогда отображается h1. А потом вернуть всё обратно и просто закомментировать свойство font-family: GothamRounded; Эффект будет другой.

1 лайк

Спасибо! почитал статью, сделал себе “репозиторий”. У меня оказывается даже акк был когда на cs50 учился)

Вот репозиторий sohouser.github.io
Добавил шрифты, сделал кнопкам :active, поменял пустые блоки на псевдоклассы.
И в репозитории исходники less скинул https://github.com/SohoUser/sohouser.github.io/tree/master/less

Я так понимаю, я этих репозиториев могу много создавать и на кажду свой отдельный сайт выкладывать как портфолио?

Конечно можете)

1 лайк