Практика

[Задание по вёрстке #16] Виджет для Twitter

Добрый вечер, верстальщики! Уже пятница суббота и пора потренироваться на выходных. [Задание по вёрстке] это рубрика статей, которые мы публикуем по пятницам. В каждой статье Вы найдете шаблоны кнопочек, форм или даже сайтов в формате PSD. Ваша задача красиво и качественно сверстать шаблон.

Лучшее решение [Задание по вёрстке #15]

На этой неделе в победителях было два претендента, Blowup и usf. Но лучшим стал usf с сумасшедшей анимацией на ховер, поздравляем! Вкратце, по каждой работе:

  • Николай — хорошая работа, недостаток — большая вложенность
  • Blowup — хорошая работа, кнопка Checkout в теге button, логично тогда его в тег form обернуть
  • Annecy — что-то со шрифтами не то, чуть аккурантнее и будет хорошо
  • Libiros — если это первая вёрстка в жизни, то есть куда расти, повнимательнее к макету
  • usf — уже какой раз поражают эффекты с анимацией, комментарий в html забавный)
  • Sergalas — всё та же проблема, большая вложенность — проще, доступнее, меньше тегов
  • lazuren — неплохо, обратите внимание как остальные треугольники на тултипе исполнили
  • Kletchatii — со шрифтами беда и не стоит использовать такое количество id

Благодарим участников и смотрим новое задание.

[Задание по вёрстке #15] Корзина интернет-магазина

Добрый вечер, верстальщики! Уже пятница и пора потренироваться на выходных. [Задание по вёрстке] это рубрика статей, которые мы публикуем по пятницам. В каждой статье Вы найдете шаблоны кнопочек, форм или даже сайтов в формате PSD. Ваша задача красиво и качественно сверстать шаблон.

Лучшее решение [Задание по вёрстке #14]

Победителем на этой недели стал Blowup. Комментарии к работам:

  • Blowup — хорошая работа. В комментариях писали о подгрузке иконок, это заметно только в хроме, а так иконки в спрайте. Можно было оптимизировать css, прописать background один раз к тегу, а потом двигать его с помощью класса.
  • Sergalas — добавил transition, хорошо получилось, можно было поиграться со скоростью, ускорить немного. От спанов можно избавиться, например как Blowup. На макете сам тултип по аккуратнее выглядит.
  • Tyffaxyn — понравилось тем, что иконки в тултипе свёрстаны без классов, на вложенность. Если вести мышкой сверху-вниз, то тултип всплывает рано
  • usf — классный эффект на ховере, манера исполнения на отлично, жаль что не кроссбраузерно и шрифт подпортил иконки
  • Winner — неплохо для первой верстки. Можно сделать без использования списка, как в предыдущих работах, тем самым меньше вложенность, меньше html
  • Annecy — хорошая работа, но опять же ul
  • lazuren — иконки не в спрайте, ul, transition только для вебкита

Благодарим участников и смотрим новое задание.

[Задание по вёрстке #14] Тёмный тултип

Добрый вечер, верстальщики! Уже пятница и пора потренироваться на выходных. [Задание по вёрстке] это рубрика статей, которые мы публикуем по пятницам. В каждой статье Вы найдете шаблоны кнопочек, форм или даже сайтов в формате PSD. Ваша задача красиво и качественно сверстать шаблон.

Лучшее решение [Задание по вёрстке #13]

Лучшим на этой недели стал EdBond, поздравляем. Не много по каждой работе:

  • Sergalas — единственный у которого присутствует "шум", не стоило делать выравнивание текста во ширине
  • Spamol — аккуратная работа, но перебор с id-шниками. Можно сверстать классами или на вложенность
  • EdBond — фантазия, исполнение +100500) можно было бы и убрать прозрачность у "липучки"
  • usf — хорошее исполнение. Стоит придерживаться макету, поворот стикера, цвет текста, ссылка

Благодарим участников и смотрим новое задание.

[Задание по вёрстке #13] Заметка (стикер)

Добрый день, верстальщики! Уже пятница и пора потренироваться на выходных. [Задание по вёрстке] – это рубрика статей, которые мы публикуем по пятницам. В каждой статье Вы найдете шаблоны кнопочек, форм или даже сайтов в формате PSD. Ваша задача – красиво и качественно сверстать шаблон.

 

Лучшее решение  [Задание по вёрстке #12]

Сегодня мы выбрали 2-х человек, amelice и krontill. Теперь немного конкретнее:

  • krontill — хорошее исполнение, но большое количество div-ов и id-шников
  • amelice — есть расхождения с макетом, касательно отступов

Благодарим остальных участников и смотрим новое задание!