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

Битва 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 простых примера: с крутящимся мячом и пульсирующей кнопкой, но их вам будет достаточно, чтобы понять общую суть. Я рекомендую вам все примеры разбирать вместе со мной.

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

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

Как сделать в HTML подпись под картинкой?

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

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