Умеешь ли верстать

Умение верстать и создавать разметку

Да, верстка (HTML + CSS) — это фундаментальный навык Frontend Developer. Верстка включает создание структурированной разметки и стилизацию компонентов.

Компетенции в верстке

1. Семантическая HTML разметка

Верстка начинается с правильной HTML структуры:

<!-- Плохо: не семантично -->
<div class="header">
  <div class="logo">Logo</div>
  <div class="menu">
    <div>Home</div>
    <div>About</div>
  </div>
</div>

<!-- Хорошо: семантично -->
<header>
  <h1>Logo</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

Семантические теги улучшают SEO, доступность и читаемость кода.

2. CSS Flexbox

Flexbox — основной инструмент для создания макетов:

<style>
  .container {
    display: flex;
    justify-content: space-between; /* Распределить элементы по оси X */
    align-items: center; /* Выровнять по центру на оси Y */
    gap: 20px; /* Расстояние между элементами */
    flex-wrap: wrap; /* Переносить на новую строку */
  }

  .item {
    flex: 1; /* Занимать равное место */
    min-width: 200px; /* Минимальная ширина */
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

3. CSS Grid

Grid используется для сложных двумерных макетов:

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки одинакового размера */
    grid-gap: 20px;
    grid-auto-rows: minmax(200px, auto); /* Высота строк */
  }

  .grid-item {
    background: #f0f0f0;
    padding: 20px;
  }
</style>

<div class="grid">
  <div class="grid-item">Card 1</div>
  <div class="grid-item">Card 2</div>
  <div class="grid-item">Card 3</div>
</div>

4. Responsive Design (Мобильная адаптация)

Верстка должна работать на всех устройствах:

<style>
  .container {
    width: 100%; /* Мобильная версия */
    padding: 20px;
  }

  .item {
    width: 100%; /* На мобильных в 1 колонку */
    margin-bottom: 20px;
  }

  /* Планшеты и выше */
  @media (min-width: 768px) {
    .container {
      display: flex;
      gap: 20px;
    }

    .item {
      width: 48%;
    }
  }

  /* Десктоп */
  @media (min-width: 1024px) {
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }

    .item {
      width: auto;
    }
  }
</style>

5. Tailwind CSS

В современной разработке используется утилитарный CSS (например, Tailwind):

// Вместо писания CSS, используешь готовые классы
function Card() {
  return (
    <div className="flex gap-4 p-6 bg-white rounded-lg shadow-md">
      <img 
        src="avatar.jpg" 
        alt="Avatar" 
        className="w-16 h-16 rounded-full"
      />
      <div className="flex-1">
        <h3 className="text-lg font-bold text-gray-900">John Doe</h3>
        <p className="text-sm text-gray-500">Software Engineer</p>
      </div>
    </div>
  );
}

6. Анимации и переходы

<style>
  .button {
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* Плавный переход при наведении */
    transition: all 0.3s ease;
  }

  .button:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  /* Анимация появления */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .fade-in {
    animation: fadeIn 0.5s ease;
  }
</style>

7. Доступность (Accessibility)

Верстка должна быть доступной для всех:

<!-- Правильно -->
<button aria-label="Закрыть окно">X</button>
<img src="photo.jpg" alt="Описание фото" />
<form>
  <label for="email">Email:</label>
  <input id="email" type="email" />
</form>

<!-- Неправильно -->
<button>X</button> <!-- Нет описания -->
<img src="photo.jpg" /> <!-- Нет alt атрибута -->
<input type="email" /> <!-- Нет label -->

8. Практический пример: Карточка товара

function ProductCard({ product }) {
  return (
    <article className="flex flex-col bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
      {/* Изображение */}
      <img 
        src={product.image} 
        alt={product.name}
        className="w-full h-48 object-cover"
      />
      
      {/* Содержимое */}
      <div className="flex flex-col flex-1 p-4">
        <h3 className="text-lg font-bold text-gray-900 mb-2">
          {product.name}
        </h3>
        
        <p className="text-gray-600 text-sm mb-4 flex-1">
          {product.description}
        </p>
        
        {/* Цена и кнопка */}
        <div className="flex items-center justify-between">
          <span className="text-xl font-bold text-blue-600">
            ${product.price}
          </span>
          <button className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
            В корзину
          </button>
        </div>
      </div>
    </article>
  );
}

Навыки, которые должен иметь Frontend Developer

• HTML5 — семантическая разметка, формы, медиа
• CSS3 — Flexbox, Grid, медиа запросы, анимации
• CSS Framework — Tailwind, Bootstrap или чистый CSS
• Responsive Design — адаптация под мобильные, планшеты, десктоп
• Cross-browser compatibility — работа на всех браузерах
• Accessibility — доступность для людей с ограничениями
• Performance — оптимизация скорости загрузки
• BEM/Методологии — организация CSS кода

Инструменты верстальщика

• Браузерные DevTools — для отладки и инспекции
• CSS preprocessors — SCSS/LESS для организации кода
• Design tools — Figma для восприятия дизайна
• Responsive testing — проверка на разных устройствах

Заключение

Верстка — это не просто создание красивого внешнего вида. Это создание семантической, доступной, быстрой и адаптивной разметки, которая работает на всех устройствах и браузерах. Современный Frontend Developer должен не только уметь верстать, но и делать это эффективно, используя инструменты как Tailwind CSS или системы дизайна.