Создать панель развёртывания в консоли
В этом бесплатном курсе 10 глав. Вы создадите Acme Deploys с пустой страницы до развёрнутого приложения с маршрутами, данными и тестами. Каждая глава работает в DevTools, пока вы её читаете.
Прогресс0/10
- 01Начало работыСоздайте приложение, отрендерите первую страницу и обработайте нажатие клавиши.5 мин
- 02Макет с BoxСоздайте каркас панели на Flexbox в ячейках: верхнюю панель, боковую панель и карточки.7 мин
- 03Текст и стилиОформите карточку развёртывания с помощью цветов, атрибутов текста и токенов темы.6 мин
- 04Ввод и раскладки клавишПеремещайтесь по развёртываниям с клавиатуры и добавьте справку поверх экрана по клавише ?.8 мин
- 05МаршрутизацияРазделите приложение на маршруты с общим макетом, ссылками с сочетаниями клавиш и историей.8 мин
- 06Данные и обработчики маршрутовОтдавайте развёртывания из app/api, загружайте их на странице и отправляйте новые.8 мин
- 07Table, List и графикиЗамените самописные строки на Table с сортировкой и график, который не сдвигает макет.7 мин
- 08ТестированиеРендерите вне экрана, нажимайте клавиши и проверяйте кадр как текст.6 мин
- 09Запуск в терминалеЗапустите ту же панель на весь экран в терминале командой text run.5 мин
- 10ВыпускСоберите, задайте метаданные и разверните Acme Deploys.4 мин
- ▼СертификатПолучите сертификат с вашим именем, отрисованный в консоли.
Курс работает в вашей консоли
Откройте консоль сочетанием ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (сначала включите функции разработчика), нажмите ниже и выберите главу клавишами со стрелками.
▼ learn
Открыть консоль
⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C
Приложение рендерится в DevTools.Сначала включите «Показывать функции для веб-разработчиков» в Safari: «Настройки» → «Дополнения». Затем щёлкните здесь и нажмите ↓.
Открыть на компьютере
Это приложение рендерится в консоли DevTools, для которой нужен браузер на компьютере.