@AndrewChirkov
Верстальщик

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

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

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

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

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

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

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

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

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

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

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

Жду ваших реакций, только с вами и с опытом я буду становится лучше)
  • Вопрос задан
  • 630 просмотров
Пригласить эксперта
Ответы на вопрос 5
@auddit
Если вы только начали верстать, запомните. Никогда не используйте один и тот же текст для нескольких похожих блоков / тизеров / компонентов. Всегда добавляйте разное количество текста, чтобы сразу протестировать, как будет выглядеть с реальным контентом и чтобы не было таких проблем потом. 5f5b860c55e6f172100571.jpeg5f5b86129bafe416149036.jpeg

Также для ускорения обучения попробуйте несколько курсов, пусть даже платных, но это поможет избежать большинства ошибок и ускорить обучение.
Ответ написан
Psixodelik
@Psixodelik
Преподаватель на Hexlet
  • Тег 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). Лучше выбери что-то одно пока, иначе со временем сам запутаешься
Ответ написан
@Steppp
Логотип лучше картинкой делать!
И я хочу чуть больше таких значков! Добавишь еще штучки 4? 5f5b7847e2d3e381473472.png
+++++

И я не хочу тут UI/UX Designer, а хочу что то на букв 100! чтоб строчки 4 было
5f5b783577509678098884.png
Ответ написан
wapster92
@wapster92 Куратор тега CSS
screen width 492 - появляется горизонтальный скролл.
На кнопках transition добавляешь при ховере, что приводит к скачку анимации при потери ховера.
.main-content - не хватает отступов внутренних по краям.
Дальше лень смотреть, сойдет для новичка.
.info-box .info-box__text {
    // ...
}

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы