HTML и CSS с нуля за 2 недели: план обучения

Вёрстка — идеальный старт в IT. Не нужно быть математиком, достаточно внимательности и желания. За две недели интенсивной практики вы сможете сверстать лендинг и получить первые заказы на фрилансе.

Код на мониторе

День 1-3: Основы HTML

Выучите базовые теги:

  • Структура документа: html, head, body
  • Заголовки: h1-h6
  • Текст: p, span, strong, em
  • Списки: ul, ol, li
  • Ссылки: a href
  • Изображения: img src
  • Таблицы: table, tr, td
<h1>Привет, мир!</h1>
<p>Мой первый <strong>сайт</strong> на HTML</p>
<a href="https://google.ru">Ссылка на Google</a>

День 4-7: CSS — стилизация

Поймите, как работает каскадность:

  • Селекторы: по тегу, классу, id
  • Цвета: background-color, color
  • Шрифты: font-size, font-family, font-weight
  • Отступы: margin, padding
  • Рамки: border, border-radius
  • Flexbox — главный инструмент для сеток

День 8-10: Flexbox и Grid

Изучите современные способы вёрстки. Играйте в тренажёры:

  • Flexbox Froggy — учим flex в игре
  • Grid Garden — учим CSS Grid

Flexbox для одномерной вёрстки (меню, карточки в ряд), Grid для двухмерной (сетка сайта).

День 11-12: Адаптивная вёрстка

Сайт должен красиво выглядеть на телефоне. Используйте медиазапросы:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

День 13-14: Ваш первый проект

Сверстайте сайт-визитку или лендинг:

  1. Скачайте макет с Figma Community (бесплатно)
  2. Разбейте на компоненты (шапка, герой, карточки, подвал)
  3. Используйте семантические теги: header, main, section, footer
  4. Выложите на GitHub Pages или Netlify (бесплатно)

Ресурсы для обучения

  • HTML Academy — интерактивные курсы
  • MDN Web Docs — документация на русском
  • YouTube: каналы "Фрилансер по жизни", "WebDev с нуля"
  • Практика: Codewars (задачи на CSS), Frontend Mentor (готовые макеты)

Результат: Через 2 недели вы сможете верстать лендинги под заказ. Стартовая цена — 3000-5000 руб за проект. Через месяц практики — 10 000-15 000 руб.