Кто подскажет что в моей верстке неправильно выполнено?

Question

[oleg_drozdov]

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

Ссылка на файл: https://www.dropbox.com/sh/0g1jk1unre12iob/AACyCbN...

Заранее огромное спасибо)

Comments

[Майк]

Вопросы: 1. А исходник, хоть картинка страницы есть; 2. Задача какая была?

[oleg_drozdov]

Goodilla: Заданием была верстка) У меня не перфект пиксель совсем, ибо делалось очень на скорую руку. Меня интересует именно правильность выполнения, качество кода, семантика

[Майк]

oleg_drozdov: На мой взгляд, JS - плохо структурирован и в целом, я бы написал иначе (проще использовать готовые плагины).

2ое, невзирая на, опять же на мой взгляд, отвратный дизайн, картинки можно было объединить в спрайт (это без картинок продуктов, иконки, селекторы и т.д.).

3ье, по CSS. Многие вещи, в том числе и картинки, можно было бы заменить на шрифты по типу Awesome Font, также более обширно использовать CSS3. В целом, CSS вроде бы неплох, есть вещи, который бы лично я сделал иначе (margin, padding, font-size), но это всё надо помечать при рассмотрении всей картины в целом. На первый взгляд я сделал такие выводы.

4ое, по ХТМЛ, валидацию на W3C не проходили?! Меню - в целом сделал бы также, но вот объекты товаров лучше оформлять в виде списков. Рейтинг, звёздочки лучше использовать полный CSS, не надо везде пихать FORM, "Купить" - это не форма для отправки, это просто кнопка. Честно?! вообще не нравится как оформлены товары, в плане вёрстки, перечислять проблемные места нет смысла, т.к., на мой взгляд, это требуется полностью переделать.

По поводу добавление скриптов, лучше будет, если вы загрузите скрипты к себе в раздел, но это скорее волевое решение каждого, нежели совет к исполнению ))

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

[Майк]

и да, удобнее использовать SASS или LESS - это поможет также сжать файлы и ускорить процесс реализации

[oleg_drozdov]

Майк: Услышал Вас, спасибо большое)
Если не затруднит перечислите все же, интересно ведь

[Майк]

oleg_drozdov: что именно перечислить?

[oleg_drozdov]

Майк: вообще не нравится как оформлены товары, в плане вёрстки, перечислять проблемные места нет смысла, т.к., на мой взгляд, это требуется полностью переделать.

[petyagrill]

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

[Майк]

oleg_drozdov:
1. Оформил бы как лист, не контейнерами
2. Кнопку делаем как обычную ссылку (а), убираем form
3. Rating - никаких картинок через ХТМЛ, только CSS. Путём смены класса можно будет легко вывести рейтинг, также и эффект hover поможет подсветить необходимое кол-во звёзд
4. Выплывающая вниз скрытая информация очень раздражает. Её можно выполнить в виде всплывающей подсказки поверх блока.
5. "Отзывы" не имеют ссылки, хотя являются активным элементом, судя по странице. Делаем его через ссылку: Отзывы
6. Бирку NEW лучше делать отдельным элементом с текстом, в виде контейнера, а не фоном.
7. Цену, либо заключаете в SPAN либо только в DIV, первый вариант лучше, на мой взгляд.

Всё это без учёта CSS стилей, только то, что по ХТМЛ

[oleg_drozdov]

Майк: Понял Вас, еще раз спасибо)

[Майк]

oleg_drozdov: Не за что, используйте сервис W3C для проверки кода, он выдаст много интересного.

Answer 1

[Дмитрий Антонов]

файла нет

Comments

[oleg_drozdov]

https://www.dropbox.com/sh/fj5ua8lfi4pw3t6/AAA3Dly... вот такая она теперь)

Answer 2

[Владислав Старцев]

Главный вопрос. Верстка по макету или дизайн тоже вы делали?

Comments

[oleg_drozdov]

Дизайн не мой, к счастью. Но и сделан макет далеко не пиксель-перфект, ибо времени на его выполнение было в обрез, о чем я предупреждал потенциального работодателя. Мне интересно качество исполнения именно с точки зрения правильности кода, семантики, аккуратности.