Покритикуйте верстку, парни?

Question

[Валентин Хохлов]

Ребята, добрый день!
Посмотрите верстку, кому не сложно: https://hohlovvalentin.github.io/down_the_stream_page/
Код в отладчике, либо тут: https://github.com/HohlovValentin/down_the_stream_page
Обратите внимание на правильность/неправильность применения БЭМ, SCSS, семантику, адаптивность. На телефоне отображается все хорошо вроде.

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

Comments

[Сергей delphinpro]

scss/bem
названия - very bad
b- префикс нафиг не нужен
_mod - что??? что за мод? как понимать? хз...
код-стайл слегка хромает (я к этому серьезно отношусь, всё везде должно быть единообразно и ровно)
.b-image_mod - модификатор есть, а где блок? модификатор висит в одиночестве
.b-content-wrap_mod - снова
&-item - так вообще писать нельзя под страхом смерти
.b-form__item - о-па, теперь элемент одинокий
В общем с БЭМ-ом беда
Общая организация стилей оставляет желать лучшего. Я понимаю, что страница простейшая, но с другой т.з. если вы в простейшей странице порядок не можете навести, то что будет в более приближенных к реальности случаях?
Медиазапросы зачем в конце собраны? Раз уж вы заявили претензии на БЭМ, то будьте любезны описывать блок в одном месте, а не раскидывать его стили по разным частям проекта.
ну и по мелочи: ненужные амперсанды, вендорные префиксы в исходниках и т.п.
Это вся критика после простого просмотра sass-файлов. Я еще не открывал сайт или html.
meta теги размещайте в голове файла, зачем в рутовый вынесли кодировку?
ну выравнивание тоже неаккуратное
тег <content> вообще не в тему использован! Вы почитайте для чего он был нужен и заметьте, что тег удален из актуальной спецификации. Вероятно здесь подошел бы тег <main>.
h1 - один на страницу/статью
ну в остальном разметка как разметка, простая, придираться особо не к чему..

просто совет: папку .sass-cache нужно было в гитигнор добавить =)

[Валентин Хохлов]

Сергей, классное резюме, спасибо!

Answer 1

[alvvi]

Сколько по времени займет такая страница у хорошего верстальщика?

Не буду говорить за всех хороших, но у меня бы часа 2 заняло.

Обратите внимание на правильность/неправильность применения БЭМ, SCSS, семантику, адаптивность. На телефоне отображается все хорошо вроде.

Семантика хромает, даже очень: заголовки тэгом <a>, тэг<content></content> который deprecated вместо очевидного article, модификатор с названием _mod - тоже классно, сразу ведь понятно что он делает, да?) Глубже не стал смотреть, т.к. это довольно грубые ошибки.

Сейчас пытаюсь пробиться на стажера, достаточно ли этого?

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

Answer 2

[Andrey Perov]

в течение нескольких часов примерно https://hohlovvalentin.github.io/down_the_stream_page/ а может и быстрее

я бы верстал от меньше к большему, сначала выделил все button общие моменты инпуты и тд по BEM сверстал все, и потом как конструктор собирал все это в блоки ( но все конечно от ситуации зависит что надо делать )

Answer 3

[Егор Живагин]

Зачем сжимать body ? не надо так)
Да всё более-менее нормально, но ты шаблон из нулевых взял. Сделай что-нибудь такое , например

Answer 4

[Anna_BS]

Сайт легкий, нужно брать что-то посложнее. Сделать еще пару сайтов.
uplabs
На мобильном будет очень маленький шрифт, адаптивное меню очень прозрачное, анимацию на "read more" лучше совсем убрать.
Вообще лучше брать хороший макет с адаптацией чтобы самому не придумывать.

Answer 5

[Максим Тимофеев]

1. Это слишком примитивно, подобное показывать не стоит ибо есть намек, что сложнее не сделаете.
2. Дизайн все же имеет значение. Как минимум на первое впечатление. Смотришь на такое и подсознательно уже хочешь найти изъяны, а значит найдут.
3. Что у Вас css код в header делает? Ну я понимаю когда cms и есть необходимость, но для простого шаблона, это явно в файл можно вынести.
4. Почему css не минифицирован и не сжат в 1 файл?
5. Почему google maps 18 раз подключен?
6. В мобилке меню совершенно не читабельное. Это анти UX
7. по семантике промолчу, до нее еще далеко.
8. БЭМ даже не стоило пробовать учитывая уровень всего остального.
Это так капнул верхами.

Comments

[Валентин Хохлов]

1,2. Дизайн макета примитивный, согласен.
3. Нет такого: весь css подключен в head. специально пересмотрел.
4. Не знаю пока как это сделать, буду изучать, спасибо)
5. Скрипт google maps подключен один раз в списке скриптов в конце body. или я что-то не вижу?
6. В мобилке меню выпадает по клику на сэндвич, начиная с ширины 600px, проверил на телефоне, все видно. или нет?
7,8. Буду изучать, спасибо!