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

Как стать современным верстальщиком и заработать на этом

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

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

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

5 страхов веб-дизайнеров, связанных с CSS Grid

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

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

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

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

От автора: после того как браузер получает 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-код. Но только не верстальщики — им всегда интересно посмотреть на чужую работу. Создание аккуратного, сбалансированного и работающего во всех браузерах кода — это своего рода искусство. Сегодня мы поговорим с вами о том, как его постигнуть, или, иными словами, как быстро и эффективно научиться верстке веб-страниц.

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