Практика

Перевод статьи How to Become a Great Front-End Engineer с сайта philipwalton.com, c разрешения автора— Филипа Уолтона.

Недавно я получил электронное письмо от читателя моего блога, которое почему-то заставило меня всерьез задуматься. Вот что оно гласило:

Привет, Филип, можно спросить, как вы стали выдающимся фронтенд-разработчиком?

Что-нибудь посоветуете?

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

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

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

• Юлия — хорошая работа, но есть различия с макетом — вся правая сторона в header чуть ниже;
• Blowup — все отлично;
• Potato — хорошо, но надо больше спрайтов;
• akaSpy, Андрей — ребята меньше дивов, больше спрайтов).

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

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

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

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

• satantx — можно реализовать без использования таблицы, отсутствуют ховеры на кнопки, надо больше HTML5)
• SerGen — хорошая работа;
• Юлия — все классно, стоило сделать "карусель" с циклической бесконечной прокруткой как у остальных ребят или скрывать кнопки навигации;
• usf — все хорошо, но в ei10 градиенты не работают;
• Blowup — хорошая работа, за fadeIn() +1;
• Winner — проблемы в Opera 12.14 и больше спрайтов.

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

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

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

Победитель на этой неделе пользователь под ником maiordom. Коротко по каждой из работ:

• P1RATE — всё хорошо, картинки в спрайте и закодированы, но вот для иконок сделан тег <i>, можно и без него обойтись;
• Blowup — для тебя много интересного под катом) Не понятно зачем оборачивать в <div> выпадающий список внутри тега <ul>, тем самым твоя работа не валидная;
• Ryter — надо было делать меню раздвижным, а так не плохая работа;
• Юлия — хорошая работа; жаль что каждая иконка это отдельная картинка;
• maiordom — хорошее исполнение;
• Sergalas — не соответствие с макетом, отступы не те и не понятно зачем оборачивать верхний уровень навигации в абзац;
• usf — как всегда уровень, единственный, кто решил задачу без использования списка, но беда с двойным фоном и иконок не видно;
• SerGen — хорошая работа, не поленился добавить ховер на треугольник, но вот проблема как и у первого участника: лишний тег для иконок;

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

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

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

На этой неделе было три лидера: Blowup, Vita, usf. Поздравляем победителя Vita и коротко по каждой из представленных работ:

• Петр — уголок с уведомлениями сделан на css, жаль что работа не доделана до конца, отсутствуют ховеры у элементов и нет фона
• Антон — хорошо, но твиты и фолловеров надо было делать ссылкой, большинство участников уведомления сделали на css обратите на это внимание
• Tyffaxyn — хорошая css, слишком сильная тень у уведомлений и нет ховера на этот же элемент
• Blowup — радует что input обернутый в тег form), уголок на css, base64, но вот твиты и фолловеры надо ссылками
• Sergalas — видимо не хватка времени. Опять слишком много id, твиты не ссылки, уведомления прыгают в разных браузерах и фон сделан у этого же элемента картинка
• Vita — хорошая работа, но недочёт в EI10
• usf — единственный кто аватар пользователя обернул в тег figure, оптимизированная работа, но твиты и фолловеры в span и тень у текста надо было белую, а не чёрную делать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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