CSS

1. КистьНаконец-то! Посмотри на это. Серое. Всё серое. Баг расставил `!important` повсюду, и каскад сошёл с ума.
2. КистьНачнём с азов: селектор, свойство, значение. И кто кого перекрывает — без этого краска ложится не туда.

1. КистьУлица Вывесок. Шрифты прыгают, контраст как в тумане.
2. ЛевМой друг слабовидящий. Серый текст на сером фоне для него — пустая страница.
3. КистьЗначит, красота и читаемость — одно и то же. Работаем.

1. КистьЗдесь каждая коробка живёт как хочет: отступы внутрь, рамки наружу, ширина врёт.
2. ЗодчийКаркас-то я ровный дал.
3. КистьКаркас ровный, а коробки — нет. Блочная модель — основа всего, что я рисую.

Бой с Багом — финальная работа ветки

1. БагДобавь `width: 101%` — и всё влезет!
2. КистьНичего не влезет. `box-sizing` — и считай честно.

1. КистьЧтобы покрасить один дом, Баг красит всю улицу и закрашивает лишнее. Ужас.
2. КистьНаучимся попадать точно: атрибуты, соседи, состояния.

1. КистьШапки домов съехали: логотип внизу, меню вверх ногами.
2. КистьФлекс — это ряд, который сам договаривается, кто сколько места займёт.

Бой с Багом — финальная работа ветки

1. Баг`float` и молитва!
2. КистьМы не в прошлом веке. Флекс.

1. КистьПлощадь Сетки — кафе, магазины, выставки. Баг смешал всё в одну колонку.
2. КистьГрид — это план площади. Ты сам решаешь, где что стоит.

Бой с Багом — финальная работа ветки

1. БагТаблицей сверстай, как раньше!
2. ЗодчийТаблица — для данных!
3. КистьВот хоть в чём-то мы согласны.

1. КистьВывески залезли друг на друга, окна закрывают двери.
2. КистьПозиционирование и слои: кто над кем и почему.

1. БроОткрываю Галерею с телефона — и половины не видно!
2. КистьГород должен выглядеть хорошо на любом экране. Медиазапросы, контейнеры — вперёд.

Бой с Багом — финальная работа ветки

1. БагПусть повернут телефон боком!
2. КистьПусть сайт подстроится. Это его работа, а не человека.

1. КистьУлица Фонарей. Баг заставил всё мигать и дёргаться.
2. ЛевУ моего соседа от такого кружится голова. Пусть будет можно выключить.
3. КистьДвижение — со смыслом и с уважением к тем, кому оно мешает.

1. КистьМастерская красок. Баг перепутал все цвета в банках: один и тот же синий записан двадцатью способами.
2. КистьПеременные, структура стилей, логические свойства — краска, которой можно управлять.

1. КистьГлавный зал. Здесь Баг спрятал свою самую большую кляксу.
2. ЛевИ тут же — фокус, который не видно, и контраст, которого нет.

Бой с Багом — финальная работа ветки

1. БагКрасиво же! Ну и что, что невидимо с клавиатуры!
2. КистьКрасота, которой не могут пользоваться, — это декорация. Собираем сайт целиком.
3. ЛевПроверю с клавиатуры. И со скринридером.