Инструменты разработчика для проектировщика. Про HTML и CSS

Инструменты разработчика в разных браузерах немного отличаются внешним видом и фнукционалом. В примерах статьи используется Crome.

Обложка: Инструменты разработчика для проектировщика. Про HTML и CSS

Лучшие практики стилизованных компонентов React

Приведённые в статье советы и рекомендации должны помочь вам грамотно использовать стилизованные компоненты React.

Обложка: Лучшие практики стилизованных компонентов React
Соберите сервер из комплектующих

Улучшаем адаптивность сайта с помощью CSS функции clamp()

Рассказываем, как CSS функция сlamp() поможет улучшить адаптивность вашего сайта без использования медиа-запросов и JavaScript.

Обложка: Улучшаем адаптивность сайта с помощью CSS функции clamp()

10 шпаргалок для веб-разработчика

В этих шпаргалках собраны подсказки по HTML, CSS, JavaScript, PHP, Django, Spring Boot и всему, что нужно знать веб-разработчику.

Обложка: 10 шпаргалок для веб-разработчика
Обложка: 7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами

7 основных понятий CSS Grid Layout с примерами, которые помогут начать работу с гридами

Изучаем модуль CSS, который позволяет кардинально изменять структуру визуального макета, не требуя соответствующих изменений разметки.

Веб-разработка для начинающих: бесплатный видеокурс, который поможет оценить свои силы

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

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

Как сделать текст градиентом — простой CSS-трюк

C помощью двух свойств можно сделать градиентом любой текст на странице. А ещё заливка меняется в зависимости от ширины экрана!

Обложка: Как сделать текст градиентом — простой CSS-трюк

CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript

Можно создать слайдер и даже реализовать полноэкранную прокрутку на чистом CSS. Это отлично работает на мобильных устройствах!

Обложка: CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

Задавались когда-нибудь вопросом, как работает CSS Flexbox? Наглядно объясняем возможности технологии с использованием анимации.

Обложка: Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

Кастомные свойства в CSS. Часть 3: ограничения

В последней статье серии рассмотрены ограничения кастомных свойств CSS.

Обложка: Кастомные свойства в CSS. Часть 3: ограничения

Кастомные свойства в CSS. Часть 2: особенности применения

Во второй статье серии мы подробнеее рассмотрим наследование значений кастомных свойств.

Обложка: Кастомные свойства в CSS. Часть 2: особенности применения

Кастомные свойства в CSS. Часть 1: что это такое и как работает

В первой статье из серии мы познакомимся с основами кастомных свойств, которых будет достаточно, чтобы начать с ними экспериментировать.

Обложка: Кастомные свойства в CSS. Часть 1: что это такое и как работает

Хотел кликнуть, но не смог: как правильно настроить размер области клика

Рассматриваем несколько распространённых проблем с UX и показываем, с какой из них столкнулись сами и как её решали.

Обложка: Хотел кликнуть, но не смог: как правильно настроить размер области клика

Обучение веб-разработке на практике: пишем слайдер на JavaScript

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

Обложка: Обучение веб-разработке на практике: пишем слайдер на JavaScript

Разбираем CSS в новом дизайне Facebook: легаси, неочевидные решения и ответы разработчиков

Разбираем CSS-файл обновлённого Facebook’а и пытаемся разобраться, какие решения для нового дизайна выбрали разработчики и почему.

Обложка: Разбираем CSS в новом дизайне Facebook: легаси, неочевидные решения и ответы разработчиков
Обложка: Что нужно знать, чтобы стать веб-разработчиком: интерактивная карта со ссылками на ресурсы для изучения

Что нужно знать, чтобы стать веб-разработчиком: интерактивная карта со ссылками на ресурсы для изучения

Roadmap для веб-разработчика: пригодится, чтобы организовать своё обучение или просто посмотреть полезные ресурсы. Круто оформлено. Кликабельно.

Перестаньте использовать !important. Помогаем разобраться с каскадом CSS

Почему ваши CSS-правила иногда не работают, зачем на самом деле нужен !important и как работает каскад CSS — рассказываем в статье.

Обложка: Перестаньте использовать !important. Помогаем разобраться с каскадом CSS

18 советов по CSS, которые сделают жизнь разработчика проще

Некоторые особенности свойств, классов, псевдоэлементов и других составляющих CSS, о которых вы могли не знать. И парочка советов, чтобы верстать ещё лучше.

Обложка: 18 советов по CSS, которые сделают жизнь разработчика проще

Анимированное руководство по CSS flex

CSS flex — свойство, определяющее способность элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Рассмотрим, как оно работает.

Обложка: Анимированное руководство по CSS flex
Подборка книг по веб-разработке

Подборка книг для начинающего веб-разработчика

В перечне книг вы найдёте материалы по JavaScript, Node.js, React.js, CSS, HTML, паттернах проектирования и адаптивному веб-дизайну.

Развёрнутое руководство по Sass/SCSS

Современный CSS — мощь, а в комбинации с препроцессорами — вообще боевая машина для оформления контента на страницах. В статье приведено развёрнутое руководство по Sass/SCSS с примерами. После прочтения узнаете,…

Обложка: Развёрнутое руководство по Sass/SCSS

Функциональный CSS: упрощаем работу со стилями

Развитие браузеров ограничивало развитие CSS. И примерно с 2015 года (когда браузеры стали поддерживать flexbox) появилась возможность применить новые технологии в приложениях и на сайтах. На помощь пришли библиотеки Angular Material,…

Обложка: Функциональный CSS: упрощаем работу со стилями

Основы CSS: блочная модель

Блочная модель CSS — одна из основ веб-дизайна, которая в дальнейшем помогает лучше кастомизировать страницы. Разбираемся, как она устроена.

Обложка: Основы CSS: блочная модель
Обложка: Верстаем правильно: знакомство с Flexbox и Grid

Верстаем правильно: знакомство с Flexbox и Grid

Знакомство с CSS-вёрсткой в 2018 году. Рассказываем, как использовать Flexbox и Grid для создания красивой разметки и чем они лучше старых методов.

Обложка: Создаём простую игру на Vanilla JS

Создаём простую игру на Vanilla JS

В этой статье мы напишем простую игру с помощью HTML, CSS и чистого JavaScript — никаких фреймворков, только хардкор.

Вредные советы по CSS

Презираете комментарии и не придумываете имена, когда пишете CSS? Рассказываем, как и зачем бороться с этими и другими типичными ошибками.

5 способов выровнять HTML-элемент горизонтально и вертикально

Устали искать способ вертикально и горизонтально выровнять HTML-элемент? В этой статье мы собрали целых 5 способов сделать это!

html

16 генераторов CSS-кода для веб-разработчиков

Генераторы кода могут быть как источниками новых проблем, так и путями их решения. Всё-таки у них больше плюсов, чем минусов: экономия времени, довольно качественный результат и почти всегда всё бесплатно. Поэтому мы подготовили для вас 16 генераторов CSS-кода.

Обложка: 16 генераторов CSS-кода для веб-разработчиков

Адаптивная вёрстка: что это и как использовать

Адаптивная вёрстка позволяет правильно отображать содержимое веб-сайта на любых устройствах. Рассказываем, как это сделать.

Обложка: Адаптивная вёрстка: что это и как использовать

Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 4

Продолжение серии обучающих статей по работе с Anime.js. В финальной части будут описаны различные обратные вызовы (callback-функции), используемые для выполнения функций в зависимости от прогресса анимации.

Обложка: Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 4

Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 3

Продолжение серии статей обучающих статей по работе с Anime.js. В этой статье речь пойдёт о том, как научиться устанавливать значения свойств, используя обычные числа, значения на основе функций и ключевые кадры. Также вы научитесь регулировать воспроизведение и последовательность анимаций.

Обложка: Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 3

Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 2

Продолжение серии обучающих статей по работе с Anime.js. В этой части вы узнаете, как использовать Anime.js для правильного тайминга анимации разных элементов, используя определённые параметры.

Обложка: Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 2