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

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, капс по макету брал. Спасибо за отзвв

Answer 3

[pavelmosin]

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

Comments

[Kirill Makarov]

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

Answer 4

[Mikhail Osher]

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

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

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

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

Comments

[Kirill Makarov]

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

Answer 5

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

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

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

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

Comments

[Kirill Makarov]

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