От автора: если Вы много верстаете и до сих пор не используете плагин Emmet или Zen Coding, то этот урок будет для Вас как нельзя кстати. Используя плагин Emmet, Вы станете писать код на порядок быстрее, а сам процесс написания кода из скучного и рутинного станет оригинальным и доставит несомненное удовольствие.

Плагин Emmet – это ни что иное, как бывший Zen Coding, который приобрел огромную популярность сразу же после своего выхода в свет. Плагин этот представлен в версиях для множества редакторов, так что, скорее всего, Вы также сможете использовать его в своем любимом редакторе.

Читать далее →

От автора: Всем известно, что если нужно внести изменения в соответствии с требованиями заказчика, то поля выбора файла очень ограничены, и тогда как существует множество сложных плагинов с дюжинами альтернативных вариантов, позволяющих вам подогнать их, иногда трудно заставить эти поля работать. Этот учебник проведет вас по процессу создания плагина jQuery с поддержкой множества файлов и простой альтернативой для старых браузеров, гм…, IE9-8, заменяющего стандартный уродливый input.

Читать далее →

От автора: адаптивное горизонтальное выпадающее меню, навеянное вебсайтом Microsoft.com.

Это большое горизонтальное выпадающее меню при щелчке на элемент просто показывает подменю. Его создание навеяно выпадающим меню сайта Microsoft.com. Примеры медиазапросов показывают, как адаптировать его к маленьким экранам.

Читать далее →

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

Сегодня мы поделимся с вами, идеей создания бесплатного слайдшоу, которое должно быть простым, круглым и забавным. Это – экспериментальная концепция, в корне которой лежит идея «перекидывания» круга под определенным углом в зависимости от того, на какую точку круга производится щелчок. Для каждой стороны существует три возможности: верх, середина и низ. Например, при щелчке по верхней правой части изображения круг перевернется под сопутствующим углом, при этом будет казаться, что мы нажали на указанную часть и показалось следующее изображение, находящееся на обратной стороне круга.

Читать далее →

От автора: очень часто на форуме просят оценить качество верстки, указать на существующие ошибки в верстке. И во всех случаях, практически у каждого, ошибки получаются одни и те же.

В данном уроке мы разберем все допущенные ошибки. Рассмотрим на примере, почему такие ошибки очень важно не допускать.

Читать далее →

От автора: учебник о том, как применив минимум дизайна, создать при помощи анимации CSS и jQuery простой слайдер товаров с категориями. Идея состоит в последовательном пролистывании элементов в зависимости от направления скольжения.

В сегодняшнем учебнике мы покажем, как создать простой слайдер товаров с отдельными элементами при помощи CSS-анимации и небольшого количества jQuery. Мысль была навеяна слайдером продукции Apple, где несколько анимированных элементов прямо-таки «влетают» на страницу. Мы хотели перенести эту концепцию на современную альтернативу минималистичного дизайна онлайн-магазина, где элементы представляют различные категории. В данном случае, категории весьма хорошо подходят для этого типа слайдера товаров, по причине ограниченности его использования. Если нужно показать большее количество элементов, то это решение, несомненно, далеко от оптимального. Однако ограниченность позиций придает этому опыту интересный оттенок.

Читать далее →

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

Читать далее →

От автора: тема веб-форм, на мой взгляд, довольно актуальна. Практически на любом сайте сейчас можно найти форму. Даже на одностраничниках зачастую имеется форма обратной связи. Что уж говорить о больших сайтах, на них формы представлены во всем их многообразии — это и контактные формы, формы отзывов, формы авторизации, всевозможные опросы и голосования и т.д.

В данном уроке мы с Вами шаг за шагом создадим привлекательную форму для отзывов. Итак, приступим…

Читать далее →

Изучаем ошибки при верстке сайтов

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

В этом видео уроке я прокомментирую ошибки, допущенные при верстке макета, и покажу, как их можно исправить. Укажу на не очевидные ошибки, покажу на примерах, почему все-таки это является грубейшей ошибкой, и покажу основные правила верстки сайтов. Расскажу, что с версткой происходит далее, и что нужно учитывать, чтобы не иметь проблем с сайтом в будущем при его реальном функционирование.

Читать далее →

От автора: в этом несложном практическом уроке мы с Вами за короткое время создадим простую, но вместе с тем симпатичную галерею, которая замечательно будет смотреться на сайте. Итак, приступим.

Для показа мы воспользуемся бесплатным шаблоном, в котором создадим еще одну страницу под нашу галерею. Сразу стоит отметить, что задача, которую мы решим в уроке, на самом деле может быть выполнена средствами PHP гораздо менее рутинно… но это уже тема отдельного урока.

Читать далее →