Кто подскажет что в моей верстке неправильно выполнено?
Доброго времени суток. Выполнял верстку в качестве тестового задания от компании, в результате чего получил отказ и верстка моя была разнесена в пух и прах без объяснения причин. Не могли бы Вы, более опытные разработчики, подсказать, что же с ней в общем-то не так? Очень бы хотелось учиться на своих ошибках.
Goodilla: Заданием была верстка) У меня не перфект пиксель совсем, ибо делалось очень на скорую руку. Меня интересует именно правильность выполнения, качество кода, семантика
oleg_drozdov: На мой взгляд, JS - плохо структурирован и в целом, я бы написал иначе (проще использовать готовые плагины).
2ое, невзирая на, опять же на мой взгляд, отвратный дизайн, картинки можно было объединить в спрайт (это без картинок продуктов, иконки, селекторы и т.д.).
3ье, по CSS. Многие вещи, в том числе и картинки, можно было бы заменить на шрифты по типу Awesome Font, также более обширно использовать CSS3. В целом, CSS вроде бы неплох, есть вещи, который бы лично я сделал иначе (margin, padding, font-size), но это всё надо помечать при рассмотрении всей картины в целом. На первый взгляд я сделал такие выводы.
4ое, по ХТМЛ, валидацию на W3C не проходили?! Меню - в целом сделал бы также, но вот объекты товаров лучше оформлять в виде списков. Рейтинг, звёздочки лучше использовать полный CSS, не надо везде пихать FORM, "Купить" - это не форма для отправки, это просто кнопка. Честно?! вообще не нравится как оформлены товары, в плане вёрстки, перечислять проблемные места нет смысла, т.к., на мой взгляд, это требуется полностью переделать.
По поводу добавление скриптов, лучше будет, если вы загрузите скрипты к себе в раздел, но это скорее волевое решение каждого, нежели совет к исполнению ))
Как говориться, судить из нас каждый горазд, в вот делать правильно не все могут, поэтому не воспринимайте всё близко к сердцу, старайтесь делать вёрстку как можно проще и легче, меньше картинок, больше CSS.
Майк: вообще не нравится как оформлены товары, в плане вёрстки, перечислять проблемные места нет смысла, т.к., на мой взгляд, это требуется полностью переделать.
oleg_drozdov:
1. Оформил бы как лист, не контейнерами
2. Кнопку делаем как обычную ссылку (а), убираем form
3. Rating - никаких картинок через ХТМЛ, только CSS. Путём смены класса можно будет легко вывести рейтинг, также и эффект hover поможет подсветить необходимое кол-во звёзд
4. Выплывающая вниз скрытая информация очень раздражает. Её можно выполнить в виде всплывающей подсказки поверх блока.
5. "Отзывы" не имеют ссылки, хотя являются активным элементом, судя по странице. Делаем его через ссылку: Отзывы
6. Бирку NEW лучше делать отдельным элементом с текстом, в виде контейнера, а не фоном.
7. Цену, либо заключаете в SPAN либо только в DIV, первый вариант лучше, на мой взгляд.
Всё это без учёта CSS стилей, только то, что по ХТМЛ
Дизайн не мой, к счастью. Но и сделан макет далеко не пиксель-перфект, ибо времени на его выполнение было в обрез, о чем я предупреждал потенциального работодателя. Мне интересно качество исполнения именно с точки зрения правильности кода, семантики, аккуратности.
