Урок 6.3: Дальнейший Roadmap

Поздравляю, вы на финише!

Вы прошли полный курс по HTML и CSS. Теперь у вас есть твёрдая база. Но веб-разработка — это огромный мир, и впереди ещё много интересного. Этот урок — карта, которая покажет вам, куда можно двигаться дальше.

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

JavaScript — оживляем страницу

Первый и самый логичный шаг после HTML/CSS — это JavaScript. Если HTML — это скелет, CSS — одежда, то JavaScript — это мышцы. Он заставляет страницу двигаться, реагировать на действия пользователя, общаться с сервером.

Вот как выглядит простой JavaScript-код, который оживляет страницу. После HTML/CSS вы уже понимаете разметку — осталось добавить логику:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript — первый шаг</title>
    <style>
        body {
            font-family: system-ui, sans-serif;
            max-width: 600px;
            margin: 40px auto;
            padding: 0 20px;
            text-align: center;
        }
        button {
            background: #ea580c;
            color: white;
            border: none;
            padding: 12px 28px;
            font-size: 1.1em;
            border-radius: 8px;
            cursor: pointer;
            margin: 12px;
        }
        button:hover {
            background: #c2410c;
        }
        .counter {
            font-size: 4em;
            font-weight: 800;
            color: #fb923c;
            margin: 20px 0;
        }
    </style>
</head>
<body>

    <h1>Привет, JavaScript!</h1>
    <p id="message">Нажми на кнопку, чтобы изменить этот текст</p>
    <button onclick="changeText()">Изменить текст</button>

    <hr>

    <h2>Счётчик кликов</h2>
    <div class="counter" id="counter">0</div>
    <button onclick="increment()">+1</button>
    <button onclick="resetCounter()">Сброс</button>

    <script>
        // Функция для изменения текста
        function changeText() {
            const message = document.getElementById('message');
            const texts = [
                'Ты нажал на кнопку!',
                'JavaScript работает!',
                'Молодец, продолжай!',
                'CSS сделал красиво, JS — умно!'
            ];
            const randomIndex = Math.floor(Math.random() * texts.length);
            message.textContent = texts[randomIndex];
            message.style.color = '#22c55e';
        }

        // Счётчик
        let count = 0;

        function increment() {
            count++;
            document.getElementById('counter').textContent = count;
        }

        function resetCounter() {
            count = 0;
            document.getElementById('counter').textContent = count;
        }
    </script>

</body>
</html>

Что здесь происходит?

• document.getElementById — находим элемент на странице по его id
• textContent — меняем текст внутри элемента
• onclick — обработчик клика (встроенный, позже вы научитесь использовать addEventListener)
• Math.random() — генерируем случайное число

Это только верхушка айсберга. С помощью JavaScript вы сможете:

• Создавать выпадающие меню, аккордеоны, табы, модальные окна
• Валидировать формы перед отправкой
• Подгружать данные с сервера без перезагрузки страницы (AJAX, fetch)
• Рисовать анимации и игры с помощью Canvas
• Создавать полноценные веб-приложения

Пример современных конструкций:

// Стрелочные функции
const greet = (name) => `Привет, ${name}!`;

// Деструктуризация
const user = { name: 'Анна', age: 25 };
const { name, age } = user;

// Spread-оператор
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

// Шаблонные строки (их вы уже видели)
const message = `Пользователь ${name}, возраст: ${age}`;

// Async/await
async function loadUsers() {
    const response = await fetch('/api/users');
    const users = await response.json();
    return users;
}

React / Vue — современные фреймворки

После того как вы освоили чистый JavaScript, самое время изучить фреймворк. Это библиотека, которая упрощает создание сложных пользовательских интерфейсов.

React

React — самая популярная библиотека для создания интерфейсов. Разработана Facebook, используется на миллионах сайтов. React построен на концепции компонентов — переиспользуемых кусочков интерфейса, каждый из которых отвечает за свою часть страницы.

// Пример React-компонента
function Greeting({ name }) {
    return (
        <div className="greeting">
            <h1>Привет, {name}!</h1>
            <p>Добро пожаловать в мир React.</p>
        </div>
    );
}

// Использование
<Greeting name="Анна" />

Почему React?

• Огромное сообщество и экосистема
• Много вакансий — React знают все
• React Native — можно делать мобильные приложения
• Next.js — фреймворк на основе React для полноценных сайтов

Vue

Vue — второй по популярности фреймворк. Он проще для входа, чем React, и отлично подходит для начинающих. Разработан Эваном Ю, бывшим сотрудником Google.

<!-- Пример Vue-компонента -->
<template>
    <div class="greeting">
        <h1>Привет, {{ name }}!</h1>
        <p>Добро пожаловать в мир Vue.</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: 'Анна'
        }
    }
}
</script>

Почему Vue?

• Мягкий порог входа — можно начать прямо в HTML, добавляя Vue через CDN
• Отличная документация на русском
• Гибкость — от простых страниц до сложных SPA
• Nuxt.js — аналог Next.js для Vue

Tailwind CSS — utility-first CSS

Tailwind CSS — это не очередной фреймворк вроде Bootstrap. Это другой подход к написанию CSS: utility-first. Вместо того чтобы писать кастомные классы и долго придумывать названия, вы используете готовые утилитарные классы прямо в HTML.

Сравните подходы на примере карточки товара:

Обычный CSS:

<!-- HTML -->
<div class="product-card">
    <img class="product-image" src="phone.jpg" alt="Телефон">
    <h3 class="product-title">Смартфон XYZ</h3>
    <p class="product-price">29 990 ₽</p>
    <button class="product-btn">Купить</button>
</div>

/* CSS */
.product-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.product-image {
    width: 100%;
    border-radius: 8px;
}
.product-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #1a1a2e;
}
.product-price {
    font-size: 1.5em;
    color: #ea580c;
    font-weight: 700;
}
.product-btn {
    background: #ea580c;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

С Tailwind CSS:

<div class="bg-white rounded-xl p-4 shadow-md">
    <img class="w-full rounded-lg" src="phone.jpg" alt="Телефон">
    <h3 class="text-lg font-semibold text-gray-900 mt-3">Смартфон XYZ</h3>
    <p class="text-2xl font-bold text-orange-600 mt-1">29 990 ₽</p>
    <button class="bg-orange-600 text-white px-5 py-2 rounded-lg mt-3 hover:bg-orange-700">
        Купить
    </button>
</div>

В чём преимущества Tailwind?

• Скорость разработки — не нужно переключаться между HTML и CSS, не нужно придумывать названия классов
• Консистентность — все отступы, цвета, шрифты заданы в конфиге, нет «разнобоя»
• Маленький CSS — Tailwind вырезает неиспользуемые классы (PurgeCSS), итоговый файл минимален
• Отзывчивость — адаптив делается прямо в классах: md:flex, lg:text-2xl
• Тёмная тема — dark:bg-gray-900

Tailwind часто используют вместе с React/Vue — это стандарт современной фронтенд-разработки. Крупные компании (GitHub, Netflix, OpenAI) используют Tailwind в своих проектах.

Git — система контроля версий

Git — это инструмент, который сохраняет историю изменений вашего кода. Представьте, что вы пишете книгу, и каждое утро сохраняете новую версию. Если что-то пошло не так, вы всегда можете вернуться к любой предыдущей версии.

Git — это стандарт в разработке. Без него не работает ни один серьёзный проект. Вот базовые команды, которые нужно знать:

# Начать отслеживание проекта
git init

# Добавить файлы в «индекс»
git add index.html style.css
# Или все файлы
git add .

# Сохранить изменения (создать коммит)
git commit -m "Добавил главную страницу"

# Посмотреть историю
git log --oneline

# Посмотреть, что изменилось
git status
git diff

# Вернуться к предыдущей версии
git checkout <хеш-коммита>

# Создать новую ветку
git branch feature-header

# Переключиться на ветку
git checkout feature-header

# Слить ветку в основную
git checkout main
git merge feature-header

После локального Git вам понадобится GitHub (или GitLab, Bitbucket) — облачный сервис для хранения репозиториев. Это портфолио ваших проектов, витрина для работодателей.

Научитесь:

• Создавать репозиторий на GitHub
• Пушить (загружать) код: git push
• Пулить (скачивать) код: git pull
• Работать с pull request (PR) — как предлагать изменения в чужих проектах
• Настраивать GitHub Pages — бесплатный хостинг для статических сайтов

Как выбрать свой путь?

Веб-разработка — это не одна профессия, а целое семейство профессий. Давайте разберём основные направления, чтобы вы могли выбрать своё.

Приблизительный план обучения на 6 месяцев

Чтобы у вас был чёткий ориентир, вот примерный план, как продолжить обучение:

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

📖 JavaScript

learn.javascript.ru / JavaScript.ru

Современный учебник JavaScript. Полный курс от основ до продвинутых тем. Один из лучших русскоязычных ресурсов.

Дополнительные ресурсы по JavaScript:

• The Odin Project (theodinproject.com) — бесплатный полноценный курс fullstack-разработки
• freeCodeCamp (freecodecamp.org) — JavaScript Algorithms and Data Structures
• Codewars (codewars.com) — задачи по JavaScript для практики

⚛️ React

reactdev.ru

Русская документация React. Всё, что нужно для старта: компоненты, хуки, роутинг, состояние.

Дополнительные ресурсы:

• react-tutorial.app — интерактивный учебник React
• React Docs (Beta) — новая официальная документация (react.dev)

🎨 CSS/Tailwind

tailwindcss.com

Официальная документация Tailwind. Очень понятная, с живыми примерами.

Дополнительные ресурсы по CSS:

• CSS-Tricks (css-tricks.com) — один из лучших англоязычных блогов по CSS
• codepen.io — миллионы примеров кода, можно подсматривать и экспериментировать
• web.dev — статьи от Google по современному CSS

🗺 Roadmaps

roadmap.sh

Интерактивные дорожные карты для всех направлений: фронтенд, бэкенд, DevOps. Отмечайте пройденные темы и стройте свой путь.

Front-End Developer Handbook

Большое руководство по фронтенд-разработке: технологии, инструменты, как искать работу.

📹 YouTube-каналы на русском

• Владилен Минин — отличные курсы по React, TypeScript, Node.js
• АйТи Борода — новости из мира IT, советы по карьере
• Антон Ларичев — курс по JavaScript и React
• Тимофей Хильчук — вёрстка и фронтенд-разработка

📚 Книги для продолжения

• «Выразительный JavaScript» — Марейн Хавербеке (бесплатно на eloquentjavascript.net)
• «JavaScript для детей» — Ник Морган (да, название обманчивое, книга отличная)
• «Вы не знаете JS» — Кайл Симпсон (серия книг для глубокого понимания JS)
• «Изучаем React» — Алекс Бэнкс, Ева Порчелло

Напоследок: напутствие

Вы прошли этот курс от начала до конца. Это серьёзное достижение. Не каждый, кто начинает изучать веб-разработку, доходит до финала.

Вот что важно помнить:

• Практика важнее теории. Не пытайтесь выучить всё — начните делать. Свой проект, даже маленький — это лучший учебник.
• Ошибки — это нормально. Код не работает? Отлично, сейчас вы узнаете что-то новое. Ошибаются все — от джуниоров до тимлидов с 10-летним опытом.
• Google — ваш лучший друг. Профессиональные разработчики гуглят десятки раз в день. Не надо хранить всё в голове — надо знать, как найти ответ.
• Не сравнивайте себя с другими. Каждый проходит свой путь. Кто-то учит JS месяц, кто-то — год. Это не гонка.
• Пишите код каждый день. Хотя бы 30 минут. Регулярность важнее интенсивности.

---