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

[codeliner]

На выходных сверстал, если можно так выразиться, еще одну страницу.

Макет в png  http://codeliner.ucoz.com/fadelicious/home.png

Макет в psd  https://yadi.sk/i/Td7IVc0pqKKNc

Сверстанная веб-страница  http://codeliner.ucoz.com/fadelicious/index.html

Прошу объективной критики и дельных советов на будущее 

Edited March 21, 2016 by codeliner

[codeliner]

Хм, более 30 просмотров и ни одного ответа. В других темах, я смотрю, коээфициент - от 10 до 20 просмотров на ответ. Интересно, это связано с простотой страницы, или еще с чем-нибудь 

[Spotlight]

1. Логотип должен быть ссылкой и в теге img, он не должен добавляться через css.
2. Блокам offer я бы дал обертку div.wrap-offer и ему задал margin-top: 50px; а не каждому блоку давать отступ сверху и так как там вы используете float: left; то нужно убрать обтекание у блока.
3. Много ненужных свойств для блока global-container http://pixs.ru/showimage/2016032222_3973083_21223897.png
4. Ненужно давать чуть ли ни каждому блоку border: 0px solid black;
5. Изображения в слайдере должны добавляться через тег img.
6. Также не понятно почему вы дали копирайту left: -50%; margin-left: 170px; если он без этих свойств выглядит так как по макету.
7. Шрифт в меню, кнопках View details и в тексте приветствия не такой как в макете.
8. Зачем давать блоку second-footer width: 200%;  left: -50%; ?
9. Зачем в head тег <style> ?

Edited March 22, 2016 by Spotlight

[alejandro13]

1. Я бы в блоках offer кнопку "view details" делал обычной ссылкой, а не тегом button - зачем он там?

2. Зачем вешать столько свойств на абзац? http://prntscr.com/ainp4t 

И что вообще дает width и height:auto?

[Int]

В 22.03.2016в23:10, Spotlight сказал:

8. Зачем давать блоку second-footer width: 200%;  left: -50%; ?

Видимо, это чтобы не делать transform: translateX(-50%)

 

У меню Contact справа полоска осталась.

[codeliner]

В 22.03.2016 в 00:10, Spotlight сказал:

1. Логотип должен быть ссылкой и в теге img, он не должен добавляться через css.

Полностью согласен

В 22.03.2016 в 00:10, Spotlight сказал:

2. Блокам offer я бы дал обертку div.wrap-offer и ему задал margin-top: 50px; а не каждому блоку давать отступ сверху и так как там вы используете float: left; то нужно убрать обтекание у блока.

Тоже об этом подумал, когда уже сделал страницу. У меня из-за того, что они идут без обертки произошло схлопывание, из-за чего были проблемы с размещением футера. Поэтому у global-containerа идет overflow:auto.

В 22.03.2016 в 00:10, Spotlight сказал:

3. Много ненужных свойств для блока global-container http://pixs.ru/showimage/2016032222_3973083_21223897.png

Да, но height:auto нужно, т.к. без него футер правильно не позиционируется. Overflow:auto тоже нужно, о чем я писал выше.

 

В 22.03.2016 в 00:10, Spotlight сказал:

4. Ненужно давать чуть ли ни каждому блоку border: 0px solid black;

Просто изначально я даю каждому блоку border:1px solid black, чтобы лучше видеть его очертания и, таким образом, нагляднее видеть результат кода. А потом я это свойство не удаляю, а лишь обнуляю, чтобы в случае необходимости можно было бы быстрее включить границу

 

В 22.03.2016 в 00:10, Spotlight сказал:

5. Изображения в слайдере должны добавляться через тег img.

Почему обязательно так? Или вы имеете в виду, что эти изображения должны быть ссылками?

 

В 22.03.2016 в 00:10, Spotlight сказал:

6. Также не понятно почему вы дали копирайту left: -50%; margin-left: 170px; если он без этих свойств выглядит так как по макету.

Там было разное отображение в различных браузерах, поэтому пришлось ставить такие заплатки. Поэтому, кстати, подключены еще отдельные стили для IE, для Firefox и для Safari. По другому как-то не получалось.

В 22.03.2016 в 00:10, Spotlight сказал:

7. Шрифт в меню, кнопках View details и в тексте приветствия не такой как в макете.

Это да, шрифты я подключать еще пока не научился.

 

В 22.03.2016 в 00:10, Spotlight сказал:

8. Зачем давать блоку second-footer width: 200%;  left: -50%; ?

Чтобы скрыть внутреннюю тень слева и справа (т.к. она внутренняя, то способ с псевдоэлементом не прокатывает). По этой же причине его высота на 20 пикселей больше, чем видимая, и он смещен на 20 пикселей вверх (margin-top:-20px).

 

В 22.03.2016 в 00:10, Spotlight сказал:

9. Зачем в head тег <style>

Видимо забыл удалить (подключал внутренние стили, когда не срабатывали подключенные - там проблемы со специфичностью были).

 

В 22.03.2016 в 00:36, alejandro13 сказал:

Я бы в блоках offer кнопку "view details" делал обычной ссылкой, а не тегом button - зачем он там?

Это да, согласен.

В 22.03.2016 в 00:36, alejandro13 сказал:

2. Зачем вешать столько свойств на абзац? http://prntscr.com/ainp4t 

И что вообще дает width и height:auto?

Ну там процентов 80 свойств нужные. А width, и height auto - назначаю просто, чтобы проговаривать про себя, что у блока вот эти свойства, и к чему это приводит и.т.д. - в учебных целях, одним словом.

 

В 24.03.2016 в 15:52, Int сказал:

Видимо, это чтобы не делать transform: translateX(-50%)

Похоже, можно было и так сделать, но ширину все равно больше 100% надо назначать - и так и так.

 

В 24.03.2016 в 15:52, Int сказал:

У меню Contact справа полоска осталась.

Забыл указать li:last-child a {background:none;}

Спасибо всем за ответы!

Edited March 26, 2016 by codeliner

[jkikksa]

Решил заказчик добавить еще один пункт меню... и дописать немного текста в колонки...