Пройдите путь от понятной HTML-страницы до небольшого приложения: добавьте поведение, обработайте состояния данных и оставьте инструкцию, по которой результат можно повторить.
02Добавить поведение и проверить изменение состояния
03Разделить данные, загрузку и ошибку
04Передать воспроизводимую версию и выбрать обучение
Маршрут без лишнего
Что делать по порядку
Не пытайтесь освоить всё сразу. Каждый следующий этап должен заканчиваться практическим результатом.
01
Этап 1 из 4
Сверстать понятный и управляемый экран
Начните с одной страницы без фреймворка: заголовки описывают структуру, ссылки ведут по адресам, кнопки выполняют действия, у полей есть названия. Проверьте узкое окно и длинный текст. Пройдите интерфейс клавишей Tab; Enter или Space должны выполнять действие подходящего элемента, а фокус — оставаться видимым.
Результат этапа: Основной сценарий доступен без мыши, смысл страницы сохраняется на узком экране. Записаны фактические размеры и браузер проверки; это ещё не аудит всей доступности.
Добавить поведение и проверить изменение состояния
Реализуйте одно действие на JavaScript: изменение фильтра, раскрытие информации или проверку формы. Заранее запишите ожидаемый результат. Проверьте исходное состояние, повтор действия и возврат; предусмотрите пустой ввод и понятное сообщение об ошибке, если они применимы.
Результат этапа: Есть воспроизводимый сценарий и наблюдавшийся ответ. Вы объясняете, где хранится состояние и почему повтор действия не оставляет экран в противоречивом состоянии.
Подключите разрешённый учебный API или явно обозначенный локальный набор. Рассмотрите ожидание ответа, заполненный и пустой результат, ошибку и повтор запроса. Не превращайте ошибку в пустой список. После этого выделите повторяемые части в компоненты; React и TypeScript изучайте на этой задаче, а не вместо проверки поведения.
Результат этапа: Каждое состояние можно показать на контролируемых учебных данных. Известно, что увидит человек и какое действие ему доступно; вымышленные ответы не названы работой реального API.
Передать воспроизводимую версию и выбрать обучение
Сохраните версию кода, команды запуска, требования к среде и результаты проверок. Не публикуйте ключи API и приватные данные. Попросите читателя повторить основной сценарий. Если выбираете платную программу, проверьте её полную цену, нагрузку и разбор проектов человеком; бесплатная документация подходит для самостоятельной базы, но не заменяет индивидуальную обратную связь.
Результат этапа: Другой человек может запустить указанную версию и повторить проверенный сценарий. Непроверенное обозначено отдельно; один проект не гарантирует готовность к вакансии или трудоустройство.
Не копируйте учебный бриф профессии в портфолио как выполненный проект. Для собственной версии запишите: среда → исходное состояние → действие → ожидаемый ответ → фактический ответ. Если сценарий не запускался, отметьте «не проверено».
Четыре проверки перед передачей
Клавиатура. Основное действие выполняется без мыши, фокус виден и не застревает. Укажите, какой сценарий реально прошли.
Размер и данные. Проверьте узкое окно, длинное название и пустой результат. Сохраните размеры и данные для повторения.
Ошибка и возврат. На разрешённом локальном сценарии воспроизведите ошибку и повтор. Различайте управляемую имитацию ответа и обращение к API.
Версия и ограничения. Укажите версию кода, браузер и дату; успешный запуск в одном браузере не означает проверку всех устройств.
Передайте исходный код, инструкцию запуска, разрешённые учебные данные и проверяемую версию. Запишите браузер, размер окна, сценарий, ожидание и фактический результат. Отдельно перечислите непроверенные устройства и функции; снимок красивого экрана не подтверждает работу всего приложения.
Зарплатные примеры не обещают доход новичку. В отдельном разборе профильной программы проверьте условия и ограничения; покупка курса не обязательна для начала практики.