Первый макет

[Roger]

Добрый вечер!

Вот сверстал свой первый макет ссылка.

Задания взята отсюда http://htmlforum.ru/index.php?showtopic=47965

 

Прошу оценить  по html и css.

javascript пока еще не изучал

 

 

Использовал 960 grid

слайдер отсюда взял http://liquidslider.com/ 

 

 

с шрифтом не знаю что делать в psd который используется платный.

Edited March 6, 2014 by Roger

[Bryant-24]

Теги <header> и <footer> не поддерживаются в IE8 и ниже . В связи с этим в IE8 отображается только их содержимое http://joxi.ru/wi8ZU_3JTJAbFB_Hl_M

И еще - зачем ты подключаешь скрипты в body после футера?
 

 

javascript пока еще не изучал

Поэтому на будущее - скрипты подключай в теге head (лучше выносить в общий файл скриптов, а в body, по возможности, оставляй чистую верстку

Edited March 7, 2014 by Bryant-24

[npofopr]

Поэтому на будущее - скрипты подключай в теге head

уже года 3-4 рекомендуют подключать скрипты в конце страницы. Дабы увеличить скорость отображения страницы. Т.е. сперва грузятся стили и html, а потом уже скрипты. На эту тему много инфы + google speed test это посоветует. 

Только ему надо скрипты слайдера убрать тоже вниз. И 2 раза подключать jquery точно уж не надо будет.

 

А раз использует header и footer то IE8 видимо не нужен. 

[Xenia Wanger]

Очень не хватает ховеров на ссылках

[zenw]

Я сам не профи, но позволю несколько замечаний, то, что заметил.

1. фон заголовка в макете — градиентный, у вас же сплошной

2. 

<a href=""><i>in English</i></a>

логичнее было бы, имхо, убрать тег <i> и заменить его правилом font-style: italic в CSS.

3. 

<h3 class="facebook">Мы на <a href="">Facebook</a></h3>

не вижу смысла оборачивать этот блок в h3, это ведь не заголовок. Обычный div подошел бы больше, тем более, что в ТЗ сказано:

1.2. Учесть, что под ссылкой "Мы на Facebook" появятся в будущем еще несоклько аналогичных ссылок.

и в таком случае логичнее было бы сделать список с одним элементом. Сюда же относится жестко заданный margin-top у поискового инпута ниже - при добавлении еще одной ссылки верстка сползет.

4.

Пунктов меню может быть больше -- это один список который выводится в 2 столбца.

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

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

6. тень прикрепленной к краю окна фиговины справа сильно отличается от макета.

7. насколько я понял, у первого слайдера должно быть 4 страницы, а не 5, как у вас. Это становится ясно, если включить отображение направляющих в ФШ (Ctrl+. Кроме того, не вижу смысла в таком слайдере, как у вас - зачем это, по одному пункту пролистывать?

8. со вторым слайдером и так понятно, что он очень сильно отличается от нужного вида - не хватает страниц, кнопки не там.

9. в подписи статьи не хватает курсива

10. блоки в футере расположены неправильно, смещены по горизонтали.

11. не понимаю, зачем подключать одновременно и reset.css, и normalize.css. Выберите что-либо одно.

12. jquery и скрипты слайдера подключаются дважды - в начале body и в конце.

Ну, как-то так. Чего только не сделаешь, только бы не работать)

[Roger]

всем спасибо, буду стараться

Edited March 8, 2014 by Roger

[klierik]

1. это что за просвет: http://take.ms/UUqs9

2. пользоваться слайдером неудобно - ползунок не "тягается" и предпологают что под тач нет поддержки.

3. вот что видим при сравнении с оригиналом: http://take.ms/yVGQ6 -- очень плохо.

 

по html

1. 

<p><span>Евгений Демин,<br>Генеральный директор SPLAT</span></p>

во-первых -- это не абзац. во-вторых - это 2 отдельные строки. их не надо разделать через <br />. Вообще использование <br> ожидается, как правило, только в контенте, но никак не в оформлении. Допустим я захочу завтра что бы имя было более темного цвета - как я могу это осуществить? а никак.

 

2.

<p>Professional<br>                 oral care</p>

Это лозунг, а не абзац.

 

3. .top_menu -- в ТЗ специально обратил внимание на то что:

 

Пунктов меню может быть больше -- это один список который выводится в 2 столбца.

 

 

4.

<h3 class="facebook">

с чего это он <h3>? 

 

5. Форма поиска отстайлена плохо. Иконка прилипает к краю в плотную. Почему она серая в начале а потом белая как на макете?

 

по css

1. http://titan.bl.ee/css/style.css -- поддерживать такой файл очень сложно. проще переписать.

2. 

плохо:

.logotype p

хорошо:

.logo-losung

3.

плохо:

.top-menu a

хорошо:

.top-menu-link {}.top-menu .link {}

3.

плохо

.slider ul

хорошо

.slider-list {}.slider .list {}

4.

плохо

.where-buy img

хорошо

.where-buy .img {}.where-buy .icon {}

А вообще этот элемент должен быть частью спрайта.

 

5.

плохо

footer {    border-top: 1px solid #d2d6d9;    margin-top: 70px;}

хорошо

.footer {}

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

 

по организации файлов

1. подключен должен быть 1 css файл (сжатый)

2. тоже самое и про js (обращаю на это внимание, но в рамках обучения это не критично)

 

в общем пока что сыровато -- требуется доработка.