Самые популярные форматы растровой графики — GIF, JPG и PNG. За счёт поддержки браузерами и малого веса.

Реализуйте эффект, чтобы строка таблицы изменяла форму при наведении курсора.

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

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

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

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

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

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

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

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

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

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

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

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

Используйте ID по прямому назначению: для идентификации элементов. Для полей ввода, якорных ссылок или яваскрипта. Стили через #id не назначайте.