Урок 6.2: Итоги курса

Что вы изучили на курсе

Давайте вспомним весь путь, который вы прошли. Каждый модуль — это кирпичик в фундаменте ваших знаний.

Что вы теперь умеете

Это не просто список — это ваши реальные навыки. Вы можете смело указывать их в резюме и портфолио:

Пример кода, который вы теперь понимаете

Посмотрите на этот код. До курса он выглядел бы как магические символы. Теперь вы понимаете каждую строчку:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой проект</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <div class="container">
            <h1>Мой сайт</h1>
            <nav>
                <a href="/">Главная</a>
                <a href="/about">О нас</a>
            </nav>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="container">
                <h2>Добро пожаловать!</h2>
                <p>Это семантическая и адаптивная страница.</p>
            </div>
        </section>

        <section class="features">
            <div class="container">
                <h2>Наши преимущества</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <h3>Скорость</h3>
                        <p>Оптимизированный код</p>
                    </div>
                    <div class="feature-card">
                        <h3>Качество</h3>
                        <p>Семантическая вёрстка</p>
                    </div>
                    <div class="feature-card">
                        <h3>Адаптив</h3>
                        <p>Работает на всех экранах</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2026 Все права защищены</p>
        </div>
    </footer>

</body>
</html>

А вот CSS к этой странице. Вы легко прочитаете его и поймёте, что происходит:

/* Сброс стилей */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Шапка */
header {
    background: #2d2d2d;
    color: white;
    padding: 16px 0;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav a {
    color: white;
    text-decoration: none;
    margin-left: 20px;
}

/* Секция Hero */
.hero {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    text-align: center;
    padding: 80px 20px;
}

.hero h2 {
    font-size: 2.5em;
    margin-bottom: 16px;
}

/* Сетка преимуществ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 40px 0;
}

.feature-card {
    background: #f8f8f8;
    padding: 24px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Адаптив */
@media (max-width: 768px) {
    header .container {
        flex-direction: column;
        gap: 12px;
    }
    nav a {
        margin: 0 10px;
    }
    .features-grid {
        grid-template-columns: 1fr;
    }
    .hero {
        padding: 60px 20px;
    }
    .hero h2 {
        font-size: 1.8em;
    }
}

/* Подвал */
footer {
    background: #2d2d2d;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

Сколько времени вы потратили?

Давайте примерно подсчитаем. Если вы прошли курс последовательно, не пропуская уроки и выполняя задания:

• Модуль 1 (Основы HTML) — ~6–8 часов
• Модуль 2 (CSS — стилизация) — ~8–10 часов
• Модуль 3 (Flexbox) — ~5–7 часов
• Модуль 4 (CSS Grid) — ~6–8 часов
• Модуль 5 (Адаптивная верстка) — ~5–7 часов
• Модуль 6 (Практика и заключение) — ~4–5 часов

Итого: примерно 35–45 часов чистого времени. Плюс время на самостоятельные проекты, эксперименты, поиск информации. Реально — 50–60 часов плотной работы.

Это много? Это мало? Для сравнения: чтобы выучить JavaScript на начальном уровне, нужно примерно 200–300 часов. А чтобы стать профессиональным фронтенд-разработчиком — 2000+ часов.

Вы прошли первый, но очень важный этап. Фундамент заложен.

Благодарность

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

Теперь у вас есть всё, чтобы:

• Сверстать свой первый сайт-портфолио
• Сделать лендинг для друга или знакомого
• Начать изучать JavaScript и стать полноценным фронтенд-разработчиком
• Даже найти работу junior-верстальщиком (да, такие вакансии существуют!)

Ссылки для дальнейшего изучения

Курс закончен, но обучение продолжается. Вот лучшие ресурсы, которые помогут вам углубить знания:

📘 MDN Web Docs (Mozilla Developer Network)

Лучшая документация по веб-технологиям в мире. Если у вас возник вопрос по HTML или CSS — ответ на 99% есть на MDN. Все статьи написаны понятным языком, с примерами кода и интерактивными демонстрациями.

developer.mozilla.org

Полная документация по HTML, CSS, JavaScript и другим веб-технологиям. Есть русская версия.

🎓 HTML Academy

Российская платформа с интерактивными тренажёрами по HTML и CSS. Отличный способ закрепить теорию практикой. Много бесплатных курсов и заданий.

HTML Academy

Интерактивные курсы по HTML, CSS, JavaScript. Тренажёры с мгновенной проверкой кода.

🌍 freeCodeCamp

Одна из крупнейших бесплатных платформ для обучения программированию. Полноценный курс по адаптивной вёрстке, после которого вы получите сертификат.

freeCodeCamp

Бесплатные курсы по веб-разработке с сертификатами. Тысячи часов практических заданий.

📹 YouTube-каналы

Иногда лучше один раз увидеть, чем сто раз прочитать. Вот несколько отличных каналов:

• Владилен Минин — понятные уроки по фронтенду
• WebDesign Master — вёрстка сайтов с нуля, много практики
• Фрилансер по жизни (Женя Андриканич) — вёрстка реальных проектов
• Traversy Media — англоязычный канал, отличные туториалы
• Kevin Powell — глубокое погружение в CSS

📚 Книги

• «HTML и CSS. Дизайн и вёрстка веб-сайтов» — Джон Дакетт (отличная книга для начинающих)
• «CSS: Полный справочник» — Эрик Мейер (для тех, кто хочет знать CSS досконально)
• «Новая большая книга CSS» — Дэвид Макфарланд

🛠 Инструменты для практики

• CodePen (codepen.io) — онлайн-песочница для HTML/CSS/JS. Можно писать код и сразу видеть результат. Отлично подходит для экспериментов.
• JSFiddle (jsfiddle.net) — ещё одна онлайн-песочница.
• Figma (figma.com) — дизайн-инструмент для вёрстки по макетам.
• Can I Use (caniuse.com) — проверка поддержки CSS-свойств в браузерах.
• Google PageSpeed Insights — проверка скорости загрузки сайта.
• W3C Validator — валидатор HTML от консорциума W3C.

Что дальше?

Этот курс — только начало. В следующем уроке (6.3) мы поговорим о том, куда двигаться дальше и какие технологии изучать после HTML и CSS. Но уже сейчас вы можете выбрать одно из направлений:

• Углубиться в CSS — изучить анимации, трансформации, препроцессоры (Sass)
• Начать JavaScript — чтобы добавить интерактивность на страницы
• Попробовать фреймворк — Tailwind CSS, Bootstrap для ускорения вёрстки
• Заняться дизайном — изучить Figma, цветовые схемы, типографику

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

---