Оцените пожалуйста вёрстку и js-код

[ZondArt]

Здравствуйте. Страницу сверстал из бесплатного PSD-шаблона. Хотелось бы услышать критику по поводу качества вёрстки, а также по поводу javascript кода. JS писал сам, единственное для удобства работы с DOM'ом использовал jQuery.

Страница: http://artemkajs.meximas.com/

jpeg шаблона: http://higgs.rghost.ru/53507945/image.png

psd: http://rghost.ru/53508127

[scarface.93]

dr.web блокирует твои ссылки

[ZondArt]

dr.web блокирует твои ссылки

И даже rghost блокирует? Странно, у меня на трёх разных компьютерах открывается нормально (Касперский, Avast).

[scarface.93]

у dr.weba такое бывает. он за безопасность компьютера волнуется больше чем я

[Struggle]

Логотип поправь, он должен быть кликабельный, верстка не плоха впринцпе, ставлю +

 

upd

 

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

Edited March 30, 2014 by Struggle

[DivMan]

в хроме, после щелчка в поиск, появляется рамка, а в мозиле такого нет

[ZondArt]

Логотип поправь, он должен быть кликабельный, верстка не плоха впринцпе, ставлю +

 

upd

 

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

Спасибо. Логотип поправил, а по поводу звёздочек... ну не знаю, вроде как просто декорации, но на всякий случай реализовал, правда раздутый код получился

 

в хроме, после щелчка в поиск, появляется рамка, а в мозиле такого нет

Поправил. Прописал input'у outline:none;

 

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

[Zverushka]

А ты для ползунков и переключателей сам код писал?

Сразу бросается в глаза:

1) Хедер без класса - этот тег может приненяться не один раз и тогда у тебя стили поедут

2) Для инпута поиска ведь нужна форма - не так ли?

3) Для именования классов принято использовать тире(дефис) в html

4) 

<a htef="#" id="appStoreBtn"></a>  

Данная конструкция говорит о том, что код не проходил валидацию и соотвественно не были исправлены очевидные ошибки/опечатки. Верстку надо валидировать всегда, чтобы таких опусов не возникало.

5) Например иконки внизу - это по сути оформление в виде иконок. Их лучше бы сделать через i.icon.icon-case, .icon-film итп - чтобы у вебмастера был целый набор иконок и он мог их вставить в любое место на странице, просто прописав <i class="icon icon-case"></i> Чтобы они не были привязаны к некому списку - ни к .media, ни к ul.

6) В пиксельперфекте есть много несовпадений - как расстояние между звездами, размеры шрифта у ползунка и кнопок. Даже размер шрифта меню в футере - вообще другой.
7) скрипты нужно перед закрытие боди засовывать, чтобы не тормозили загрузку страницы.

8) Логотип зачем-то разделен на 2 картинки, когда это одно целое. И вообще это контент страницы - его могут поменять в любой момент. Его надо через img вставлять.
9) .media ul li#videoIco { - излишняя вложенность элементов. ID страницы итак уникален и задав оформление только для #videoIco стиль применится также корректно.

10) При использовании base64 не плохо бы закомментировать строк с изначальным расположением картинки. Чтобы в случае чего было понятно, что это за картинка, какую смысловую нагрузку она несет и ее можно было бы отредактировать и после этого спокойно заменить зашифрованный код на новый.
11) Много флоатных элементов, не возращенных в поток и даже не рассчитанных на возвращение в него - это плохо.

12) :lst-child лучше не использовать - 8й осел не поймет. Лучше :first-child и маргин лефт тогда ставит - первом ребенку убираем. Я лично использую конструкцию вообще li + li margin-left
 И да - в 8м осле получилась картина Дали )))).... http://joxi.ru/Yv43UxjKTJAaMF4WB8I Нужно включить жаваскрипт поддержки хтмл5 тегов.

Также я увидела, что у тебя стоят кривые шрифты для 8го осла http://joxi.ru/RP83UxjKTJAbMA_5uto они не загрузились, от этого дополнительные проблемы с отображением. Скорее всего это баг имен шрифтов - нужно вручную открывать шрифт в редакторе шрифтов и править его имя, чтобы не было пробелов, дефисов - в общем занятие не для слабонервных =)........
Кстати по ходу у тебя слетели закодированные изображения в осле - потому что их надо в кавычки взять.

13) 

<div class="buttonGroup">			<div id="prev"><span>Prev</span></div>			<div id="center">

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

14) ХТМЛ5 теги - хедр, футер - нужно бы выставить им блочное отображение, обычно это в резетере или нормалайзере прописано уже

Блин, как ты скрипты написал?) Выглядит круто - без плагинов всяких и все работает... Видимо опыт у тебя немаленький?

Edited March 30, 2014 by Zverushka

[ZondArt]

Zverushka Спасибо Вам большое за такой развёрнутый ответ. Буду анализировать, то что Вы сказали и исправлять! В ближайшее время попробую сделать и выложить  

Да, JS код я сам писал. Опыт в программировании у меня есть небольшой, сейчас смотрю в сторону front-end разработки, но для начала хочется на хорошем уровне освоить вёрстку (: Вот думаю следующий макет взять резиновый-адаптивный)