Достаточно ли такого уровня верстки чтобы уже ходить на собеседования верстальщиком?

Question

[Kirill Makarov]

Прилагаю ссылку на сайт.
kirillkai.beget.tech
От вас жду конструктивных замечаний, верстка одна из первых. Основной упор на данный момент делаю на изучение чистого js, но в целях практики хотел бы уже начать работать хотя бы верстальщиком.
Имеет ли смысл пробовать устраиваться или стоит еще больше поверстать и попрактиковаться.

Comments

[Ярослав Александров]

макеты для интернет-магазинов пробуйте верстать для портфолио, одного макета точно мало для похода на собеседование

[Михаил]

@media screen and (max-width: 569.9px)
.new {
    width: 100%;
    height: 570px;

height: 570px;

Wat

[Kirill Makarov]

Михаил, скорее всего игрался))

Answer 1

[Никита Шинкевич]

К мелочам, но важным, придираться не буду, их наберется очень много. Из грубого - нет адаптивности. 75% юзеров видят наши сайты через смартфоны. Наш контент не готов под это = нас нет в бизнесе. Для первой верстки неплохо, очень неплохо, но в реальной работе в столкнетесь с гонкой со временем, требованиями дизайнера, и еще очень многими факторами, в работе с которыми нужен чистый опыт, чтобы не ломать голову как сделать то или это...

Comments

[Kirill Makarov]

Благодарю, за отзыв

[Никита Шинкевич]

kirbi1996, ну и еще как кто-то советовал ниже: берите шаблоны-отрисовки и пытайтесь их пиксель в пиксель сверстать, и правда так будет проще рук набить. Референсы ищите на похожих сайта в коде, я так учился. Ну и еще хорошо бы не самому все мясо основное писать, а юзать фреймворк какой нибудь. Мне например bootstrap 4 за глаза и за уши для тех проектов, которые делал и делаю.

Answer 2

[MamaLuyba]

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

Comments

[Kirill Makarov]

На счет скролла согласен, лень было заморачиваться с js, капс по макету брал. Спасибо за отзвв

[sashabeep]

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

Answer 3

[sashabeep]

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

Предположу, что мы имеем дело с корпоративным сайтом, раз речь идет о ресторане.
Лично я бы такой шаблон не принял. На мой взгляд, он сделан «из головы», без дизайн-макета. Огромное количество мелких огрехов. Даже на 3/5 пока не тянет.

С точки зрения дизайна:

• Отсутствует понимание реюзабельности компонентов (например, абсолютно все кнопки разные)
  
• Сильно нарушены правила теории близости, ритма и разрядки, грамотного сочетания и подбора размера шрифтов
  

С точки зрения верстки:

• Часть компонентов недооформлена
  
• Отсутствует адаптивность, как сказали выше
  
• Управляющие элементы не работают
  
• Накинутый WOW..JS не дает возможности оценить уровень работы со скриптами. Настоящие проблемы начинаются, когда используется несколько плагинов со своими стилями, кодом, зависимостями и т.д.
  

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

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

И БЭМ. Ну раз по БЭМ - то таким чувакам всегда дают скидку в пятерочке и бесплатный проезд на троллейбусе.

Comments

[Kirill Makarov]

На счет БЭМ не до конца конечно понял прикола

[sashabeep]

Kirill Makarov, Насчет БЭМ надо понять одно - это генератив. То есть код с классами по БЭМ вручную не пишется, он создается автоматизированными системами. Многие почему-то воспринимают его как священный грааль, без которого сайт из трех дивов работать не будет вообще никак.

Это маркетинговый буллщит среди верстальщиков. Нет, я не отрицаю, что где-то его внедрение значительно упрощает разработку сложных систем. Ваш макет таковым не является, как и 99% других сайтов в мире.

[Kirill Makarov]

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

Answer 4

[pavelmosin]

Добрый день.
Конкретно по вёрстке: никогда не ставьте h4 выше h3 - это грубая ошибка. Такое работодателю отправлять точно не стоит. Так же играет роль время выполнения данной страницы. Если делали её больше 2-4 часов то вам врят-ли кто предложит работу.

Comments

[Kirill Makarov]

Делал больше, на счет заголовков спасибо учту

[sashabeep]

Это вы из головы выдумали про H4 выше H3?
Представьте список карточек, над которым предварающий текст с заголовком H3. После текста идут карточки с заголовками H4.

А после этой секции, внимание, еще одна такая же. Заголовок H3 получился ниже кучи заголовков H4.
Но это еще не всё. Обе этих секции вложены в родителя с заголовком H2, после которого идет еще один такой же родитель с кучей подсекций и карточек. Для пущего разрыва пусть секции оформлены тегом DIV.
Оппа, H2 стал ниже H4. Пердак сеошника уже разогнал его до второй космической и унес его за пределы нашей солнечной системы...

Answer 5

[Mikhail Osher]

Отличный результат для "первой вёрстки". За БЕМ - плюс.

Обратите внимание на отступы и их консистентность. Почитайте про rem/em (хорошая статья по теме: https://habr.com/ru/post/280125/).

Использовать БЕМ и дополнительные библиотеки с глобальными классами для анимаций - такое себе. Попробуйте эти анимации сами сделать.

Персональный список "фи":
- жирный текст по ховеру
- текст на кнопках не ровно по центру
- чёрный ховер в хедер ссылках
- нет транзишнов по ховеру
- данные в ежедневном меню не выровнены
- и вообще, много элементов не очень друг с другом выравнены (как границы элементов, так и паддинги внутри)

Comments

[Kirill Makarov]

Понял спасибо учту)

Answer 6

[Дмитрий Киреев]

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

По макету много вопросов, многое сделано не оптимально (к примеру, если у нас есть карточка товара, то мы должны учитывать, что названия товаров могут быть самой разной длинны, цена будет различная, это может быть 6$ а может быть 9999.99 USD - верстка не должна ломаться независимо от переменных, приходящих в вашу верстку). Заголовки должны использоваться для заголовков, тайтл карточки товара это не заголовок страницы (ну тут можно поспорить, сеошники рассудят). Блок новинки сезона и кнопка "следующее" (.new__next) - это шок контент, посмотрите в инспектор элементов и поймете сами. В ссылках для заглушек вместо # используйте javascript:void(0) - при клике страница не будет прыгать вверх. Много вопросов по адаптивности. Я так понимаю это был макет из головы - скачайте из интернета бесплатные psd макеты (или найдите на фрилансе люди публикуют реальные заказы, скачайте просто реальный макет) и сверстайте минимум 5 разных макетов.

Но это все узнается только на практике, лучше с опытным наставником - поэтому трейни позиция, обучение, отсутствие зп (это я говорю чтоб не было иллюзий, мол я сверстал лендос и где моя мазда 6?)

Comments

[Kirill Makarov]

На счет мазды это в точку)