Интерфейсы и сайты с нуля

Модуль 1. Первые шаги в интерфейсе

• 1.1 Что такое интерфейс и из чего он собран — Понять, что такое интерфейс, чем UI отличается от UX и из каких трёх языков собран любой экран. (бесплатно)
• 1.2 Первая страница: заголовок и текст — Написать первый HTML-код, понять теги, вложенность и увидеть результат на экране справа. (бесплатно)
• 1.3 Кнопка, на которую хочется нажать — Собрать кнопку: надпись, цвет, скругление, отступы, размер и состояние наведения. (бесплатно)
• 1.4 Ссылка, картинка и список — Научиться ставить на страницу ссылку, картинку и список — с обязательными атрибутами и понятным смыслом. (бесплатно)
• 1.5 Структура страницы: шапка, main и подвал — Разложить страницу на смысловые части: header, nav, main и footer. (бесплатно)
• 1.6 Классы и id: как обратиться к элементу — Понять разницу между классом и id и научиться выбирать элементы в CSS. (бесплатно)
• 1.7 Мини-проект: страница-визитка — Собрать первую настоящую страницу из структуры, текста, картинки, списка, ссылки и оформления. (бесплатно)
• 1.8 Разбор первой страницы: что поправить — Научиться смотреть на чужую страницу по порядку: структура → смысл → доступность → оформление. (бесплатно)

Модуль 2. Как это выглядит: семь простых настроек

• 2.1 Цвет, размер и скругление — Научиться задавать цвет фона, цвет текста, размер шрифта и скругление — четыре базовые настройки CSS. (бесплатно)
• 2.2 Отступы: снаружи и внутри — Понять разницу между внутренним и внешним отступом и научиться давать блокам воздух. (по подписке)
• 2.3 Рамка, тень и шрифт — Добавить карточке рамку, мягкую тень и читаемый межстрочный интервал. (по подписке)
• 2.4 Семь настроек вместе: карточка — Собрать аккуратную карточку, в которой фон, текст, отступы, рамка, тень и скругление работают вместе. (по подписке)
• 2.5 Цвет и контраст: чтобы текст читался — Понять, что такое контраст, и научиться выбирать цвета, при которых текст видно. (по подписке)
• 2.6 Шрифт: размер, насыщенность и интервал — Сделать текст читаемым: подобрать размер, насыщенность, межстрочный интервал и длину строки. (по подписке)
• 2.7 Состояния кнопки: hover, focus, active — Сделать кнопку живой: реакция на наведение, фокус с клавиатуры, нажатие и недоступность. (по подписке)
• 2.8 Разбор карточки: что поправить в оформлении — Научиться смотреть на оформление по порядку: читаемость → размер цели → воздух → акценты. (по подписке)

Модуль 3. Раскладка: из блоков в страницу

• 3.1 Карточка товара: картинка, заголовок и подпись — Собрать карточку с картинкой, заголовком и коротким описанием. (бесплатно)
• 3.2 Ряд и сетка: несколько карточек в строку — Разложить карточки в ряд с помощью flex и промежутков. (по подписке)
• 3.3 Телефон и компьютер: адаптивность — Сделать так, чтобы на телефоне блоки вставали в столбик, а на большом экране — в ряд. (по подписке)
• 3.4 Сетка из карточек: grid и repeat — Разложить карточки в сетку из трёх колонок, которая сама переносит лишние карточки на новую строку. (по подписке)
• 3.5 Ширина страницы и центрирование — Ограничить ширину содержимого и поставить его по центру, чтобы текст читался на большом экране. (по подписке)
• 3.6 Коробка и её размеры: box-sizing — Понять, из чего складывается ширина блока и почему padding «раздувает» карточку. (по подписке)
• 3.7 Мини-проект: каталог из шести карточек — Собрать каталог: сетка из шести карточек с картинками, названиями и ценами, которая работает и на телефоне. (по подписке)
• 3.8 Разбор раскладки: что не так — Научиться находить причину, почему карточки не встали в ряд. (по подписке)

Модуль 4. Оживляем страницу: JavaScript

• 4.1 Что такое JavaScript и где он живёт — Понять, зачем нужен JavaScript, и вывести первое сообщение в консоль. (бесплатно)
• 4.2 Кнопка, которая отвечает — Сделать так, чтобы по нажатию на кнопку на странице что-то менялось. (по подписке)
• 4.3 Счётчик: переменные и число на странице — Понять переменные и сделать рабочий счётчик нажатий. (по подписке)
• 4.4 Условие if: страница решает сама — Научиться выбирать между двумя вариантами с помощью if и else. (по подписке)
• 4.5 Поле ввода: прочитать то, что написал человек — Прочитать значение поля ввода и показать его на странице. (по подписке)
• 4.6 Классы из кода: как менять оформление — Переключать оформление блока через classList, не меняя стили по одному. (по подписке)
• 4.7 Мини-проект: калькулятор скидки — Собрать калькулятор: прочитать цену и скидку, посчитать сумму и показать её. (по подписке)
• 4.8 Разбор кода: что не так — Научиться находить ошибку в области видимости переменной. (по подписке)

Модуль 5. Интерфейс для игры

• 5.1 Меню игры: заголовок и три кнопки — Собрать стартовое меню игры — так, как оно выглядит в настоящих играх. (бесплатно)
• 5.2 Полоска здоровья (шкала HP) — Собрать шкалу здоровья из двух блоков: рамки и заливки. (по подписке)
• 5.3 Диалоговое окно с персонажем — Собрать окно диалога: портрет слева, имя и реплика справа. (по подписке)
• 5.4 Проект: личная страница-визитка — Собрать законченную страницу из всего, что изучили: заголовок, текст, карточки и кнопка. (по подписке)
• 5.5 Игровая панель: очки, уровень и здоровье в одной строке — Собрать HUD — панель с очками, уровнем и здоровьем в одной строке. (по подписке)
• 5.6 Иконки и эмодзи: понятно без слов — Сделать кнопки с иконками и подписями, которые понятны и зрячим, и скринридеру. (по подписке)
• 5.7 Мини-проект: экран выбора персонажа — Собрать экран выбора персонажа из трёх карточек с картинками, именами и кнопками. (по подписке)
• 5.8 Разбор игрового экрана: что не так — Научиться находить причину, почему иконка в кнопке съехала вниз. (по подписке)

Модуль 6. Проект: своя мини-игра

• 6.1 Мини-игра: очки и здоровье врага — Собрать основу игры: удар по врагу добавляет очки и снимает здоровье. (бесплатно)
• 6.2 Победа и кнопка «Играть снова» — Добавить в игру финал: сообщение о победе, выключение удара и перезапуск. (по подписке)
• 6.3 Урон и усиление: числа, которые меняют игру — Вынести урон в переменную и дать игроку усиливать удар. (по подписке)
• 6.4 Счёт и рекорд: сохраняем лучшее — Добавить рекорд, который не сбрасывается кнопкой «Играть снова». (по подписке)
• 6.5 Полоска здоровья меняет цвет — Менять цвет полоски здоровья в зависимости от оставшегося здоровья. (по подписке)
• 6.6 Журнал боя: что произошло — Показывать игроку, что произошло после удара, через журнал боя. (по подписке)
• 6.7 Мини-проект: игра целиком — Собрать игру целиком: удар, урон, рекорд, цвет, журнал, победу и перезапуск. (по подписке)
• 6.8 Разбор игры: что не так — Научиться находить ошибку в области видимости переменной в игре. (по подписке)

Модуль 7. Персонаж и движение

• 7.1 Персонаж — это картинка с прозрачным фоном — Понять, из чего сделан персонаж игры, и собрать карточку героя с картинкой и подписью. (бесплатно)
• 7.2 Сцена: поставить персонажа туда, куда нужно — Научиться располагать персонажа в нужной точке сцены и ставить слои друг на друга. (по подписке)
• 7.3 Движение без JavaScript: transform и @keyframes — Оживить сцену: покачивание героя через @keyframes и плавность через transition. (по подписке)
• 7.4 Кнопки и клавиши: персонаж идёт — Научить героя двигаться по нажатию: хранить координату, менять её и не выпускать за край. (по подписке)
• 7.5 Проект: свой персонаж на сцене — Собрать законченную сцену: герой ходит, поворачивается в сторону движения и не выходит за край. (по подписке)
• 7.6 Спрайт-лист: шаг вместо переворачивания — Показать шаг персонажа кадрами: собрать спрайт-лист из четырёх кадров и включать анимацию, только когда герой идёт. (по подписке)
• 7.7 Столкновение: монета и шип — Научиться проверять столкновение персонажа с предметом: подобрать монету, потерять здоровье на шипе и не сработать дважды. (по подписке)
• 7.8 Разбор сцены: что не так — Научиться читать чужую сцену и находить причину: где хранится состояние, где оно меняется и почему герой ведёт себя не так. (по подписке)

Модуль 8. Интерфейс, который понятно

• 8.1 Один главный объект: иерархия экрана — Понять, что на экране должно быть одно главное, и научиться выделять его размером, весом и отступом. (бесплатно)
• 8.2 Близость и воздух: отступы вместо рамок — Научиться группировать элементы отступами: то, что стоит рядом, читается как одно. (по подписке)
• 8.3 Цвет — это сигнал, а не украшение — Понять, что цвет сообщает смысл, и научиться использовать его как сигнал: один акцент и три понятных состояния. (по подписке)
• 8.4 Сочетание цветов: почему это читается — Собрать палитру из трёх ролей — фон, поверхность, акцент — и понять, почему она выглядит цельно. (по подписке)
• 8.5 Контраст: чтобы видели все — Понять, почему бледный текст не читается, и проверять контраст по цифрам, а не на глаз. (по подписке)
• 8.6 Кнопка, которая ведёт себя как кнопка — Сделать кнопку, про которую сразу понятно: на неё можно нажать, и после нажатия что-то произойдёт. (по подписке)
• 8.7 Проект: переделать страницу по правилам — Применить все правила модуля сразу: выстроить иерархию, сгруппировать отступы, ограничить палитру и сделать читаемый текст. (по подписке)
• 8.8 Разбор экрана: почему не видно главного — Научиться находить причину, почему экран не читается: проверить иерархию, воздух, цвет, контраст и действие по порядку. (по подписке)

Модуль 9. Законы восприятия: почему это работает

• 9.1 Гештальт: глаз сам собирает группы — Увидеть, что группировка — работа зрения, а не украшение, и научиться собирать группы расстоянием, подобием и замыканием. (бесплатно)
• 9.2 Закон Фиттса: до кнопки должно быть легко дотянуться — Понять, почему размер и расстояние до цели решают удобство, и довести кнопки до 44 px, зазора 8 px и отдельного опасного действия. (по подписке)
• 9.3 Закон Хика: меньше выбора — быстрее решение — Научиться оставлять одно главное действие и прятать редкое, не теряя возможностей. (по подписке)
• 9.4 Закон Якоба: человек ищет там, где привык — Собрать страницу в привычном порядке: шапка с логотипом и меню, содержимое с заголовком, подвал с контактами. (по подписке)
• 9.5 Закон Миллера: почему «семь пунктов» — миф — Понять, что рабочая память держит около четырёх объектов, и научиться дробить длинное на смысловые куски. (по подписке)
• 9.6 Общая судьба: движение, которое читается как одно — Понять, что элементы, которые движутся вместе, воспринимаются как группа, и научиться анимировать группу, а не каждый элемент по отдельности. (по подписке)
• 9.7 Проект: экран, который ведёт за руку — Собрать один экран, где работают законы модуля: группы, размер цели, один главный выбор, привычное место, смысловые куски и движение группы. (по подписке)
• 9.8 Разбор экрана по законам восприятия — Научиться разбирать готовый экран по пяти вопросам и понимать, какой закон нарушен сильнее всего. (по подписке)

Модуль 10. Типографика и сетка: чтобы читалось везде

• 10.1 Кегль и межстрочный интервал: почему текст читается — Понять, из чего складывается читаемый текст: размер букв, расстояние между строками и плотность крупных заголовков. (бесплатно)
• 10.2 Длина строки: почему 65 знаков читаются, а 150 — нет — Научиться ограничивать ширину текста так, чтобы строка была 45–75 знаков. (по подписке)
• 10.3 Шкала: четыре размера вместо десяти — Собрать короткую шкалу размеров текста и понять, почему «чуть больше» не работает. (по подписке)
• 10.4 Сетка: колонки, которые держат страницу — Собрать сетку карточек на grid: колонки, зазор, ограниченная ширина и общие края. (по подписке)
• 10.5 Одна страница на телефоне и большом экране — Научиться перестраивать сетку под ширину экрана: две колонки на большом, одна на телефоне. (по подписке)
• 10.6 Проект: страница, которую приятно читать — Собрать одну страницу целиком: шкала текста, длина строки, сетка карточек и адаптивность. (по подписке)

Модуль 11. Разбери экран: что не так и как починить

• 11.1 Пять вопросов к любому экрану — Научиться находить проблему на готовой странице до того, как менять код. (бесплатно)
• 11.2 Длинная строка: почему текст «расползается» — Найти слишком длинную строку и ограничить её шириной блока, а не уменьшением шрифта. (по подписке)
• 11.3 Слипшиеся блоки: отступ вместо рамки — Найти «склеенные» блоки и развести их отступами, а не новыми рамками. (по подписке)
• 11.4 Колонки разъехались: сетка и телефон — Заметить, что раскладка держится только на большом экране, и перестроить её на телефоне. (по подписке)
• 11.5 Не видно и не нажать: контраст и размер цели — Найти две самые частые «невидимые» проблемы — бледный текст и мелкую кнопку. (по подписке)
• 11.6 Проект: разбор страницы целиком — Пройти все пять вопросов на одной странице и починить её, ничего не удаляя. (по подписке)

Модуль 12. Праздник на экране

• 12.1 Подарок, который просит нажать — Собрать коробку, которая трясётся, открывается по нажатию и показывает пожелание. (бесплатно)
• 12.2 Колесо, которое крутится и останавливается — Собрать колесо из секторов, научить его плавно поворачиваться и останавливаться на нужном призе. (по подписке)
• 12.3 Мемори: найди пару — Собрать поле «Мемори» из восьми карточек кодом — из массива данных — и научить его запоминать, какая карточка открыта. (по подписке)
• 12.4 Хлопушка: конфетти из ничего — Научиться создавать элементы кодом: двадцать частиц, случайные позиции, полёт по кадрам и уборка после него. (по подписке)
• 12.5 Проект: ловец подарков — Собрать маленькую игру целиком: сцена, подарок в случайном месте, очки, победа и кнопка «Ещё раз». (по подписке)
• 12.6 Тайный Санта: жеребьёвка без повторов — Перемешать список участников так, чтобы никто не подарил сам себе, и научиться проверять результат случайного алгоритма. (по подписке)
• 12.7 Отсчёт до праздника — Посчитать, сколько осталось до даты, показать это в понятном виде и обновлять раз в секунду, не забыв остановить таймер. (по подписке)

Модуль 13. Один макет, разные стили

• 13.1 Стиль — это восемь настроек, а не «красиво» — Увидеть, что стиль меняется значениями переменных, а не переписыванием страницы. (бесплатно)
• 13.2 Деловой и премиальный: разница в воздухе, а не в цвете — Понять, чем «деловой» отличается от «премиального», и научиться делать премиальный вариант того же макета. (по подписке)
• 13.3 Молодёжный, детский, школьный: кому какой кегль — Различить три «человеческих» стиля и собрать вариант для детской аудитории без потери читаемости. (по подписке)
• 13.4 Праздничный слой: декор меняется, структура нет — Добавить праздничное оформление так, чтобы страница осталась той же страницей. (по подписке)
• 13.5 Проект: три брифа — три стиля на одной странице — Собрать три варианта одного блока по трём разным описаниям стиля и удержать их различимыми. (по подписке)

Что ещё есть на сайте