Анимация таблицы в CSS

Гигиена кода — залог крепкой и надёжной вёрстки. Чеклист помогает не допускать банальных ошибок и освободить голову для решения сложных задач.

Пустые элементы в разметке плохо сказываются на доступности сайта. Их нужно наполнять контентом или удалять.

Сделайте, чтобы рамке с градиентом добавлялась анимация при наведении на элемент.

Инструкция по настройке существующих сниппетов под себя.

Повторите эффект, когда картинка выходит за рамки родительского блока

Селекторы объясняют браузеру, какие стили применить к элементу. Это основа CSS.

Box-shadow добавляет элементу одну или несколько теней

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

Emmet — плагин, ускоряющий написание HTML и CSS кода. Статья поможет установить плагин для Sublime text.

Придумал новую задачку, по мотивам прошлой. Думаю, будет легко, но весело. Возникнут сложности — начните с первой 😉

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

Задачка на прокачку — это небольшое упражнение на знание CSS. Времени на решение много не уйдёт, а размяться поможет. Главное условие — соблюдать ограничения. Надеюсь, вам понравится.

Короткая заметка о том, как настроить синтаксис для плагина «Emmet» в текстовом редакторе «Sublime».

Самый простой способ поставить картинку по центру — флекс. Работает одинаково хорошо со всеми тегами: див, спан или чекбокс, не важно.