Верстал ли с нуля

Верстка сайтов с нуля

Да, я имею обширный опыт верстки с нуля и разработки полноценных веб-интерфейсов. Расскажу о подходе и примерах.

Опыт верстки

Я верстал множество проектов:

1. Лендинги и маркетинговые сайты — полностью адаптивные, оптимизированные для всех устройств
2. Админ-панели — сложные интерфейсы с формами, таблицами, модальными окнами
3. e-commerce платформы — каталоги товаров, корзины, системы фильтрации
4. Социальные платформы — ленты, профили, системы уведомлений
5. SaaS приложения — комплексные интерфейсы с кастомными компонентами

Процесс верстки с нуля

Этап 1: Анализ макета

Изучаю дизайн (Figma, Adobe XD), определяю брейкпоинты для адаптива, выделяю компоненты.

Этап 2: Подготовка проекта

npx create-next-app@latest --typescript --tailwind

src/
├── components/
│   ├── ui/
│   ├── layout/
│   └── sections/
├── pages/
└── styles/

Этап 3: Создание HTML структуры

export default function Home() {
  return (
    <main className="min-h-screen bg-white">
      <Header />
      <Hero />
      <Features />
      <Testimonials />
      <CallToAction />
      <Footer />
    </main>
  );
}

Этап 4: Верстка компонентов

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

export function Button({
  variant = 'primary',
  size = 'md',
  children,
}: ButtonProps) {
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
  };
  
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg',
  };
  
  return (
    <button className={`${variants[variant]} ${sizes[size]} rounded-lg`}>
      {children}
    </button>
  );
}

Техники верстки

1. Mobile-first подход

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
    gap: 2rem;
  }
}

2. Семантический HTML

<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

<main>
  <article>
    <h1>Заголовок</h1>
  </article>
</main>

<footer>
  <p>Копирайт</p>
</footer>

3. Система компонентов

interface CardProps {
  children: React.ReactNode;
  className?: string;
}

export function Card({ children, className = '' }: CardProps) {
  return (
    <div className={`bg-white rounded-lg shadow-md p-6 ${className}`}>
      {children}
    </div>
  );
}

Примеры сложных компонентов

Модальное окно

export function Modal({ isOpen, onClose, title, children }: ModalProps) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg shadow-lg max-w-md w-full mx-4 p-6">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-bold">{title}</h2>
          <button onClick={onClose} className="text-gray-500">
            X
          </button>
        </div>
        {children}
      </div>
    </div>
  );
}

Форма с валидацией

export function LoginForm() {
  const [state, setState] = useState({
    email: '',
    password: '',
    errors: {},
  });

  const validate = () => {
    const newErrors = {};
    
    if (!state.email.includes('@')) {
      newErrors.email = 'Неверный email';
    }
    if (state.password.length < 8) {
      newErrors.password = 'Пароль минимум 8 символов';
    }
    
    setState(prev => ({ ...prev, errors: newErrors }));
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      // Отправить форму
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <input
          type="email"
          value={state.email}
          onChange={(e) => setState(prev => ({ ...prev, email: e.target.value }))}
          className="w-full px-4 py-2 border rounded-lg"
          placeholder="Email"
        />
        {state.errors.email && (
          <p className="text-red-500 text-sm mt-1">{state.errors.email}</p>
        )}
      </div>
      
      <button type="submit" className="w-full bg-blue-600 text-white py-2 rounded-lg">
        Вход
      </button>
    </form>
  );
}

Инструменты и стек

1. Next.js 16 — фреймворк для production приложений
2. React 19 — UI компоненты с состоянием
3. TypeScript — строгая типизация
4. Tailwind CSS v4 — утилиты для стилей
5. Figma — работа с макетами
6. Playwright — E2E тестирование верстки

Лучшие практики

• Мобильный дизайн в первую очередь (mobile-first)
• Семантический HTML для доступности
• Разделение на переиспользуемые компоненты
• Последовательность отступов и размеров
• Чистый, читаемый код
• Кроссбраузерная совместимость
• Оптимизация изображений