Проект: Лендинг за 30 минут

Сейчас ты создашь свой первый сайт - настоящий лендинг с дизайном, анимациями и адаптивной вёрсткой. Он будет жить в интернете, и ты сможешь отправить ссылку кому угодно. Никакого опыта в программировании не нужно - всё сделает ИИ.

Шаг 1: Установи Node.js

Node.js - это среда для запуска JavaScript-инструментов. Скачай LTS-версию с nodejs.org и установи (просто жми «Далее»).

Проверь установку - открой терминал (Terminal на Mac, PowerShell на Windows) и введи:

node --version   # Должно показать v22.x.x или выше
npm --version    # Должно показать 10.x.x или выше

npm - менеджер пакетов для JavaScript. Это как App Store, но для программистов - позволяет устанавливать готовые инструменты одной командой в терминале.

Если видишь версии - всё работает. Если нет - перезагрузи терминал.

Шаг 2: Установи Claude Code

Claude Code - это ИИ-помощник, который работает прямо в твоём терминале. Он создаёт, редактирует и запускает код по твоим текстовым инструкциям.

npm install -g @anthropic-ai/claude-code

После установки тебе понадобится API-ключ от Anthropic. Зарегистрируйся на console.anthropic.com, пополни баланс (от $5) и создай ключ в разделе API Keys.

Шаг 3: Создай проект и запусти Claude Code

mkdir my-first-site
cd my-first-site
claude

Claude Code запустится и будет ждать твою инструкцию. Ты сейчас в диалоге с ИИ, который может создавать файлы, писать код и запускать команды на твоём компьютере.

Шаг 4: Дай инструкцию для лендинга

Скопируй этот промпт и вставь в Claude Code:

Создай персональный лендинг-портфолио. Один файл index.html с Tailwind CSS через CDN.

Требования:
- Тёмная тема с градиентами (фиолетовый → синий)
- Hero-секция с именем, должностью и кнопкой CTA
- Секция "Навыки" - 4 карточки с иконками
- Секция "Проекты" - 3 карточки с картинками-заглушками
- Секция "Контакты" - форма (имя, email, сообщение)
- Полностью адаптивный (мобильная, планшет, десктоп)
- Плавные анимации при скролле (Intersection Observer)
- Гладкий скролл по навигации

Claude Code создаст файл index.html за 1-2 минуты. Открой его в браузере - ты увидишь готовый сайт.

Шаг 5: Деплой на Netlify за 1 минуту

Зайди на app.netlify.com/drop
Перетащи папку my-first-site прямо в окно браузера
Через 10 секунд получишь ссылку вида https://random-name.netlify.app

Готово! Твой первый сайт - в интернете. Отправь ссылку другу, добавь в резюме или покажи клиенту. Ты только что сделал за 30 минут то, на что раньше уходила неделя.

Что дальше?

Попробуй попросить Claude Code доработать сайт: «Добавь секцию с отзывами клиентов и анимацию печатающегося текста в Hero». Каждая итерация - это новый навык.

Создай свой первый проект