Опиши процесс верстки от получения тех задания до сдачи макета

Процесс верстки от получения тех задания до сдачи макета

Процесс верстки — это методический процесс преобразования дизайна в рабочий код. За 10+ лет я разработал четкую систему, которая обеспечивает качество, производительность и масштабируемость.

Этап 1: Анализ и подготовка (1-2 часа)

Изучение тех задания

1. Получить и внимательно прочитать техническое задание
2. Поиск неясностей и уточнений:
   - Какие браузеры нужно поддерживать?
   - Какие разрешения экранов (mobile, tablet, desktop)?
   - Нужна ли поддержка доступности (a11y)?
   - Какие интеграции (API, CMS, аналитика)?
3. Получить макеты (Figma, Adobe XD, наброски)
4. Уточнить требования к производительности
5. Согласовать deadline и процесс приемки

Подготовка окружения

// Проверяю наличие:
- package.json с нужными зависимостями
- .eslintrc и .prettierrc для стиля кода
- tailwind.config.js с дизайн-системой
- TypeScript strict mode в tsconfig.json
- Тестовую конфигурацию (jest/vitest)

Этап 2: Планирование архитектуры (30 минут)

Разбиение на компоненты

Макет: Лендинг сайта PrepBro
├── Header (навигация, логотипы)
├── HeroSection (заголовок, CTA кнопка)
├── FeaturesSection
│   └── FeatureCard (переиспользуемый)
├── PricingSection
│   └── PricingCard (переиспользуемый)
├── Footer (ссылки, социальные сети)
└── Modal (переиспользуемый)

Определение переиспользуемых компонентов

• Button (primary, secondary, sizes)
• Card (для features и pricing)
• Input (для форм)
• Modal (для диалогов)

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

Создание файловой структуры

src/
├── components/
│   ├── ui/
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   ├── Input.tsx
│   │   └── Modal.tsx
│   ├── layout/
│   │   ├── Header.tsx
│   │   └── Footer.tsx
│   └── sections/
│       ├── HeroSection.tsx
│       ├── FeaturesSection.tsx
│       └── PricingSection.tsx
├── styles/
│   └── globals.css
├── lib/
│   ├── utils.ts
│   └── types.ts
└── pages/
    └── index.tsx

Настройка цветов и типографии

/* globals.css */
@theme inline {
  --color-text-content-primary: #1a1a1a;
  --color-text-content-secondary: #666666;
  --color-bg-surface-primary: #ffffff;
  --color-bg-surface-secondary: #f5f5f5;
  --color-border-default: #e0e0e0;
  --color-text-link: #0066cc;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-variation-settings: "slnt" 0deg;
}

Этап 4: Разработка компонентов (TDD подход)

Шаг 1: Тесты

// Button.test.tsx
import { render, screen } from '@testing-library/react';
import { Button } from './Button';

describe('Button', () => {
  test('должна отрендериться с текстом', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  test('должна иметь primary вариант по умолчанию', () => {
    render(<Button>Primary</Button>);
    expect(screen.getByText('Primary')).toHaveClass('bg-primary');
  });

  test('должна иметь secondary вариант', () => {
    render(<Button variant="secondary">Secondary</Button>);
    expect(screen.getByText('Secondary')).toHaveClass('bg-white');
  });

  test('должна быть отключена при disabled=true', () => {
    render(<Button disabled>Disabled</Button>);
    expect(screen.getByText('Disabled')).toBeDisabled();
  });
});

Шаг 2: Компонент

// Button.tsx
import { ReactNode } from 'react';
import { cn } from '@/lib/utils';

interface ButtonProps {
  children: ReactNode;
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  onClick?: () => void;
  className?: string;
}

export function Button({
  children,
  variant = 'primary',
  size = 'md',
  disabled = false,
  onClick,
  className
}: ButtonProps) {
  const baseStyles = 'font-medium rounded-lg transition-colors duration-200';
  
  const variantStyles = {
    primary: 'bg-primary text-white hover:bg-primary-dark',
    secondary: 'bg-white border border-border-default text-content-primary hover:bg-surface-secondary'
  };
  
  const sizeStyles = {
    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={cn(
        baseStyles,
        variantStyles[variant],
        sizeStyles[size],
        disabled && 'opacity-50 cursor-not-allowed',
        className
      )}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

Шаг 3: Запуск тестов

npm test -- Button.test.tsx
# Все тесты проходят (GREEN)

Этап 5: Верстка страниц

Header компонент

// Header.tsx
import { Logo } from './Logo';
import { Navigation } from './Navigation';
import { Button } from '@/components/ui/Button';

export function Header() {
  return (
    <header className="sticky top-0 z-50 bg-surface-primary border-b border-border-default">
      <div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
        <Logo />
        <Navigation />
        <Button>Get Started</Button>
      </div>
    </header>
  );
}

Hero Section

// HeroSection.tsx
import { Button } from '@/components/ui/Button';
import Image from 'next/image';

export function HeroSection() {
  return (
    <section className="py-20 md:py-32 bg-gradient-to-br from-surface-primary to-surface-secondary">
      <div className="max-w-7xl mx-auto px-4 grid md:grid-cols-2 gap-12 items-center">
        <div>
          <h1 className="text-4xl md:text-5xl font-bold text-content-primary mb-6">
            Подготовка к IT собеседованиям
          </h1>
          <p className="text-lg text-content-secondary mb-8">
            Ответы на 1000+ вопросов от опытных разработчиков
          </p>
          <Button size="lg">Начать сейчас</Button>
        </div>
        <div className="relative h-96">
          <Image
            src="/hero.jpg"
            alt="Interview preparation"
            fill
            className="object-cover rounded-lg"
          />
        </div>
      </div>
    </section>
  );
}

Этап 6: Тестирование (Пирамида тестирования)

Unit тесты

npm run test:run
# Coverage: 92%

Integration тесты

// HeroSection.integration.test.tsx
import { render, screen } from '@testing-library/react';
import { HeroSection } from './HeroSection';

test('HeroSection должна отрендериться с заголовком и кнопкой', () => {
  render(<HeroSection />);
  expect(screen.getByText(/Подготовка к IT собеседованиям/)).toBeInTheDocument();
  expect(screen.getByRole('button', { name: /Начать сейчас/ })).toBeInTheDocument();
});

E2E тесты (Playwright)

// hero.e2e.test.ts
import { test, expect } from '@playwright/test';

test('пользователь видит hero section и может кликнуть на кнопку', async ({ page }) => {
  await page.goto('/');
  
  // Проверяем видимость элементов
  await expect(page.getByRole('heading', { name: /Подготовка/ })).toBeVisible();
  
  // Кликаем кнопку
  const button = page.getByRole('button', { name: /Начать/ });
  await button.click();
  
  // Проверяем редирект или модал
  await expect(page).toHaveURL(/.*sign-up/);
});

Этап 7: Оптимизация и проверки

Производительность

# Проверяем Core Web Vitals
npm run build
npm run start
# Lighthouse: 95+

# Анализируем бандл
npm run bundle-analyze
# Убеждаемся, что каждый компонент не превышает 50KB

Доступность

// Используем semantic HTML
<header>
  <h1>Заголовок</h1>
  <nav aria-label="Main navigation"></nav>
</header>

// ARIA атрибуты где нужно
<button aria-pressed="false" aria-label="Toggle menu">
  Menu
</button>

// Alt текст для изображений
<img src="hero.jpg" alt="Люди на собеседовании" />

Лinting и форматирование

npm run lint
# Исправляем все ошибки ESLint

npm run format
# Форматируем код через Prettier

npm run type-check
# Проверяем TypeScript типы (strict mode)

Этап 8: Кросс-браузерное тестирование

1. Chrome (Chromium)
2. Firefox
3. Safari
4. Edge
5. Mobile Safari (iOS)
6. Chrome (Android)

Проверяем:
- Верстка на разных разрешениях
- Шрифты загружаются
- Изображения отображаются
- Интерактивные элементы работают

Этап 9: Responsive дизайн

// Mobile-first подход
export function FeaturesSection() {
  return (
    <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {/* Сначала 1 колонка (mobile) */}
      {/* md: 2 колонки (tablet) */}
      {/* lg: 3 колонки (desktop) */}
    </section>
  );
}

Этап 10: Финальная проверка

# Чеклист перед сдачей

[ ] npm run build - сборка успешна
[ ] npm run lint - нет ошибок
[ ] npm run test:run - все тесты проходят
[ ] npm run test:coverage - coverage >= 90%
[ ] Responsive работает на всех разрешениях
[ ] Lighthouse score >= 90
[ ] Accessibility проверен (axe-core)
[ ] Все ссылки работают
[ ] Нет console.log / commented code
[ ] Изображения оптимизированы
[ ] Шрифты загружаются быстро

Этап 11: Документирование

// Стори для Storybook (опционально)
// stories/Button.stories.tsx

export default {
  title: 'UI/Button',
  component: Button,
};

export const Primary = {
  args: { variant: 'primary', children: 'Primary Button' },
};

export const Secondary = {
  args: { variant: 'secondary', children: 'Secondary Button' },
};

Этап 12: Сдача

1. Создаю Pull Request
2. Описываю изменения (что верстал, какие компоненты)
3. Добавляю скриншоты или видео
4. Прошу код ревью у коллег
5. Исправляю замечания
6. Мергу в develop/main
7. Деплой на staging
8. Финальная проверка с дизайнером/PM
9. Деплой в production

Инструменты, которые использую

- Code Editor: VS Code
- Browser DevTools: Chrome DevTools, Firefox DevTools
- Design tools: Figma (для проверки пиксели-в-пиксель)
- Performance: Google Lighthouse, Web.dev
- Accessibility: axe DevTools, WAVE
- Testing: Vitest, Testing Library, Playwright
- Build: Vite / Next.js

Вывод

Процесс верстки — это не просто преобразование дизайна в код. Это:

1. Анализ — понимание требований
2. Планирование — правильная архитектура
3. Разработка — качественный код с тестами
4. Оптимизация — производительность и доступность
5. Тестирование — кросс-браузерная совместимость
6. Документирование — понятность кода
7. Сдача — качественный код ревью и интеграция

Средняя верстка одной страницы занимает 2-4 дня, в зависимости от сложности. Моя цель — это код, который не только работает, но и легко поддерживается, масштабируется и что самое важное — дает отличный пользовательский опыт.