От пикселя

Карта курса на 24 недели

«От пикселя до собственного сайта и приложения»

48 встреч по 60–75 минут, обычно две в неделю. Недели задают порядок, календарь выбираем отдельно. Первые две встречи полностью подготовлены для вашей правки. Встречи 03–48 пока представлены планом. Четыре встречи по Яндекс Директу добавлены по вашему поручению 04.11.2026. Ручной набор кода и заучивание синтаксиса не требуются.

Б — базовое понимание и обязательное действие. У — углубление: показ и объяснение преподавателя. Если материал уже понятен, сразу переходим к проверке и собственному проекту. Не заполняем встречу повторением ради времени.

Неделя Встреча Тема Цель Практический результат Модули ТЗ Уровень
1 01 Пиксели, файлы и первая страница Понять, из чего состоит изображение и где лежат файлы страницы Открыта локальная страница, найдены её файлы, изменён один заголовок с помощью помощника 1, 3 Б
1 02 Изображения: размеры, форматы и вес Различить пиксели изображения, размер показа и объём файла Выбрана более лёгкая копия фото, записаны байты до и после и результат проверки качества 1 Б
2 03 Как браузер получает страницу Связать URL, домен, IP, DNS, HTTPS и запрос с ответом сервера Нарисован путь запроса и найден документ во вкладке Network браузера 2 Б
2 04 HTML: содержание и смысл страницы Узнать теги, заголовки, ссылки, формы, метаданные и смысловую разметку На своей странице исправлены заголовки, подпись картинки и ссылка, проверено чтение с клавиатуры 3 Б
3 05 CSS: оформление и телефон Объяснить блочную модель и назначение Flexbox/Grid Страница работает при ширине 360 и 1280 CSS-пикселей, нет горизонтальной прокрутки 3 Б
3 06 JavaScript: событие меняет страницу Связать переменную, условие, функцию, событие и DOM с видимым действием Переключатель темы работает с мышью и клавиатурой, выбор проверен после обновления по выбранному условию 4 Б
4 07 Форма, JSON и ошибка в консоли Отличить данные от кода и клиентскую проверку от серверной Форма показывает понятную ошибку, тестовый JSON разобран, ошибка найдена в Console 4 Б
4 08 Git: изменение, коммит и возврат Различить Git, GitHub, репозиторий, ветку и резервную копию В отдельном учебном каталоге просмотрен diff, сохранён коммит и восстановлен испорченный файл 7 Б
5 09 Кому помогает сайт Описать аудиторию, предложение, доверие, действие, воронку и конверсию В карточке своего сайта записаны задача человека и измеримый полезный результат 8 Б
5 10 UX и UI: проверка на человеке Отделить внешний вид от удобства и наблюдение от впечатления Два человека пробуют найти информацию, записаны успех, время и ошибки без персональных данных 9 Б
6 11 Как выбрать устройство сайта Сопоставить CMS, фреймворк, библиотеку, конструктор и свой код, объяснить роли сервера, API и БД Сравнены три варианта одной задачи, нарисована схема выбранного сервиса, БД и админка обоснованы, PHP/Python/Node.js и SQL объяснены по назначению 5, 6 Б
6 12 Учебный сервис: от формы до базы Проследить запись и чтение вымышленных данных через API В локальном сервисе запись сохраняется после перезапуска, тест проверяет ответ API и данные в БД 5, 18 Б
7 13 Пользователи, роли, сессии и админка Отличить вход в сайт от доступа к ОС и панели провайдера В тестовом сервисе обычный пользователь не видит чужую запись и не выполняет действие администратора 5, 15 Б
7 14 Домен, DNS и HTTPS Выбрать регистратора .RU/.РФ, понять записи и роль Cloudflare Составлен план привязки домена с проверкой продления, документов и возраста, реальные изменения только с разрешением взрослого 10 Б
8 15 Cookies, хранилища браузера и кэш Различить сессию, настройки, аналитику и сохранённые ресурсы В DevTools найдено, где хранятся cookie и ресурс, объяснены Secure, HttpOnly, SameSite и срок жизни 10 Б
8 16 Где размещать сайт Разделить общий хостинг, VPS/VDS, облако, выделенный и собственный сервер Для страницы и сервиса с БД выбраны разные варианты, заполнена таблица ответственности и выхода из сервиса 11 Б
9 17 ОС сервера и панель Selectel Различить железо, виртуализацию, ОС, веб-сервер, приложение и данные По текущей документации или доступной учебной панели найдены тип продукта, ОС, IP, CPU, RAM, диски и сетевые правила 12 Б
9 18 SSH, права и контейнеры Понять Linux-пользователей, root, ключи, процессы, службы, журналы и границы Docker На локальной учебной машине проверены пользователь, права и журнал службы, объяснено отличие контейнера от ОС 12 Б/У
10 19 Ресурсы и полная стоимость Рассчитать диск с пиками, RAM, CPU, IOPS, канал и запас на рост Подготовлены две конфигурации Selectel с актуальным расчётом в рублях, отдельно указаны диск и RAM 13 Б/У
10 20 Диск, мониторинг и задания по расписанию Найти рост данных и связать cron/systemd timer с проверкой успеха и ошибок В ограниченной локальной модели найдены растущие логи или повторяющееся задание, проверены оповещение и повтор без дубликата, реальные диски не заполняются 14 Б/У
11 21 Что входит в резервную копию Разделить файлы, изображения, согласованную БД и настройки Составлен и проверен комплект копирования локального сервиса с отдельным хранением и сроком хранения 14 Б
11 22 Восстановление сайта с базой Доказать пригодность копии восстановлением в другом тестовом каталоге Работают страница, загруженное изображение, вход и контрольная запись БД, измерены потеря данных и время восстановления 14 Б
12 23 Доступы, формы и вредоносные боты Объяснить MFA, секреты, обновления, WAF, DDoS и смысл спама Проверены ограничения формы и права тестового сервиса, подготовлена памятка по семейному менеджеру паролей на вымышленных данных 15 Б
12 24 Скорость и диагностика браузером Связать Network, Console, Lighthouse, PageSpeed и Core Web Vitals с действиями пользователя Измерен один сценарий до и после правки изображения или загрузки, условия замера одинаковы 16 Б
13 25 Публикация, ошибки сайта и почта Связать staging/production, переезд, DNS/TLS, коды ошибок и доставку почты Подготовлен выпуск и план переезда с файлами, БД и адресами, на учебных примерах различены 403/404/500/502/503 и роль SMTP/SPF/DKIM/DMARC 16 Б/У
13 26 SEO: страница отвечает на запрос Связать намерение посетителя с текстом, title, description, H1 и ссылками Исправлена одна страница своего сайта, каждое изменение обосновано задачей посетителя 17 Б
14 27 Индексируемость и технический обход Понять sitemap, robots, canonical, статусы, дубли и структурированные данные Screaming Frog проверяет разрешённый учебный сайт, список адресов сверен вручную, приватность не поручена robots.txt 17 Б/У
14 28 Яндекс Метрика: события и цели Отличить просмотр, событие, цель, конверсию и запись Вебвизора В учебном проекте проверено тестовое событие и достижение реальной цели, лишние данные не собираются 17 Б
15 29 GA4: проверка действия посетителя Узнать события GA4, ключевые события и границы аналитики Через отладку проверено действие на учебном сайте, отмечены согласия, фильтры и отсутствие настоящей статистики 17 Б
15 30 Search Console и Яндекс Вебмастер Различить показы и клики в поиске и действия на сайте Подтверждение прав подготовлено или выполнено с разрешения, проверены адрес и sitemap, пустые отчёты не заменены выдуманными данными 17 Б
16 31 Ahrefs: запросы, ссылки и конкуренты Отличить оценки сервиса от реальной статистики владельца Проверены доступные функции аккаунта и ограничения на дату урока, разобрана одна страница и источник оценки без обязательной покупки 17 Б/У
16 32 Помогает ли сайт человеку Объединить пользовательский тест, SEO и фактические события Написан короткий отчёт с данными, ограничениями, одной гипотезой и следующим действием, малый трафик не выдан за A/B-доказательство 8, 9, 17 Б
17 33 Яндекс Директ: задача и подготовка Понять, когда нужна платная реклама, связать предложение, аудиторию, страницу, цель и предел расходов Готов учебный бриф: продукт, география, целевое действие, проверка цели Метрики, набор запросов и минус-слов, предварительный расчёт только в рублях 19 Б
17 34 Яндекс Директ: кампания на Поиске Настроить связи кампания, группа, объявление и страница, разобраться в ЕПК, автотаргетинге, стратегии и ограничении бюджета На учебном макете либо в разрешённом черновике подготовлены места показа, география, цели, фразы, исключения, два объявления и ссылки, реклама не запущена 19 Б
18 35 Яндекс Директ: РСЯ и Карты Отличить рекламные сети и карточку организации от ответа на поисковый запрос Составлены отдельные варианты РСЯ и Карт, проверены смысл креатива, аудитория, карточка организации и цели, поисковые минус-фразы не перенесены автоматически 19 Б/У
18 36 Яндекс Директ: проверка и улучшение Различить показы, клики, промежуточные действия и подтверждённые заявки, проверить расходы и качество запросов По явно учебному отчёту найдены нецелевые запросы и неверная цель, посчитана стоимость подтверждённого результата в рублях, составлен план одной правки и её повторной проверки 19 Б
19 37 API: запросы, права и повторы Разобрать GET/POST, JSON, вебхук, 401/403/429, лимит и цену запроса Локальный имитатор принимает запрос, проверены отказ, ограничение и безопасный повтор без дубликата, ключ скрыт от браузера 18 Б
19 38 Telegram Wizard: клиент и сервер Разобрать подтверждённые модули tg-wizard, шину NATS и проверку доставки По зафиксированному коду объяснён путь клиент, NATS, сервер, Telegram и чтение результата, реальная отправка не выполняется без разрешения 18 Б/У
20 39 Уведомления Teplowoda и расписание Отделить внешний запуск workflow от программы отправки и от tg-wizard На локальных вымышленных данных проверены дата предупреждения и обработка сбоя, в GitHub Actions ничего не запускается 14, 18 Б
20 40 Своя утилита: сначала поиск готового Выбрать полезную операцию и сравнить скрипт, службу, сайт, PWA и настольную программу Проверен skills-and-scripts и другие доступные исходники, составлено ТЗ своей утилиты с решением переиспользовать или создать 18 Б
21 41 Метатеги для 10 000 страниц Отличить смысловую уникальность от перестановки слов Подготовлены пробная партия и проверяемая схема для 10 000 учебных записей: предпросмотр, тесты, журнал и откат, смысл проверяется отдельно от совпадений строк 17, 18 Б/У
21 42 Установка и обновление программы Различить Windows/macOS, PWA, мобильное приложение, установщик и ограничения магазинов Для выбранной утилиты проверен способ запуска, обновления и удаления на целевой системе, семейный менеджер паролей исследуется только по настоящим исходникам 18, 15 Б/У
22 43 Приёмка полезной утилиты Проверить задачу человека, ошибки входных данных и восстановление Готова одна собственная полезная утилита, другой человек запускает её по инструкции на вымышленных данных 18 Б
22 44 Выпускной сайт: идея, ТЗ и устройство Ограничить полезный сценарий и связать его с архитектурой, размещением и проверками Утверждены аудитория, один сценарий, ТЗ, схема, расчёт в рублях и критерии приёмки, лишние функции исключены 5, 6, 8, 9, 11, 13 Б
23 45 Выпускной сайт: рабочий сценарий Разбить работу помощника на маленькие проверяемые задачи Локально работает весь главный сценарий, сохранены проверяемая версия и перечень ограничений 3, 4, 5, 7 Б
23 46 Выпускной сайт: испытания Найти проблемы на телефоне, с клавиатурой, в скорости и правах Пройден протокол сценариев, исправлены ошибки, повторены проверки затронутых мест 9, 15, 16 Б
24 47 Выпуск и обслуживание Подготовить публикацию, аналитику и восстановление Сформирован выпуск с проверенной копией, SEO и целями, при наличии разрешения сайт опубликован и проверен по адресу 10, 14, 16, 17 Б
24 48 Защита сайта и утилиты Самостоятельно объяснить решения, показать результат и план поддержки Показаны один законченный сайт и полезная программа, выполнено контрольное восстановление, записан план дальнейших действий 1–18 Б

Где объединили близкие темы

На 11-й встрече сравниваем варианты реализации и сразу выбираем архитектуру. На 20-й связываем рост диска, наблюдение за состоянием и задания по расписанию на одном локальном примере. На 25-й разбираем публикацию, диагностику и почту, используя уже знакомые DNS, сервер и журналы. На 44-й объединяем окончательный выбор идеи и составление ТЗ: наблюдения о пользе продукта накапливаем с 09-й встречи.

Это освободило четыре встречи 33–36 для Директа без увеличения курса сверх 48 встреч. Копирование и полное восстановление остаются отдельными встречами 21 и 22. Проверку доступа, негативные тесты и выпускные испытания не сокращаем. Сложные настройки служат для понимания устройства, а не для подготовки системного администратора.

Как менять темп

Если результат получен за 10–15 минут, остальное время используем для собственной страницы, наблюдения за человеком или исправления найденной ошибки. При трудностях сокращаем количество функций продукта и углублённые части 18–20, 25, 27, 31, 35, 38, 41–42. Не добавляем обязательные мелкие уроки сверх карты.

В рекламном блоке подготовка, Поиск, РСЯ/Карты и разбор результатов решают разные задачи. Если часть настройки уже понятна, можно объединить её с соседней встречей и раньше перейти к отчёту или практике. Не повторяем в рекламе полное объяснение Метрики: используем проверенную цель с 28-й встречи.

Контрольные точки

После встречи Самостоятельное действие Если пока не получается
02 Найти файлы страницы, различить пиксели и байты, выбрать картинку Сравнить другое фото
08 Показать адаптивную страницу и вернуть испорченный файл Повторить одну правку и возврат
13 Объяснить путь формы к БД и проверить две роли Оставить одну сущность и две роли
19 Обосновать размещение, ОС и ресурсы Сравнить два варианта без покупки
22 Восстановить файлы, изображение, БД и настройки в тестовом окружении Исправить процедуру копирования и повторить
32 Отделить поиск, поведение и полезный результат Разобрать один достоверный набор данных
36 Подготовить кампанию и проверить качество результата Вернуться к цели, предложению и релевантности запросов
43 Другой человек запускает полезную утилиту по инструкции Сократить функции, исправить запуск и ошибки
48 Защитить сайт и утилиту, показать проверки и обслуживание Отметить незакрытые критерии без заявления о готовности

Покрытие обязательных направлений

Модули 1–18 соответствуют исходному ТЗ. Модуль 19 добавлен отдельно по вашему поручению. Номера ниже показывают содержательные встречи, защита закрепляет весь курс.

Модуль Встречи
1. Цифровая азбука и графика 01, 02
2. Интернет 03
3. HTML/CSS и адаптивность 01, 04, 05, 45
4. JavaScript 06, 07, 45
5. Бэкенд, БД и админка 11, 12, 13, 44, 45
6. CMS и фреймворки 11, 44
7. Git и безопасная работа 08, 45
8. Маркетинг 09, 32, 44
9. UX/UI и пользовательские тесты 10, 32, 44, 46
10. Домены, DNS, Cloudflare, cookies 14, 15, 47
11. Размещение сайта 16, 44
12. ОС и Selectel 17, 18
13. Ресурсы сервера 19, 44
14. Эксплуатация, cron, копии и восстановление 20, 21, 22, 39, 47
15. Безопасность и боты 13, 23, 42, 46
16. Скорость, выпуск, ошибки и почта 24, 25, 46, 47
17. SEO и аналитика 26, 27, 28, 29, 30, 31, 32, 41, 47
18. API, Telegram, программы и утилиты 12, 37, 38, 39, 40, 41, 42, 43
19. Яндекс Директ 33, 34, 35, 36

Доступы и изменяемые сведения

До 14-й встречи взрослый проверяет регистратора .RU/.РФ, возраст, документы и цену продления. До 17-й нужен учебный доступ к конкретному продукту Selectel либо актуальная документация. До 28–31-й — доступы к аналитике и подтверждённые права на сайт. Ahrefs изучаем отдельно, покупка подписки не обязательна. До 33-й — проверка пригодности продукта для рекламы и доступов взрослого. Учебные расчёты не создают бюджет реальной кампании.

На 04.11.2026 проверены источники первых двух уроков, код четырёх семейных репозиториев и официальные отправные документы рекламного блока. Будущие тарифы, условия регистрации, интерфейсы, ограничения аккаунтов и работа целей в реальном кабинете не проверены. Перед конкретной встречей сверить актуальные сведения и реальные доступы. Все суммы только в рублях с датой, налогами, продлением и расходами на сопровождение.

Ссылки будущих занятий — отправные точки проверки. Они не подтверждают выполненную настройку счётчиков, публикацию собственного проекта ученицы или запуск рекламной кампании. Публикация материалов этого курса — отдельное действие преподавателя.