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

[Crystal-3]

Здравствуйте)

Занимаюсь вёрсткой 2,5 месяца. Поскольку мой учитель - это интернет, мне очень не хватает советов опытных верстальщиков (и не очень опытных).

Буду  благодарна за советы, подсказки, а также критику моей работы.

Сразу скажу, что страничка получилась тяжёлой за счёт фона, нестандартного шрифта и слайдера.

Кстати, слайдер на хостинге почему-то отказывается работать. Не могу найти причину.

Ссылка на сайт: http://exumple4.esy.es

 

 

[WEB-best]

Превое что бросается это прозрачные квадратики у стрелок в слайдере, не знаю как правильно обьяснить.
<div class="logo"> можно и без него обойтись, дальше смотреть не буду, но уверен и еще есть не нужные div'ы

секционые элементы мне кажется лучше пока что не использовать, ie8 не поддерживает.

Edited May 10, 2014 by WEB-best

[vera17]

overflow: hidden; не лучший способ при обтекании, лучше применять clearfix,

префиксы для border-radius можно не прописывать

маркеры у списка лучше делать через background

nav лучше float:right, а не отступ в 330 px

А так очень хорошо, дерзайте, Вы на правильном пути!

.cakes, .desserts,.creations лучше вставить через img 

Edited May 10, 2014 by vera17

[Crystal-3]

 WEB-best, да действительно div лишний, делала исправления и как-то упустила что он уже не нужен.

 

vera17, а можно подробнее почему на ваш взляд при обтекании лучше  применять clearfix? Я как-то уже приспособилась с overflow: hidden.

 

И огромное спасибо за советы)

 

 

 

А так очень хорошо, дерзайте, Вы на правильном пути!

Ой, так приятно) Спасибо за поддержку)

[vera17]

 Всегда пожалуйста!

http://habrahabr.ru/post/189118/

http://htmlbook.ru/samlayout/blochnaya-verstka/plavayushchie-elementy

Если владеете английским

http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

[Crystal-3]

Ребята, я уже и слайдер починила. Дайте мне еще пару советов и порцию критики, кому не жалко.

[cyklop77]

я бы фон сайта центрировал

[Crystal-3]

 cyklop77, спасибо за совет)

Честно говоря, он меня немного озадачил, поскольку я считала, что если для background задано свойство cover, которое масштабирует изображение с сохранением пропорций, то фон и так будет по центру.

После некоторых колебаний всё-таки прописала center для фона. Наверное так будет правильно.

[CroaToa]

.top .prev, .top .next {       outline: none;}

добавьте и избавьтесь от синей рамки вокруг кнопок слайдера.

[cyklop77]

в моём последнем виндовом хроме кнопки слайдера показываются не идеально круглыми. обрезанными

[CroaToa]

в моём последнем виндовом хроме кнопки слайдера показываются не идеально круглыми. обрезанными

+1, такая же ситуация, просто я замолчал подумав, что дизайн такой, мало ли) 

[Crystal-3]

cyklop77, CroaToa, всё исправила, спасибо.

 

Кстати, кнопки слайдера обрезал, как оказалось, button)

[Maxim_2.0]

Здравствуй, Crystal-3

Я сам только учусь но все же:

• ты бы выложила макет для сравнения, а то не понятно что нарисовал дизайнер и что сверстано
  
• не понятно зачем использованы инлайн стили, в общий файл их.
  
• похоже верстка делалась на основе готового шаблона страницы, но из него не удалены лишние элементы. например есть пустой тег <style>. Может там и еще что лишнее.
  
• Галерея в Safari отображается вот так: http://yadi.sk/d/Ujh1m6sXQ2yBQ
  
• кстати версия jQuerry 1.4.2, использованная при верстке это аж 2010 год. Может в последней версии и проблем со слайдером не будет...
  
• ?? я не уверен что надписи на картинках нужно делать тегом h2. Я задумался сейчас над этим, но похожих примеров пока не нашел.
  

[cyklop77]

del

Edited May 13, 2014 by cyklop77

[Crystal-3]

Maxim_2.0, здравствуйте)

Сейчас попробую раставить все точки над i 

 

1.  По поводу макета. Никак не могу найти как вставить картинку с своего компа, здесь кругом нужен URL. Может кто подскажет.

 

2.  Стили я прописываю исключительно в файле CSS.

 

3.  Нет, весь код написан вручную, никаких шаблонов. 

 

не удалены лишние элементы. например есть пустой тег style

 

Ну это я могу только догадываться. Если ты смотришь на код через Фаербаг, то в слайдере действительно присутствуют теги стиля. Они не вводились вручную. После подключения плагина и библиотек jquery этот код появился сам по себе. Это я называю "волшебство JavaScript",  по другому не объясню, потому что JavaScript ещё не изучала.

 

4. Только что проверила в Safari, всё в порядке. По твоему скриншоту вижу, что страничка просто не догрузилась.

 

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

 

6. Надписи на картинках сделала в виде заголовков исключительно для поисковиков.  

Edited May 14, 2014 by Crystal-3

[Mugen1]

Я тоже новичёк и скажу, что достаточно неплохо, меню можно было поинтересней сделать ( со свестелками перделками, но раз такой макет )

[Ironimus]

Согласен с коментом выше, подчеркивание ссылок в навигации при наведении мыши смотрится как то не красиво.

[Maxim_2.0]

Maxim_2.0, здравствуйте)

Сейчас попробую раставить все точки над i 

 

1.  По поводу макета. Никак не могу найти как вставить картинку с своего компа, здесь кругом нужен URL. Может кто подскажет.

 

2.  Стили я прописываю исключительно в файле CSS.

 

3.  Нет, весь код написан вручную, никаких шаблонов. 

 

 

 

не удалены лишние элементы. например есть пустой тег styleне удалены лишние элементы. например есть пустой тег style

 

Ну это я могу только догадываться. Если ты смотришь на код через Фаербаг, то в слайдере действительно присутствуют теги стиля. Они не вводились вручную. После подключения плагина и библиотек jquery этот код появился сам по себе. Это я называю "волшебство JavaScript",  по другому не объясню, потому что JavaScript ещё не изучала.

 

4. Только что проверила в Safari, всё в порядке. По твоему скриншоту вижу, что страничка просто не догрузилась.

 

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

 

6. Надписи на картинках сделала в виде заголовков исключительно для поисковиков.  

Добрый день, Crystal-3

 

Насчет заголовков для поисковиков я не подумал, буду сам иметь ввиду))

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

 

А насчет пункта 1 я предположил что страничка сверстана из макета PSD. Его можно сохранить как jpeg. На фрилансерских сайтах обычно выкладывают такую картинку в jpеg, чтобы фрилансеры оценили стоимость и сроки работы.

[webmasterFast]

Зачем тебе сверху квадратики ?

[Crystal-3]

Это вы о чем?