Урок 2.6 · Интерфейсы и сайты с нуля · Модуль 2. Как это выглядит: семь простых настроек · По подписке
Цель урока: Сделать текст читаемым: подобрать размер, насыщенность, межстрочный интервал и длину строки.
Нужно знать заранее: Урок 2.5
Объяснение
Зачем это нужно:
Текст — это 80% любого интерфейса. Если он мелкий, длинный или слишком жирный, человек устаёт уже на первом экране. Шрифт — не «украшение», а способ сделать чтение лёгким.
Как это работает:
font-size — размер текста. Для основного текста 16–18px, для заголовка 24–32px.
font-weight — насыщенность: 400 обычный, 600–700 жирный. Жирным выделяют важное, а не всё подряд.
line-height — расстояние между строками. 1.5–1.7 для основного текста, 1.1–1.2 для крупных заголовков.
font-family — шрифт. Для начала system-ui, sans-serif: он есть у всех и выглядит аккуратно.
max-width — длина строки. 45–75 знаков — комфортно; на практике max-width: 65ch.
letter-spacing — расстояние между буквами. Для основного текста обычно 0, для мелких подписей можно чуть больше.
Пример с разбором:
.article {
max-width: 65ch;
font-family: system-ui, sans-serif;
font-size: 18px;
line-height: 1.6;
color: #1e293b;
}
.article h2 {
font-size: 28px;
line-height: 1.2;
font-weight: 700;
}
Строка не растягивается на весь экран, текст крупный, между строками есть воздух.
Компьютер без страха — Файлы, браузер, пароли, мошенники, документы и деньги в интернете простыми словами. Бесплатно и без оплаты.
Если уже случилось — Деньги ушли с карты, пропала симка, взломали аккаунт, потерялись документы — порядок действий по шагам и куда звонить.
Какой компьютер нужен — Чек-лист по уровням: для учёбы ничего покупать не нужно, для своего проекта — 16 ГБ и SSD, для работы — 32 ГБ. Плюс нейросети и устаревание железа.
Без кода: ставить задачу — Как объяснить задачу программисту и принять работу. Кода нет ни строчки.
Профессии и языки — Кто такие программисты, зачем столько языков и что делать после курса.
Потренироваться
Практикум: задачи из жизни — Та же команда урока — на работе, дома и в документах. 63 задачи с проверкой вывода и без регистрации.
Игры-тренажёры — Найти ошибку в чужом коде, прочитать, что делает программа, и увидеть, что случится, если нажать клавишу.
Симулятор: от задания до сдачи — Пройти путь целиком: папка, терминал, файл, сохранение, запуск, проверка по критерию приёмки. Два сценария и две системы.
Мастерская экрана — Проверить цвета и раскладку страницы: контраст, шаблоны, конструктор.
Колесо фортуны — Одна прокрутка в день: скидка на подписку или дни доступа.
Словари и юмор
Словарь программиста — Слова из уроков и кода: парсинг, функция, хеш, компиляция.
Словарь руководителя — Слова из работы простыми словами: скоуп, дедлайн, MVP, бэклог.
Корявые задачи — Юмор: как ставят задачи и что из этого получается. С моралью.
Сайт, оплата и помощь
Родителям — Возраст, время на уроки, безопасность в сообществе, деньги и результат — что важно знать до оплаты.