48 Модуль 10 Реальные проекты 20 мин урок 23 из 25

Проект: дашборд

Плотный интерфейс: сайдбар, таблица с фиксированной шапкой, графики на чистом CSS, состояния загрузки и тёмная тема из коробки.

Что ты научишься делать

Соберёшь раскладку с сайдбаром, которая не ломается на планшете
Сделаешь таблицу с фиксированной шапкой и горизонтальной прокруткой
Нарисуешь три вида графиков без единой библиотеки

#Чем дашборд отличается от лендинга

Лендинг человек пролистывает один раз. Дашборд открывают каждый день и проводят в нём часы. Это меняет всё.

Плотность вместо воздуха. Пустое место, красивое на лендинге, здесь означает меньше данных на экране.
Никаких анимаций «для настроения». На третий день они начинают раздражать.
Тёмная тема обязательна. Люди сидят в интерфейсе вечерами.
Состояния важнее вида. Загрузка, пустой список, ошибка запроса встречаются постоянно.
Плотный текст. Мелкий шрифт и малые отступы, но контраст — строго по норме.

#Шаг 1. Раскладка

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

CSSlayout.css

1@layer layout {2  .app {3    display: grid;4    grid-template-areas:5      "side head"6      "side main";7    grid-template-columns: 240px minmax(0, 1fr);8    grid-template-rows: auto 1fr;9    min-block-size: 100dvh;10  }1112  .app__side { grid-area: side; }13  .app__head { grid-area: head; }14  .app__main { grid-area: main; overflow: auto; }1516  /* Планшет: сайдбар ужимается до иконок */17  @media (max-width: 1100px) {18    .app { grid-template-columns: 64px minmax(0, 1fr); }19    .app__side .nav__label { display: none; }20  }2122  /* Телефон: сайдбар уезжает вниз лентой */23  @media (max-width: 720px) {24    .app {25      grid-template-areas: "head" "main" "side";26      grid-template-columns: minmax(0, 1fr);27      grid-template-rows: auto 1fr auto;28    }2930    .app__side {31      position: sticky;32      inset-block-end: 0;33      display: flex;34      overflow-x: auto;35    }36  }37}

#Шаг 2. Карточки показателей

Строка метрик

<div class="stats">  <article class="stat">    <p class="stat__label">Выручка</p>    <p class="stat__value">1 284 500 ₽</p>    <p class="stat__delta stat__delta--up">+12,4% к прошлой неделе</p>  </article>  <article class="stat">    <p class="stat__label">Заказы</p>    <p class="stat__value">3 421</p>    <p class="stat__delta stat__delta--down">−3,1% к прошлой неделе</p>  </article>  <article class="stat">    <p class="stat__label">Средний чек</p>    <p class="stat__value">375 ₽</p>    <p class="stat__delta">без изменений</p>  </article></div>

.stats {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));  gap: 12px;}.stat {  display: grid;  gap: 4px;  padding: 14px;  background: #f5f5fa;  border-radius: 12px;}.stat__label {  margin: 0;  font-size: 12px;  letter-spacing: .04em;  text-transform: uppercase;  color: #7a7f8c;}.stat__value {  margin: 0;  font-size: 24px;  font-weight: 700;  /* Цифры одной ширины — колонка не пляшет при обновлении */  font-variant-numeric: tabular-nums;}.stat__delta { margin: 0; font-size: 13px; color: #7a7f8c; }.stat__delta--up { color: #0f8f6a; }.stat__delta--down { color: #c8394a; }/* Знак дублирует цвет: не все различают красный и зелёный */.stat__delta--up::before { content: "▲ "; }.stat__delta--down::before { content: "▼ "; }

В песочницу

#Шаг 3. Графики на чистом CSS

Для трёх базовых видов графиков библиотека не нужна. Столбики — это сетка, кольцо — conic-gradient, линия — SVG в несколько строк.

Ключевой приём для всех трёх: значение приходит переменной, а CSS сам считает высоту и угол. Тогда данные можно подставлять на сервере, и никакой скрипт не нужен.

Три графика без библиотек

<div class="charts">  <figure class="chart">    <figcaption>Заказы по дням</figcaption>    <div class="bars">      <div class="bar" style="--v: 42"><span>Пн</span></div>      <div class="bar" style="--v: 68"><span>Вт</span></div>      <div class="bar" style="--v: 55"><span>Ср</span></div>      <div class="bar" style="--v: 91"><span>Чт</span></div>      <div class="bar" style="--v: 74"><span>Пт</span></div>      <div class="bar" style="--v: 100"><span>Сб</span></div>      <div class="bar" style="--v: 38"><span>Вс</span></div>    </div>  </figure>  <figure class="chart">    <figcaption>Доля повторных</figcaption>    <div class="donut" style="--p: 64" role="img" aria-label="64 процента повторных заказов">      <span class="donut__value">64%</span>    </div>  </figure></div>

.charts {  display: grid;  grid-template-columns: 2fr 1fr;  gap: 16px;}.chart {  margin: 0;  padding: 14px;  background: #f5f5fa;  border-radius: 12px;}.chart figcaption {  margin-bottom: 12px;  font-size: 12px;  text-transform: uppercase;  letter-spacing: .04em;  color: #7a7f8c;}/* Столбики: обычная сетка, высота из переменной */.bars {  display: grid;  grid-auto-flow: column;  grid-auto-columns: 1fr;  align-items: end;  gap: 6px;  height: 140px;}.bar {  display: grid;  align-content: end;  justify-items: center;  gap: 4px;  height: calc(var(--v) * 1%);  background: linear-gradient(#6544e0, #b06cff);  border-radius: 6px 6px 0 0;}.bar span {  font-size: 11px;  color: #fff;  padding-bottom: 4px;}/* Кольцо: один градиент и вырез по центру */.donut {  display: grid;  place-items: center;  width: 120px;  height: 120px;  margin: 0 auto;  border-radius: 50%;  background: conic-gradient(    #6544e0 calc(var(--p) * 1%),    #dedde8 0  );}.donut::before {  content: "";  grid-area: 1 / 1;  width: 84px;  height: 84px;  background: #f5f5fa;  border-radius: 50%;}.donut__value {  grid-area: 1 / 1;  font-weight: 700;  font-variant-numeric: tabular-nums;}

.charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.chart {
  margin: 0;
  padding: 14px;
  background: #f5f5fa;
  border-radius: 12px;
}

.chart figcaption {
  margin-bottom: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #7a7f8c;
}

/* Столбики: обычная сетка, высота из переменной */
.bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: 6px;
  height: 140px;
}

.bar {
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 4px;
  height: calc(var(--v) * 1%);
  background: linear-gradient(#6544e0, #b06cff);
  border-radius: 6px 6px 0 0;
}

.bar span {
  font-size: 11px;
  color: #fff;
  padding-bottom: 4px;
}

/* Кольцо: один градиент и вырез по центру */
.donut {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(
    #6544e0 calc(var(--p) * 1%),
    #dedde8 0
  );
}

.donut::before {
  content: "";
  grid-area: 1 / 1;
  width: 84px;
  height: 84px;
  background: #f5f5fa;
  border-radius: 50%;
}

.donut__value {
  grid-area: 1 / 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

В песочницу

#Шаг 4. Таблица с фиксированной шапкой

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

Таблица заказов

<div class="table-wrap">  <table class="table">    <caption class="visually-hidden">Последние заказы</caption>    <thead>      <tr>        <th scope="col">Номер</th>        <th scope="col">Клиент</th>        <th scope="col">Статус</th>        <th scope="col" class="num">Сумма</th>        <th scope="col">Дата</th>      </tr>    </thead>    <tbody>      <tr><th scope="row">#4821</th><td>Марина К.</td><td><span class="tag tag--ok">Оплачен</span></td><td class="num">1 240 ₽</td><td>07.09</td></tr>      <tr><th scope="row">#4820</th><td>Константин П.</td><td><span class="tag tag--wait">Ждёт оплаты</span></td><td class="num">890 ₽</td><td>07.09</td></tr>      <tr><th scope="row">#4819</th><td>Анна С.</td><td><span class="tag tag--bad">Отменён</span></td><td class="num">2 105 ₽</td><td>06.09</td></tr>      <tr><th scope="row">#4818</th><td>Пётр В.</td><td><span class="tag tag--ok">Оплачен</span></td><td class="num">640 ₽</td><td>06.09</td></tr>      <tr><th scope="row">#4817</th><td>Ольга Д.</td><td><span class="tag tag--ok">Оплачен</span></td><td class="num">3 480 ₽</td><td>05.09</td></tr>      <tr><th scope="row">#4816</th><td>Илья М.</td><td><span class="tag tag--wait">Ждёт оплаты</span></td><td class="num">1 015 ₽</td><td>05.09</td></tr>    </tbody>  </table></div>

<div class="table-wrap">
  <table class="table">
    <caption class="visually-hidden">Последние заказы</caption>
    <thead>
      <tr>
        <th scope="col">Номер</th>
        <th scope="col">Клиент</th>
        <th scope="col">Статус</th>
        <th scope="col" class="num">Сумма</th>
        <th scope="col">Дата</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">#4821</th><td>Марина К.</td><td><span class="tag tag--ok">Оплачен</span></td><td class="num">1 240 ₽</td><td>07.09</td></tr>
      <tr><th scope="row">#4820</th><td>Константин П.</td><td><span class="tag tag--wait">Ждёт оплаты</span></td><td class="num">890 ₽</td><td>07.09</td></tr>
      <tr><th scope="row">#4819</th><td>Анна С.</td><td><span class="tag tag--bad">Отменён</span></td><td class="num">2 105 ₽</td><td>06.09</td></tr>
      <tr><th scope="row">#4818</th><td>Пётр В.</td><td><span class="tag tag--ok">Оплачен</span></td><td class="num">640 ₽</td><td>06.09</td></tr>
      <tr><th scope="row">#4817</th><td>Ольга Д.</td><td><span class="tag tag--ok">Оплачен</span></td><td class="num">3 480 ₽</td><td>05.09</td></tr>
      <tr><th scope="row">#4816</th><td>Илья М.</td><td><span class="tag tag--wait">Ждёт оплаты</span></td><td class="num">1 015 ₽</td><td>05.09</td></tr>
    </tbody>
  </table>
</div>

.table-wrap {  max-height: 240px;  overflow: auto;  background: #fff;  border: 1px solid #e2e2ea;  border-radius: 12px;}.table {  width: 100%;  min-width: 520px;  border-collapse: separate;  border-spacing: 0;  font-size: 13px;}.table th,.table td {  padding: 9px 12px;  text-align: left;  border-bottom: 1px solid #eeedf4;  white-space: nowrap;}/* Шапка не уезжает при вертикальной прокрутке */.table thead th {  position: sticky;  top: 0;  z-index: 2;  background: #f5f5fa;  font-size: 11px;  text-transform: uppercase;  letter-spacing: .04em;  color: #7a7f8c;}/* Первая колонка не уезжает при горизонтальной */.table tbody th {  position: sticky;  left: 0;  background: #fff;  font-family: ui-monospace, monospace;  font-weight: 600;}/* Угол должен быть выше обеих липких зон */.table thead th:first-child { z-index: 3; }.num { text-align: right; font-variant-numeric: tabular-nums; }.tag {  display: inline-block;  padding: 2px 8px;  font-size: 11px;  font-weight: 600;  border-radius: 999px;}.tag--ok { color: #0f8f6a; background: #e6f6f0; }.tag--wait { color: #9a6a13; background: #fdf3e0; }.tag--bad { color: #c8394a; background: #fdecee; }.visually-hidden {  position: absolute;  width: 1px;  height: 1px;  overflow: hidden;  clip-path: inset(50%);}

.table-wrap {
  max-height: 240px;
  overflow: auto;
  background: #fff;
  border: 1px solid #e2e2ea;
  border-radius: 12px;
}

.table {
  width: 100%;
  min-width: 520px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.table th,
.table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid #eeedf4;
  white-space: nowrap;
}

/* Шапка не уезжает при вертикальной прокрутке */
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f5f5fa;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #7a7f8c;
}

/* Первая колонка не уезжает при горизонтальной */
.table tbody th {
  position: sticky;
  left: 0;
  background: #fff;
  font-family: ui-monospace, monospace;
  font-weight: 600;
}

/* Угол должен быть выше обеих липких зон */
.table thead th:first-child { z-index: 3; }

.num { text-align: right; font-variant-numeric: tabular-nums; }

.tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
}

.tag--ok { color: #0f8f6a; background: #e6f6f0; }
.tag--wait { color: #9a6a13; background: #fdf3e0; }
.tag--bad { color: #c8394a; background: #fdecee; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

В песочницу

#Шаг 5. Состояния загрузки

Данные приходят с задержкой всегда. Скелет вместо крутящегося колёсика удерживает раскладку и не даёт странице прыгать, когда данные приехали.

CSSskeleton.css

1@layer components {2  .skeleton {3    /* Размер тот же, что у настоящего содержимого,4       иначе при загрузке страница дёрнется */5    min-block-size: 1em;6    border-radius: 6px;7    background: linear-gradient(8      90deg,9      var(--color-surface) 0%,10      color-mix(in oklab, var(--color-text) 8%, var(--color-surface)) 50%,11      var(--color-surface) 100%12    );13    background-size: 200% 100%;14    animation: shimmer 1.4s linear infinite;15  }1617  @keyframes shimmer {18    to { background-position: -200% 0; }19  }2021  /* Без движения — просто ровная заливка */22  @media (prefers-reduced-motion: reduce) {23    .skeleton { animation: none; opacity: .6; }24  }25}

Скелет надо и озвучить: область с данными помечается aria-busy="true", пока идёт загрузка. Тогда программа чтения с экрана скажет «занято» вместо того, чтобы читать пустые блоки.

#Шаг 6. Тёмная тема

Если компоненты с самого начала ссылаются на семантические токены, тема добавляется одним блоком. Это ровно то, что разбирали в тридцать седьмом уроке, — здесь оно окупается.

Особенность дашборда: в тёмной теме нужно пересматривать не только цвета текста, но и цвета данных. Зелёный и красный, хорошо читавшиеся на белом, на тёмном фоне теряют контраст и требуют осветления.

CSSТема добавляется, а не переписывается

1@layer tokens {2  [data-theme="dark"] {3    --color-bg: #0f1117;4    --color-surface: #171a24;5    --color-text: #e8eaf2;6    --color-muted: #a7adc2;7    --color-border: rgb(255 255 255 / .08);89    /* Цвета данных осветлены: на тёмном фоне10       насыщенные оттенки визуально темнеют */11    --color-ok: #4bd1a0;12    --color-warn: #e5b567;13    --color-danger: #f2777a;14  }15}

#Плотность и читаемость

Дашборд живёт в противоречии: данных надо показать много, но текст обязан оставаться читаемым. Разрешается оно не уменьшением шрифта, а другими средствами.

Практические ориентиры, проверенные на живых интерфейсах.

Параметр	Лендинг	Дашборд
Основной текст	17–18px	13–14px, но не меньше 13
Межстрочный интервал	1.6–1.7	1.4–1.5
Отступ внутри карточки	20–24px	12–16px
Высота строки таблицы	—	36–44px: меньше — тяжело попасть курсором
Контраст	4.5 : 1	4.5 : 1, без исключений

#Пустые состояния

Список без данных встречается чаще, чем кажется: новый аккаунт, фильтр без совпадений, первый день месяца. Пустая область без объяснения выглядит поломкой.

Хорошее пустое состояние отвечает на три вопроса: почему тут пусто, это нормально или ошибка, и что сделать дальше.

HTMLТри разных «пусто»

1<!-- Данных ещё нет: подсказываем первый шаг -->2<div class="empty">3  <p class="empty__title">Заказов пока нет</p>4  <p class="empty__text">Они появятся здесь после первой продажи.</p>5  <a class="btn" href="/catalog">Открыть каталог</a>6</div>78<!-- Фильтр ничего не нашёл: предлагаем ослабить -->9<div class="empty">10  <p class="empty__title">Ничего не нашлось</p>11  <p class="empty__text">Попробуй убрать фильтр по дате.</p>12  <button class="btn btn--ghost" type="button">Сбросить фильтры</button>13</div>1415<!-- Ошибка запроса: честно говорим и даём повторить -->16<div class="empty" role="alert">17  <p class="empty__title">Не удалось загрузить</p>18  <p class="empty__text">Проверь соединение и попробуй ещё раз.</p>19  <button class="btn" type="button">Повторить</button>20</div>

#Грабли этого проекта

Что случилось	Почему	Решение
Таблица растянула весь дашборд	Колонка сетки шире содержимого не бывает при `1fr`	`minmax(0, 1fr)` у колонки содержимого
У липкой шапки пропали границы	`border-collapse: collapse` отдаёт границы таблице	`border-separate` и границы у ячеек
Угол таблицы перекрывается	Липкие шапка и колонка на одном уровне	Ячейке угла больший `z-index`
Числа дёргаются при обновлении	Цифры разной ширины	`font-variant-numeric: tabular-nums`
Страница прыгает после загрузки	Скелет другого размера, чем данные	Скелету те же размеры, что и содержимому
График не читается голосом	Набор цветных блоков без текста	`role="img"` с итогом или скрытая таблица

Где спотыкаются почти все

Колонка содержимого задана как <code>1fr</code>

Почему Минимальный размер такой колонки равен ширине содержимого. Широкая таблица растягивает всю сетку за экран.

Как надо minmax(0, 1fr) — колонка получает право быть уже содержимого.

Изменение показано только цветом

Почему Рост и падение, различимые лишь по зелёному и красному, недоступны части людей.

Как надо Добавь знак или стрелку рядом с числом.

Вместо скелета крутящееся колёсико

Почему Раскладка не зарезервирована — при появлении данных страница прыгает.

Как надо Скелет размером с будущее содержимое плюс aria-busy.

Цвета статусов не пересмотрены в тёмной теме

Почему Насыщенный зелёный на тёмном фоне теряет контраст и читается хуже нормы.

Как надо Отдельные значения токенов для тёмной темы, проверенные на контраст.

Скелет загрузки skeleton screen: Заглушка формой и размером с будущее содержимое.
Липкая шапка sticky header: Шапка таблицы, остающаяся на месте при прокрутке тела.
Табличные цифры tabular-nums: Начертание, где все цифры одной ширины.
Конический градиент conic-gradient: Градиент по кругу. Основа для кольцевых диаграмм на чистом CSS.

Задание

Таблица дашборда

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

Обёртке задай ограничение по высоте и прокрутку. Не забудь: при липкой шапке нельзя использовать border-collapse: collapse.

<div class="table-wrap">  <table class="table">    <thead>      <tr>        <th scope="col">Номер</th>        <th scope="col">Клиент</th>        <th scope="col">Статус</th>        <th scope="col" class="num">Сумма</th>      </tr>    </thead>    <tbody>      <tr><th scope="row">#4821</th><td>Марина К.</td><td>Оплачен</td><td class="num">1 240 ₽</td></tr>      <tr><th scope="row">#4820</th><td>Константин П.</td><td>Ждёт оплаты</td><td class="num">890 ₽</td></tr>      <tr><th scope="row">#4819</th><td>Анна С.</td><td>Отменён</td><td class="num">2 105 ₽</td></tr>      <tr><th scope="row">#4818</th><td>Пётр В.</td><td>Оплачен</td><td class="num">640 ₽</td></tr>      <tr><th scope="row">#4817</th><td>Ольга Д.</td><td>Оплачен</td><td class="num">3 480 ₽</td></tr>      <tr><th scope="row">#4816</th><td>Илья М.</td><td>Ждёт оплаты</td><td class="num">1 015 ₽</td></tr>    </tbody>  </table></div>

.table-wrap {  /* 1. Ограничь высоту и включи прокрутку */  background: #fff;  border: 1px solid #e2e2ea;  border-radius: 12px;}.table {  width: 100%;  min-width: 480px;  font-size: 13px;  /* 2. Здесь нужен border-separate, а не collapse */}.table th,.table td {  padding: 9px 12px;  text-align: left;  border-bottom: 1px solid #eeedf4;  white-space: nowrap;}.table thead th {  background: #f5f5fa;  /* 3. Закрепи шапку */}.table tbody th {  background: #fff;  /* 4. Закрепи первую колонку */}/* 5. Суммы вправо табличными цифрами */.num { }

Открыть в песочнице

Подсказка 1

Обёртке: max-height: 240px; overflow: auto;

Подсказка 2

Таблице: border-collapse: separate; border-spacing: 0;

Подсказка 3

Шапке: position: sticky; top: 0; z-index: 2; Первой колонке: position: sticky; left: 0;

Подсказка 4

Суммам: .num { text-align: right; font-variant-numeric: tabular-nums; }

Показать решение

HTMLindex.html

1<div class="table-wrap">2  <table class="table">3    <thead>4      <tr>5        <th scope="col">Номер</th>6        <th scope="col">Клиент</th>7        <th scope="col">Статус</th>8        <th scope="col" class="num">Сумма</th>9      </tr>10    </thead>11    <tbody>12      <tr><th scope="row">#4821</th><td>Марина К.</td><td>Оплачен</td><td class="num">1 240 ₽</td></tr>13      <tr><th scope="row">#4820</th><td>Константин П.</td><td>Ждёт оплаты</td><td class="num">890 ₽</td></tr>14      <tr><th scope="row">#4819</th><td>Анна С.</td><td>Отменён</td><td class="num">2 105 ₽</td></tr>15      <tr><th scope="row">#4818</th><td>Пётр В.</td><td>Оплачен</td><td class="num">640 ₽</td></tr>16      <tr><th scope="row">#4817</th><td>Ольга Д.</td><td>Оплачен</td><td class="num">3 480 ₽</td></tr>17      <tr><th scope="row">#4816</th><td>Илья М.</td><td>Ждёт оплаты</td><td class="num">1 015 ₽</td></tr>18    </tbody>19  </table>20</div>

CSSstyle.css

1.table-wrap {2  max-height: 240px;3  overflow: auto;4  background: #fff;5  border: 1px solid #e2e2ea;6  border-radius: 12px;7}89.table {10  width: 100%;11  min-width: 480px;12  font-size: 13px;13  /* Схлопнутые границы уехали бы вместе с телом таблицы */14  border-collapse: separate;15  border-spacing: 0;16}1718.table th,19.table td {20  padding: 9px 12px;21  text-align: left;22  border-bottom: 1px solid #eeedf4;23  white-space: nowrap;24}2526.table thead th {27  position: sticky;28  top: 0;29  z-index: 2;30  background: #f5f5fa;31}3233.table tbody th {34  position: sticky;35  left: 0;36  background: #fff;37  font-weight: 600;38}3940/* Угол выше обеих липких зон */41.table thead th:first-child { z-index: 3; }4243.num {44  text-align: right;45  font-variant-numeric: tabular-nums;46}

Чек-лист сдачи дашборда

Таблица прокручивается внутри себя, а не растягивает страницу
Липкие шапка и первая колонка не перекрывают друг друга
Все числовые колонки с tabular-nums
Изменения показаны не только цветом
У графиков есть текстовая альтернатива
Скелет загрузки того же размера, что и данные
Тёмная тема проверена на контраст, включая цвета статусов
Проверено на планшете: сайдбар ужимается, ничего не наезжает

Проект: дашборд

Что ты научишься делать

#Чем дашборд отличается от лендинга

#Шаг 1. Раскладка

#Шаг 2. Карточки показателей

#Шаг 3. Графики на чистом CSS

#Шаг 4. Таблица с фиксированной шапкой

#Шаг 5. Состояния загрузки

#Шаг 6. Тёмная тема

#Плотность и читаемость

#Пустые состояния

#Грабли этого проекта

Где спотыкаются почти все

Колонка содержимого задана как <code>1fr</code>

Изменение показано только цветом

Вместо скелета крутящееся колёсико

Цвета статусов не пересмотрены в тёмной теме

Проверь себя

Таблица дашборда

Чек-лист сдачи дашборда

Горячие клавиши

В редакторе кода

#Чем дашборд отличается от лендинга

#Шаг 1. Раскладка

#Шаг 2. Карточки показателей

#Шаг 3. Графики на чистом CSS

#Шаг 4. Таблица с фиксированной шапкой

#Шаг 5. Состояния загрузки

#Шаг 6. Тёмная тема

#Плотность и читаемость

#Пустые состояния

#Грабли этого проекта

Где спотыкаются почти все

Колонка содержимого задана как <code>1fr</code>

Изменение показано только цветом

Вместо скелета крутящееся колёсико

Цвета статусов не пересмотрены в тёмной теме

Проверь себя

Чек-лист сдачи дашборда

Рядом по теме