Ошибки в верстке по PSD-макету

[Faruq]

Добрый день, ув. форумчане. Недавно проходил собеседование и получил тестовое задание. К сожалению, я интересуюсь программированием и в верстке был не силен, и потому не смог справиться с версткой по готовому PSD-макету. Мне сказали, что сверстано было вообще не по макету. Я очень прошу вашей помощи: оставляю ссылку на тестовый домен, где можете посмотреть результат работы, а так же ссылку на архив с самим макетом. Раскритикуйте мою работу, как можно более полноценно. Я очень жаждую устранить этот косяк и научиться качественно верстать сайты.

http://test13.meximas.com/  тестовый домен

https://drive.google.com/file/d/0Bxd4ns8xGZHtb1ljSkJDNUFTc0U/edit?usp=sharing архив

Макет в png http://test13.meximas.com/img/layout.png

Текст задания:

 

1. Сверстать макет в html. Использовать можно любые технологии. Знание php в этом задании не требуется.
2. При наведении на пункт меню в шапке его фон затемняется как показано на макете.
3. При клике на логотип страница обновляется.
4. Надписи "Just do it" вместе с прозрачным белым фоном по умолчанию не должно быть видно. Она должна появляться при наведении на плашку (черный рисунок с разлетающимися фигурами).
5. Верхняя часть (шапка, меню, логотип, надпись, плашка) - "резиновые", то есть тянутся на всю ширину. Ширина контентной части фиксированная (940px).

Так же хорошо, но не обязательно, если будут реализованы следующие вещи:

1. Footer всегда прижат к низу страницы.
2. Шрифт Pt Sans (как на макете). Взять его можно на google fonts.
3. Кроссбраузерная верстка.
4. Плавная анимация появляющихся и исчезающих объектов.

Edited January 23, 2014 by Faruq

[npofopr]

Тогда вам стоит учесть. Что скачает ваш архив 1% из 100.

А вот если вы свою работу выложите на тестовый домен, тогда просмотров будет 90%.

Макет можно выложить просто картинкой, jpg.

Задание в теме, текстом.

[Faruq]

Тогда вам стоит учесть. Что скачает ваш архив 1% из 100.

А вот если вы свою работу выложите на тестовый домен, тогда просмотров будет 90%.

Макет можно выложить просто картинкой, jpg.

Задание в теме, текстом.

Спасибо большое, учту

[antonKar]

1) в шапке красный не по макету

2) картинку в шапке нельзя тянуть; надо было в макете посмотреть нет ли продолжения у картинки; если нет, то просто чёрным залить по бокам

3) Шрифты не те везде

4) Логотип не в том месте. Во-первых отступ сверху не тот, во вторых было сказано, что ширина контентной части 940 пикселей. Вот внутри них и надо всё пихать.

5) У блока с Just do it высота неправильная

6) Текст вообще говно в вёрстке по содержанию. Рыба в макете конечно тоже говно, но можно набрать текста из Википедии английской.

7) Картинки тоже надо делать не на "а насрать", а взять из макета все 3 картинки

8) У серой центральной части отступ снизу не по макету

9) Подвал к низу не прибит

10) что за белый фон по краям у серого блока центрального?

11) высота шапки с чёрной картинкой неправильная

12) У подвала цвет и высота неправильные

13) Всплытие Just do it можно сделать на css

14) Меню верстается связкой nav+div+a (если кто будет говорить, что списками - это старая схема; навигация и списки - это совершенно разные по логике вещи, для которых есть совершенно разные теги) *прогнозирую уход от обсуждения макета и переход на обсуждение этой штуки*

Edited January 23, 2014 by antonKar

[Animkim]

*удалил*

Edited January 25, 2014 by Animkim

[Faruq]

13) Всплытие Just do it можно сделать на css

Спасибо огромное за критику! Но я бы хотел узнать о том, чем лучше это было бы сделать на CSS?

[antonKar]

Хотя бы тем, что это будет более контролируемо и быстрее написано, чем на JS.

[advokatua]

Косяков через край. Тут нужно не на косяки указывать, а искать материал по верстке с самых низов и штудировать.

Если желание не стухнет, то постараюсь сегодня/завтра выложить свой вариант, заодно может и меня кто-то поправит ))

 

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

Edited January 26, 2014 by advokatua

[Faruq]

Косяков через край. Тут нужно не на косяки указывать, а искать материал по верстке с самых низов и штудировать.

Если желание не стухнет, то постараюсь сегодня/завтра выложить свой вариант, заодно может и меня кто-то поправит ))

 

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

Это была стажировка. Я если честно никогда и не увлекался версткой. Спасибо огромное, если сделаете и если Вам не тяжело, быть может у Вас есть ссылки на материал по этой теме?

[Zverushka]

14) Меню верстается связкой nav+div+a (если кто будет говорить, что списками - это старая схема; навигация и списки - это совершенно разные по логике вещи, для которых есть совершенно разные теги) *прогнозирую уход от обсуждения макета и переход на обсуждение этой штуки*

Очень спорный вопрос. Я даже не уверена, что хотя бы половина верстальщиков сейчас использует эту концепцию для верстки меню.

Я даже порылась на w3c http://www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element тут в качестве примеров приводится nav со списками внутри. 

Я лично выступаю за nav ul li - нагляднее. удобнее, легче в верстке и применение стилей, удобно для некоторых cms (по крайней мере на wordpess меню формируется именно с помощью списков - если у каких-то не так - расскажите мне об этом - просто интересно узнать статистику).

Edited January 26, 2014 by Zverushka

[antonKar]

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

 

Нагляднее, удобнее и легче в вёрстке и применении стилей связка nav + a. Всё. div у нас просто для оформления.

 

1) связка nav+div+a короче, чем связка nav+ul+li+a

2) не надо сбрасывать стили для списков (если конечно у нас не юзается normalize.css, по крайней мере у меня в кастомной редакции маркеры сброшены)

[advokatua]

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

Интересно, что за вакансия с таким простым макетом )

 

Вот это уже более менее похоже на правду: http://webdevelop.zz.mu/case1/

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

 

Огромную долю материала черпануть можно здесь http://htmlbook.ru/ и книги конечно. 

Edited January 26, 2014 by advokatua

[Анна]

Меню верстается связкой nav+div+a

Я лично выступаю за nav ul li

Мне тоже интересно, для "статистики" .

Кроме перечисленного antonKar еще, возможно, можно добавить семантичность, ведь не всегда главное меню это список по сути.

[Faruq]

Я скидывал резюме на вакансию "Веб-программист стажер". Меня пригласили на собеседование. Там мы обсудили условия работы, затем они мне дали список из 20 вопросов, где были HTML, CSS, JavaScript, jQuery, PHP. Я почти пулей ответил на 17 из 20 вопросов, так как я уже почти год время от времени решаю мелкие задачки. Мне дали это тестовое. Оно было рассчитано на 48 часов. Этим заданием я возился дома. Источники можно было использовать абсолютно любые

[Faruq]

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

Интересно, что за вакансия с таким простым макетом )

 

Вот это уже более менее похоже на правду: http://webdevelop.zz.mu/case1/

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

 

Огромную долю материала черпануть можно здесь http://htmlbook.ru/ и книги конечно. 

 

Огромное спасибо еще раз. Я буду очень очень благодарен, если бы Вы коротко написали в общих чертах, о том какие действия выполняли при нарезке макета.

 

[advokatua]

Макет довольно элементарный, я даже не знаю с чем тут могут возникнуть сложности. Просто взял и нарезал как есть. Если в таком макете что-то не ясно, то нужно начинать с самых низов и пробовать верстать отдельные блоки, а не целые макеты. Полно примеров, которые я и сам все переверстал можно взять тут http://htmlbook.ru/practical

там же в комментах можно смотреть как остальные выполнили задание.

 

Единственная сложность в данном макете может показаться разве что с прижатием футера к полу. В гугле  полно подбробных описаний.

[Faruq]

Макет довольно элементарный, я даже не знаю с чем тут могут возникнуть сложности. Просто взял и нарезал как есть. Если в таком макете что-то не ясно, то нужно начинать с самых низов и пробовать верстать отдельные блоки, а не целые макеты. Полно примеров, которые я и сам все переверстал можно взять тут http://htmlbook.ru/practical

там же в комментах можно смотреть как остальные выполнили задание.

 

Единственная сложность в данном макете может показаться разве что с прижатием футера к полу. В гугле  полно подбробных описаний.

 

Спасибо большое. Но на этой странице я и сам много задачек выполнил еще давным давно. Мне нужно именно материал о том, как правильно вырезать из макета. Как футер прижать к полу я впринципе знаю, но вот верстка по макету для меня сложновата пока что.

[belosnezka]

 

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

Интересно, что за вакансия с таким простым макетом )

 

Вот это уже более менее похоже на правду: http://webdevelop.zz.mu/case1/

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

 

Огромную долю материала черпануть можно здесь http://htmlbook.ru/ и книги конечно. 

 

Подскажите пожалуйста, как реализовали 

"Just do it" всплывающим. Посмотрела код, но что-то не вижу, что дает возможность всплывать ему.Заранее спасибо за ответ

[Animkim]

Подскажите пожалуйста, как реализовали 

"Just do it" всплывающим. Посмотрела код, но что-то не вижу, что дает возможность всплывать ему.Заранее спасибо за ответ

 

 Наводите на элемент,  правая кнопка мыши, показать код элемента (Так в хроме, в остальных браузерах почти так же)

[belosnezka]

 

Подскажите пожалуйста, как реализовали 

"Just do it" всплывающим. Посмотрела код, но что-то не вижу, что дает возможность всплывать ему.Заранее спасибо за ответ

 

 Наводите на элемент,  правая кнопка мыши, показать код элемента (Так в хроме, в остальных браузерах почти так же)

 

спасибо за ответ,смотрела именно так.Только не поняла,какой фрагмент кода отвечает за отображение/скрытие.

.slider .slogan {position: absolute;bottom: 0;width: 100%;height: 0px;background-color: #191919;background-color: rgba(255, 255, 255, 0.1);line-height: 64px;text-align: left;text-indent: 10px;font-size: 36px;font-weight: normal;color: #ecf0f1;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;z-index: -1;}user agent stylesheetdiv {display: block;}

[prophet_07]

.main .slider:hover .slogan {
bottom: 0;
height: 67px;
z-index: 99;
}

[advokatua]

 

Вот это уже более менее похоже на правду: http://webdevelop.zz.mu/case1/

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

 

Подскажите пожалуйста, как реализовали 

"Just do it" всплывающим. Посмотрела код, но что-то не вижу, что дает возможность всплывать ему.Заранее спасибо за ответ

 

 

1) Вот это сам слоган. Изначально скрыт с помощью 0 высоты и прижат к полу слайдера

.slider .slogan {  position: absolute;  bottom: 0;  width: 100%;   height: 0px;  /*Изначальную высоту блока ставим 0, и при ховере ее меняем на нужную*/    background-color: #191919;  background-color: rgba(255, 255, 255, 0.1);    line-height: 64px;  text-align: left; /*лишнее, осталось от экспериментов*/  text-indent: 10px;  font-size: 36px;  font-weight: normal; /*лишнее, осталось от экспериментов*/  color: #ecf0f1;  -webkit-transition: all .2s ease-in-out;  -moz-transition: all .2s ease-in-out;  -ms-transition: all .2s ease-in-out;  -o-transition: all .2s ease-in-out;  transition: all .2s ease-in-out;  z-index: -1; /*Вроде как лишний. До того как написал блок контента, блок со слоганом из-за неверного порядка слоя немного неверно отображался при ховере*/}

2) Событие при наведении мыши на блок слайдера (hover):

.main .slider:hover .slogan {  bottom: 0;  /*лишняя строка, осталась после экспериментов*/  height: 67px;  z-index: 99;}

Edited January 29, 2014 by advokatua