Тестовое задание.

[pangurban]

Отправил в фирму резюме, дали тестовое задание.

 

Посмотрите на наличие любых придирок.

Там, где иконки браузеров нужно было сделать так, что бы при отсутствии изображений открывался центрированный (кроме ie) текст.

 

http://pangur.bget.ru/task/

[DivMan]

почему в фирме дали такое лёгкое задание? 

[pangurban]

А мне откуда знать

[Q4Dizzy]

Звёздочки можно сделать было векторными.

[pangurban]

Звёздочки можно сделать было векторными.

 

Кстати, а ie8 вообще ни как с svg не дружит?

[Q4Dizzy]

Я использую сервис icomoon. Проблем в ие 8 не замечал.

[pangurban]

Ну если в шрифтовые форматы конвертировать, то да

[npofopr]

Задание весьма не лёгкое.

И я бы вас скорее всего не взял на работу.

Слишком много лишних классов. Хотя возможно кто-то и любит такое.

 

- у li я бы убрал классы.

- зачем в кнопке еще span? и кнопка это возможно button? что будет если заменить <a> на <button> или <input>, не сломается?

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

- рейтинг... а как задать, например, чтобы 3 звездочки "горели"? есть класс для этого? или там data- какой нибудь?

- .col-lt и .col-rt зачем? Еще и одинаковые. Да и паддинг у правого наверно убрать надо? Может от вас ждут использование column, чтобы показать, что вы в тренде? Тем более, что там обычный текст, который скорее всего будет заполнять обычный пользователь. Такие классы он никогда не вставит.

-  подчеркивание пунктиром через :after? хм... ну пускай)

- .topic-caption:before зачем? Как программист или пользователь будет "генерировать" туда текст? Вдруг надо будет сменить слово?

- понять не могу, как вы отступ к параграфов сделали, не пробелами, надеюсь?)

- раз макет простой, почему бы не сделать адаптив?

- favicon.ico сделайте еще png ну и если делать адаптив то под все устройства можно сгенерировать.

По поводу звездочек:

http://css-tricks.com/star-ratings/

http://fortawesome.github.io/Font-Awesome/examples/#custom

[sigma77]

- понять не могу, как вы отступ к параграфов сделали, не пробелами, надеюсь?)

 

Не. Там мини хак )

 .article p:first-letter {      margin: 0 0 0 1em; }

ТС. Для этого есть свойство - http://htmlbook.ru/sites/search/?q=text-indent&x=0&y=0

[npofopr]

Не. Там мини хак )

ужас) Кругом хакеры))

[pangurban]

Спасибо, все по делу.

Действительно ужас) Вот и верстай после этого на сонную голову

Edited October 16, 2014 by pangurban

[pangurban]

col-lt и .col-rt зачем? Еще и одинаковые. Да и паддинг у правого наверно убрать надо? Может от вас ждут использование column, чтобы показать, что вы в тренде? Тем более, что там обычный текст, который скорее всего будет заполнять обычный пользователь. Такие классы он никогда не вставит.

 

Если делать через column, то в webkit'овских браузерах обрезается все, что выходит за колонки. Обрежутся черточки у списка.

column не подходит.

 

http://jsfiddle.net/xuooo99p/5/

Edited October 16, 2014 by pangurban