Верстка \ Статьи по верстке

Понятие пути критического рендеринга

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

Продолжить чтение

Верстка \ Статьи по верстке

Битва css-in-js

От автора: мы на сайте HelloFresh постоянно боремся со стилями. Еще год назад стили на нашем сайте были плохими, запутанными, кода было слишком много, как и у множества других компаний. Мы захотели поправить эту ситуацию и нашли новенькую библиотеку css-in-js.js, очень крутая штука.

Продолжить чтение

Верстка \ Статьи по верстке

Совет: на всякий случай именуйте линии CSS Grid

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

Продолжить чтение

Верстка \ Статьи по верстке

Интерактивная валидация HTML форм

От автора: создание форм в HTML всегда было сложным занятием. Сперва необходимо написать разметку, затем проверить значения полей перед отправкой и, наконец, нужно уведомить пользователя о проблемах, если таковые возникли. К нашему общему счастью в HTML5 были представлены новые возможности, упрощающие валидацию форм. В частности, поля формы теперь поддерживают условия, что позволяет браузеру проводить валидацию контента форм на стороне клиента без задействования JS.

Продолжить чтение

Верстка \ Статьи по верстке

Замена текстовым плейсхолдерам

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

Продолжить чтение

Верстка \ Статьи по верстке

7 способов размещения элементов с помощью макета CSS Grid

От автора: в этой статье мы узнаем, как можно разместить элементы на странице семью способами при помощи модуля Grid Layout. Основной упор мы сделаем на конкретные способы размещения элементов на странице с помощью CSS Grid. Давайте пройдемся по ним.

Продолжить чтение

Верстка \ Статьи по верстке

Как верстать каталог товаров

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

Продолжить чтение

Верстка \ Статьи по верстке

Обучение верстке сайтов: с нуля до профессионала

От автора: привет, друзья! Как и люди, сайты имеют свой скелет, который можно увидеть в их коде. Обычный пользователь, «гуляя» по просторам Интернета, вряд ли будет заглядывать в HTML-код. Но только не верстальщики — им всегда интересно посмотреть на чужую работу. Создание аккуратного, сбалансированного и работающего во всех браузерах кода — это своего рода искусство. Сегодня мы поговорим с вами о том, как его постигнуть, или, иными словами, как быстро и эффективно научиться верстке веб-страниц.

Продолжить чтение

Верстка \ Статьи по верстке

Как делается в CSS анимация при наведении

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

Продолжить чтение