Оцените верстку №2?

Question

[Андрей Чирков]

Привет всем, с вашей помощью и собственными усилиями я сверстал второй сайт.
Прошу заметить, что учусь верстать около 2 недель, а до этого я никогда даже не пытался сделать что-то свое.

Так что приветствуется вся критика и советы, желательно от тех, кто давно в этой сфере.

В прошлом примере (вот он кстати) я использовал bootstrap.
В этом примере, по вашим же советам, я полностью отказался от bootstrap и сверстал его на flexbox.

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

Так же, мне посоветовали использовать методологию БЭМ. Скажу честно, я старался, но я только частично понял как это использовать и в чем его польза (в этом плане знаю некоторые ошибки и буду совершенствоваться).

Еще мне посоветовали подключить файл normalize.css, что я и сделал.

Еще мне посоветовали поработать с отступами на мобильной версии сайта, в этом примере они уже по-меньше.

Так же, я впервые познакомился с js и подключил слайдер. Если советы по этому поводу - пишите!

Прошлый пример на bootstrap я сверстал за 3 дня. Этот около 4 дней вместе с адаптивом (ну оно понятно, я учился и верстал одновременно)

ВОТ СОБСТВЕННО И САМ САЙТ-ПРИМЕР

Жду ваших реакций, только с вами и с опытом я буду становится лучше)

Comments

[Кодер Кодер]

Очень даже годно сверстал ) А где макеты берешь? Не подскажешь? Хочу тоже попробовать.

[Ilya Olovyannikov]

Кодер Кодер, в гугле полно по запросу "psd/fig макеты для верстки", "макеты для верстки bootstrap" итп)

[Кодер Кодер]

Ilya Olovyannikov, Это то да.. Вот только годных из них маловато, так чтобы для первой верстки подходили) Начинал пару раз верстать, а потом забрасывал.. уходил в изучение и не возвращался))))SVG и прочее...
Думаю для первого раза новичку надо верстать темы на подобии тех что на w3cschool, правда там уже готовые варианты)

[Ilya Olovyannikov]

Напиши мне завтра в ТГ @olovyannikov_barista
Я тебе поскидываю макеты для верстки)

Answer 1

[auddit]

Если вы только начали верстать, запомните. Никогда не используйте один и тот же текст для нескольких похожих блоков / тизеров / компонентов. Всегда добавляйте разное количество текста, чтобы сразу протестировать, как будет выглядеть с реальным контентом и чтобы не было таких проблем потом.

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

Answer 2

[Никита Михайлов]

• Тег main зачастую является уникальным для страницы. В нём содержится уникальный контент. Нет особой нужды оборачивать в него каждую отдельную секцию.
  
• .bg-color-pale-gray — здесь попытка связать название класса и свойства. То есть в духе атомарного класса. При этом помимо цвета задаётся и высота, что нарушает логику построения классов
  
• У body указано семейство шрифтов 'Open Sans'. При этом в некоторых селекторах это повторяется.
  
• .row-boxes .purple — нет причины не сделать класс а-ля bg-purple. Такое уже используется в проекте. А вот такая специфичность путает
  
• info-box__btn-more btn-more — ты сделал элемент btn-more и зачем то ещё класс btn-more
  

Основная проблема — попытка усидеть на двух стульях. То вначале делаешь классы по одному принципу (БЭМ), то по другому (OOCSS/Atomic, а-ля как Bootstrap). Лучше выбери что-то одно пока, иначе со временем сам запутаешься

Comments

[Андрей Чирков]

Про main понял, исправлюсь.
Про .bg-color-pale-gray тоже понял.
Про шрифты понял и исправился потом, т.к в конце понял что можно просто fw указывать, а не целое семейство.
Классы purple, blue, pale-blue, pink я создал чтобы покрасить каждый бокс отдельно, ну я лично не понял как это по-другому можно сделать, если знаешь - подскажи.
info-box__btn-more btn-more - элементу я указываю маргины и паддинги в конкретном боксе, а саму кнопку я использовал несколько раз в разных местах, поэтому для нее отдельный класс

[Никита Михайлов]

Классы purple, blue, pale-blue, pink я создал чтобы покрасить каждый бокс отдельно

В одном случае используется один вид классов для этого: .bg-color-pale-gray, а в другом случае просто purple. Причём purple является зависимым от родителя. Здесь надо бы выбрать что-то одно. Если хочешь, как в Bootstrap, то и создай такие классы, как bg-gray, bg-purple. Но это уже не БЭМ.

info-box__btn-more btn-more - элементу я указываю маргины и паддинги в конкретном боксе, а саму кнопку я использовал несколько раз в разных местах, поэтому для нее отдельный класс

А вот это то самое сиденье на двух стульях. Либо уж БЭМ, либо OOCSS/Atomic

[Андрей Чирков]

Никита Михайлов,

В одном случае используется один вид классов для этого: .bg-color-pale-gray, а в другом случае просто purple. Причём purple является зависимым от родителя. Здесь надо бы выбрать что-то одно. Если хочешь, как в Bootstrap, то и создай такие классы, как bg-gray, bg-purple. Но это уже не БЭМ.

Ааа, так ошибка только в названии классов?

А вот это то самое сиденье на двух стульях. Либо уж БЭМ, либо OOCSS/Atomic

А как тогда кнопке создать дизайн, а паддинги указывать отдельно? Это же получается мне каждый раз новую кнопку надо будет создавать и стили ей прописывать, бред же. Или я не так понял

[Никита Михайлов]

Почитайте про все эти подходы. Это поможет разобраться, как это всё работает.

1. БЭМ
   
2. OOCSS
   
3. Atomic
   

Постарайтесь понять концепции подхода. Вы можете совмещать конечно всё, что угодно. Но важно, чтобы была система. Сейчас системы у вас нет, ну или я её не вижу

[Андрей Чирков]

Никита Михайлов, большое спасибо, попробую

[Никита Михайлов]

Это же получается мне каждый раз новую кнопку надо будет создавать и стили ей прописывать, бред же

А вот для этого можно использовать препроцессоры. Тогда такой боли даже не будет :)

[Андрей Чирков]

Никита Михайлов, ну я юзаю less, но это как, мне нужно будет обращаться к элементу из одного блока к классу другого?

Answer 3

[Steppp]

Логотип лучше картинкой делать!
И я хочу чуть больше таких значков! Добавишь еще штучки 4?
+++++

И я не хочу тут UI/UX Designer, а хочу что то на букв 100! чтоб строчки 4 было

Answer 4

[ocheretnyi_1207]

Верстка сделана плохо....есть ошибки, и валидатор может о них рассказать. Если есть желание, можем сконнектиться я тебе расскажу что к чему....