Профи верстки, оцените работу начинающего верстальщика пожалуйста?

Question

[anna_umi]

Народ, пожалуйста, помогите понять что не так в верстке, судите строго, очень хочется прогресса, я начинающий верстальщик и пытаюсь трудоустроится, было задание от одной фирмы (файл прикрепила):

1. Верстка страницы (прикрепленный файл).
- Верстка страницы PSD 2 HTML
- 12 columns grid
- Responsive, адаптивная для мобильных устройств
- Нужна верстка pixel perfect
- Шрифт google fonts

В итоге я сделала, и мне написали что там ооооочень много ошибок, помогите понять где,

Вот результат https://annaumi.github.io/test-task-from-fruitful-...

Профи помогите!

Answer 1

[Ivan Stroykin]

Откройте результат, а рядом откройте прикрепленное вами изображение. И полистайте туда и обратно много раз. Заметны различия?
Шрифты (fonts-size, line-height и т.д.), цвета (фон вообще отличается, текст во многих местах другого оттенка), позиционирование элементов так же отличается
P.S. Если еще не начали пользоваться, вот хороший плагин для Chrome для pixel perfect: PerfectPixel by WellDoneCode
P.S.S. Это с визуальной точки зрения. Сейчас немного времени будет, посмотрю код

Comments

[anna_umi]

Спасибо, да я установила PerfectPixel и на хром и на мозилу, у меня все совпадало, по разному жирность шрифтов в разных браузерах и все. Неужели разница в пару пикселей может быть ошибкой большой?

[anna_umi]

А я вообще background забыла сделать, вижу

[Ivan Stroykin]

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

[anna_umi]

Я поняла, спасибо, просто делала по сетке, буду в дальнейшем учитывать все нюансы.

[Ivan Stroykin]

anna_umi: По коду. в html есть некоторое количество лишних пробелов (к примеру: class=" content row" и еще несколько раз встречается).
тут не нужен закрывающий слэш, так как вы верстаете в html, а не xhtml. Многие считают это ошибкой.
в css media-запросы лучше выносить в отдельный файл, либо, в большом проекте, писать media непосредственно после самое описания нужного класса. Но в больших проектах, конечно, лучшей практикой будет использование препроцессоров.
Так же в css при разработке лучше по полной пользоваться разделением частей сайта. Конечно же разделять всё переводами строк. После разработки используете любой минификатор, чтобы сжать файл (убрать все комментарии, пробелы, переводы строк, ...)
Это так, быстрый взгляд. То, что обычно требуют и на что смотрят разные фирмы.

[anna_umi]

Приблагодарна за ваш совет, все учту!

Answer 2

[sergey]

Также нету много времени, но вот что успел глянуть: это поиск, сделан ахтунг не корректно, сами посмотрите, во-первых outline появляется при фокусе (при чем частично, ибо другая часть это button) во-вторых: зачем там button с вложенным img - так не делают.
Посмотрите видео Из PSD в HTML, как сверстать так, чтобы не было стыдно особенно то, как делается поиск.
Думаю если копнуть глубже, то аналогичных ошибок будет достаточно.

Comments

[anna_umi]

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

[anna_umi]

а как лучше сделать такую форму, я обычно в button иконку ставлю fontawesome - это тоже не правильно? но на этот раз был макет с изображением. И вот например сайт https://www.microsoft.com/
там у них тоже форма с input и button реализована - это у них тоже не правильно?

[sergey]

anna_umi: видео я вам сбросил, посмотрите и поймете

[anna_umi]

Хорошо, огромное вам спасибо:) смотрю

[sergey]

anna_umi: и совет на будущее: не смотрите на сайты мегакомпаний, они делались когда вас еще на свете наверное не было:), а технологии меняются каждый день

[anna_umi]

SM: Спасибо за совет, но я как раз на их и смотрю, думаю они то все знают)

[sergey]

anna_umi: удачи и терпения, и все у Вас получится

[anna_umi]

SM: Благодарю :)

Answer 3

[Василий]

Вполне себе неплохо. Бывает и хуже)

Comments

[anna_umi]

Спасибо, а то я уже в отчаянье..

Answer 4

[Rooly]

Во-первых, вёрстка не по container >>> зачем использовать margin >>> отталкиваться от контейнера (( это не есть гуд )).
Во-вторых, nav свой видели? Тоже не по контейнеру (( нужно обнулить padding у первого элемента или весь nav сместить влево на item { padding } )) Да и вабще, padding в вашем случае нужно ставить у элемента ссылки (( у ссылки )), а не у элемента пункта (( грубая ошибка )).

Это что мне первое на глаза попалось. Остальное смотреть времени нету.
Интересно как такого верстальщика с нулевыми знаниями работодателям интересно брать на работу. Сейчас работодателям нужно чтобы верстальщик знал:
препроцессоры,
вёрстка, чтобы всё не разваливалось,
JS (( на высоком уровне, а не только jquery )).
Сборщики.
БЭМ (( ОООООчень большой плюс будет, на уровне селекторов хотя-бы )).
Пакетные менеджеры, основы работы с Linux консолью..

Верстальщиком вас я бы не назвал.

Comments

[anna_umi]

Благодарю за дельный совет! А вы не подскажите статью какую где именно написано где лучше паддинги ставить, потому что смотрю на работы людей кругом все по разному. Ну или какой сайт пример где все сделано верно, буду очень благодарна, хочется делать вещи идеально, а не как то так, но пока не понимаю как идеально должно быть.

[anna_umi]

PS: ну я и не верстальщик, я только начинаю верстать, как же мне научится если не начинать делать :)

[Rooly]

anna_umi: Если у вас склонности к математике -->> вам будет легче усвоить материал.
по поводу padding --->> нужно знать, что заливается фоном, остальное по логике.
что-либо советовать я вам не могу, т.к я учился очень усердно (( получаешь стресс от материала и охереваешь от информации )).... Ищите сами, удачи.

[Rooly]

ZetIndex_Ram: Слепой метод набора печати освойте хотя-бы в среднем на 300-350 слов (( исключая ошибки, т.е пишите 450 слов в минуту, где 10% ошибок -->> это как пример )). При освоении слепого метода печати вам будет гораздо легче создавать код.

[anna_umi]

ZetIndex_Ram: Да у меня даже нет русской клавиатуры (надписей ) конечно я печатая не смотря на нее :) только как мне это поможет понять лучше padding к li применить или к a, тем более у всех примерах что я видела на codepen.io nav реализован как у меня, а это оказывается не правильно (

Answer 5

[Виктор Янышев]

По мне так в задание ошибка ;) либо адаптивный либо респонсив.

Comments

[anna_umi]

Ну я на свое усмотрение сделала отображение на мобильном, просто хотелось бы понять где там много очень ошибок и какие, к сожалению я не могу распознать :(

Answer 6

[JasonStepler]

1) Ссылки в меню работают только при нажатии на текст ссылки. Аналогично в мобильной версии. Клик должен работать по всей области hover`а.
2) В мобильном меню у последней ссылки бордер лишний.
3) Открытое мобильное меню на больших разрешениях не убирается.
4) Картинки в "RECENT NEWS" обычно тоже делают ссылками, которые ведут на новости.

Для меня осталось загадкой для чего задан margin-right:19px у .news-wrap.
Из-за него картинки располагаются криво относительно контейнера.

Comments

[anna_umi]

Спасибо за совет, 1 и 2 об этом вообще не было никаких упоминаний в задании потому я сделала просто для вида, и мне лично нравится бордер внизу. 3 Убирается в media стоит display: none, но опять таки может там не правильно я реализовала.
margin-right:19px у .news-wrap. - для полного совпадения с макетом по pixel perfect, но опять таки наверное сдвинуть все иначе нужно было, я придумала так и это наверное не правильно. Спасибо вам за замечания.