Tecтовое задание по верстке, где ошибка?

Question

[ratatujef]

Добрый день!
недавно пробовал устроиться верстальщиком junior. прислали тестовое задание, как мне показалось, достаточно легкое.
Но по результатам, сказали, что не годен! я в целом не очень обижен, но не понимаю, где ошибка.
может я что- то изначально неправильно понял...помогите советом. Где ошибка и на что обратить внимание при работе над ошибками?
само задание:


код:

код 2

Comments

[WapSter]

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

<div class="container">
            <div class="header__wrapper"

<div class="header__wrapper container"
вот так нужно было.
nav без класса.
В общем с БЭМ у тебя все печально

/на примере выравнивание по умолчанию(flex-start) по этому ничего не пишу, хотя justify-content: center было бы интереснее

На макете вот я вижу, что блок расположен по центу, у тебя нет.

[Ankhena]

0. Я вообще не беру на работу тех, кто присылает письма/работы с грамматическими ошибками.
Одно дело, когда ошибки/опечатки в быстрой переписке, а другое при устройстве на работу.

1. Лишние обертки.
2. Проблемы с семантикой. Заголовки div'ами, списки div'ами.
3. alt="pucture1" лучше уж совсем пустой, чем так.
4. Ошибки БЭМ. Элементы элементов.
5. В частности button_footer. Если эта кнопка выглядит именно так, из-за того, что она в футере, то делается микс из блока и элемента от футера.
6. и т.д.

[WapSter]

cucumber111, хз pug толком не учил сразу зашел прост доку прочел один раз, иногда возвращался к ней. less еще совсем зеленым пробовал понравилось, и подучил ну и учением это в ряд ли назовешь, точно так же прочел, но возвращался часто к документации, после less c scss вообще проблем не было.

[ratatujef]

Ankhena, стыдно! Обычно с грамматикой все нормально! Видимо перенервничал..
У меня список только один (меню)
Заголовок h1/h2 нужно было ?
Предполагал, что button сам элемент, а button_footer модификатор.
Посоветуете ресурс для изучения?

[ratatujef]

WapSter, да, БЭМ нужно учить дальше! Не все видео-уроки учат правильно...Посоветуете ресурс?
Во втором задании по центру поставил обёртку , а элементы внутри в стандартом положении flex-start

[WapSter]

ratatujef,

Во втором задании по центру поставил обёртку , а элементы внутри в стандартом положении flex-start

в стилях этого нет.

Посоветуете ресурс?

https://ru.bem.info/

[WapSter]

cucumber111, а при чем тут переустановка виндовс и прямые технологии связанные только с версткой. Pug редко используют во фронтендерских фреймворках, для верстальщика и бэкендера от него куда больше пользы. less, sass по сути одно и тоже, используются только в верстке. БЭМ тоже по большому счету верстальщикам полезен, во фронтенде более удобные штуки есть, но все равно даже там очень популярен. И все эти вещи облегчают разработку, если это не заметно, значит очень мало опыта в принципе. Еще очень полезный навык слепая печать, на кириллице и латинице.

[ratatujef]

Никаких обид, просто пытаюсь понять, чтобы не допускать подобных ошибок в будущем. В задании указано, что можно писать с помощью pug, но это ведь не значит, что обязательно...

[WapSter]

Не обязательно, но видно, что работодатель на это надеется.

[Saboteur]

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

[dmitry-toster]

Saboteur, не удивлюсь если он его еще отметит решением)

Answer 1

[dreadwood]

Привет.
В первую очередь лучше просить обратную связь у компании.

Что меня смущает:
– почему не смиксовать классы header__wrapper и container (то же самое в футере)
– какой-то странный нейминг menu__item__link, news__item__subheader и другие: двумя нижними подчеркиваниями в данном примере разделяются элемент и блок, скорее всего подразумевалось menu__item-link (в других вариантах так же)
– title_main и title_news очень разные сущности, они не подходят под модификатор блока title
– "Новости" точно заголовок. Максимум p или span, но никак не div
– аналогично везде, где текст: div не имеет семантику, а просто блочная обертка. Для текста используются соответствующие теги: h1-h2, p, i, b и т.д.
– карточку можно сделал отдельным блоком, а так же использовать тег article

К чему еще можно придраться
– "Лидер в разработке..." мне кажется больше на параграф тянет, чем на h1
– возможно ожидали, что картинка под "Лидер в разработке..." должна прописываться в html
– могли не понравиться орфографические ошибки (например, комментарии)
– лучше использовать текст из макета

Comments

[Роман Дворянов]

+ Блок с логотипами по классике надо списком делать, явно ребята по семантике упарываются)

Answer 2

[Владислав Лысков]

Им нужно что бы ты это сделал через pug, ты этого не сделал, какие обиды...

Answer 3

[Роман Дворянов]

Придраться есть к чему, но это нюансы, которые наверстываются в ходе работы, как для джуна нормальное тестовое, pug указан как опционально. Не бери в голову, скорее всего просто уже взяли кого-то на твое место или живут по лунному календарю (да, я и таких встречал)

Answer 4

[Nik]

Через pug сделай, они хотят этого