HTML — это не “набор тегов”, а описание смысла документа. Семантика — это контракт между вами и браузером.

Используйте: -<header>, <main>, <section>, <article>, <footer>, <button>. Не используйте <div> там, где есть семантический элемент. Кнопка должна быть <button>, а не <div> с обработчиком клика — иначе вы ломаете доступность и поведение по умолчанию.

Где учить:

• MDN Web Docs (HTML)
• HTML Academy (бесплатные тренажёры)

Что нужно понимать:

— как строится DOM;
— как работают формы ;
— базовые принципы доступности.

CSS — это управление моделью раскладки. В современном фронтенде обязательны:

• Flexbox — одномерные раскладки;
• Grid — двумерные сетки.

‼️ Float — устаревший подход для layout.

Принцип: Mobile First. Сначала корректная работа на 375px, потом масштабирование вверх через media queries.

📎 Где учить:

• Flexbox Frogg
• Grid Garden
• CSS-Tricks Flexbox Guide

Что нужно понимать:

— как работает поток документа;
— как рассчитываются размеры;
— как поведение меняется при сужении экрана.

JavaScript — единственный язык, который исполняется в браузере(‼️). Без него сайт — статический документ.

До фреймворков необходимо уверенно владеть Vanilla JS.

База:

— DOM API (поиск, изменение, удаление элементов);
— События и всплытие;
— event.preventDefault();
— let / const (без var);
— === вместо ==;
— null и undefined;
— стрелочные функции;
— Fetch API и работа с JSON.

Где учить:

• Learn JavaScript (Илья Кантор)
• Codewars (8–7 kyu для набивки синтаксиса)

Если вы не понимаете DOM, фреймворки будут магией. Магия не масштабируется.

Сделайте Landing Page без библиотек:

— семантическая структура;
— адаптивность;
— бургер-меню;
— модальное окно с формой;
— отправка без перезагрузки (console.log, очистка, закрытие);
— переключение темы с сохранением в localStorage.

Без Bootstrap, Tailwind и UI-китов. Нужно понимать платформу, а не только инструменты.

Ваша цель — понять, как язык работает под капотом и выучить современные стандарты (ES6+).

📌 Что нужно знать железобетонно:

• Разница между var, let, const (и почему var нужно забыть).
• Reference vs Value types (почему {} === {} возвращает false).
• Методы массивов: map, filter, reduce (вы будете использовать их каждый день).
• Асинхронность: Promises, async/await и как работает Event Loop (это спросят на 100% собеседований).

📚 Где учить:

1. Learn.javascript.ru
Библия. Никакие видеокурсы не заменят этот учебник.
Пройдите разделы 1 (Язык) и 2 (Браузер).
2. Roadmap.sh / JavaScript
Лучший визуальный Roadmap.
Идите по желтым блокам сверху вниз.
3. JavaScript30
Бесплатный курс от Wes Bos.
30 дней — 30 маленьких проектов на чистом JS без библиотек. Идеально для набивания руки.

Когда вы можете написать простую логику на JS и отправить fetch-запрос без гугла — пора добавлять типизацию. TypeScript решает одну главную задачу: он ловит ошибки до того, как вы запустите код. Вы перестанете получать "Cannot read property 'x' of undefined" в продакшене.

📌 Что учить в TS:

• Базовые типы (string, number, boolean, массивы).
• Interfaces и Types (и в чем между ними разница).
• Union-типы (string | number) и Literal-типы.
• Generics (Дженерики): <T>.
Самая сложная, но самая важная часть TS для переиспользуемого кода.
• Utility Types: Partial, Omit, Pick, Record.

📚 Где учить:

1. Официальный Handbook
Документация TS написана невероятно круто и понятно. Начинайте с раздела "The Basics".
2. Total TypeScript
Мэтт Покок (Matt Pocock) считается одним из лучших преподавателей по TS. Его бесплатный базовый курс обязателен к прохождению.
3. Type Challenges
Когда освоите базу — идите сюда. Это LeetCode, но только для для TypeScript. Решайте задачи уровня Warm-up и Easy. Классный тренажер, сам такое делал.

Лучший способ перейти на TS — взять свой старый проект на чистом JS и переписать его на TypeScript.

Пошагово:

1. Добавьте в проект файл tsconfig.json.
2. Включите "strict": true (обязательно!).
TS без строгого режима — это деньги на ветер.
3. Измените расширения файлов с .js на .ts.
4. Весь ваш редактор (VS Code) загорится красным.
5. Начинайте методично описывать интерфейсы для ваших данных, пропсов и ответов от API, пока краснота не исчезнет.

Еще раз по терминологии. Git - это страховка которая нужна в первую очередь тебе самому (!). GitHub (или GitLab, чаще встречается в коммерции, ибо можно поднять его на своем сервере) - это социальная сеть для кода. Если вашего кода нет в репозитории - его "не существует".

Кстати, недавно выяснил, что существуют некие GUI-клиенты (кнопки в редакторе) для работы с git. Это настолько лажа, что я их называть тут даже не буду - не смотрите туда. Важно понимать как оно все работает, а не просто кнопки нажимать. Учимся работать руками, в терминале. Поэтому, коротко выделю основное:

Три состояния файла:

- Modified
Вы изменили файл, но Git еще не следит за этим изменением.
- Staged (Index)
Вы сказали Git: «Я хочу включить это изменение в следующий снимок».
Команда: git add
- Committed
Снимок сделан и сохранен в истории.
Команда: git commit

Основные команды, нужно знать:

- "git status" - вводите её каждые 5 минут. Она показывает, где вы и что происходит.
- "git add ." - добавить всё (лучше добавлять файлы поштучно).
- "git commit -m "feat: added header"" - зафиксировать изменения.
- "git push origin main" - отправить на сервер.
- "git pull" - забрать чужие изменения.

В нормальных конторах в ветку main (или master) никто напрямую не пишет. Там всегда рабочий production-код. Поэтому наш рабочий процесс следующий:

1) Создать ветку под задачу: "git checkout -b feature/login-form"
2) Написать код и закоммитить.
3) Отправить ветку: "git push -u origin feature/login-form"
4) Создать Pull Request.
5) Провести Code Review и выполнить Merge.

Где учить:

- Learn Git Branching - визуальный тур, покажет, как команды работают "под капотом";
- Atlassian Git Tutorial - отличный справочник с картинками, объясняющий сложные вещи (rebase, cherry-pick) простым языком.

3. .gitignore и node_modules

Ошибка №1 - залить node_modules в Git. Это норм (пока учитесь, не шарите), но так делать не нужно. Поэтому всегда, ВСЕГДА в корне проекта создаём файл .gitignore:

node_modules/
.env
.DS_Store
dist/

Если в репозитории есть node_modules - это ужас. Также, как и .env, с вашими токенами/ключами, credentials.

Не пишите в коммитах: "fix", "update" и не дай боже "asd". Даже для своих, а то получите плохую привычку. Используйте стандарт:

- feat: новая фича;
- fix: исправление бага;
- refactor: переписан код без изменения функционала;
- docs: обновлена документация.

Берем нашу "Визитку" из первого этапа и превращаем её в репозиторий. Ваше ТЗ:

1) Инициализация:
- Создать репозиторий на GitHub.
- Связать локальную папку:
- git init
- git remote add origin <url>
2) Игнор:
- Создать .gitignore и исключить системные файлы.
3) Ветки:
- Создать develop от main.
- Создать feature/add-animation от develop.
4) Изменения:
- В ветке feature добавить простую CSS-анимацию.
- Закоммитить изменения.
5) Финал:
- Создать Pull Request из feature/add-animation в develop.
- Провести self-review.
- Написать комментарий "Looks good".
- Смерджить ветку.

Go - язык маленький. Спецификацию можно прочитать за вечер. Но писать на нем нужно правильно. И так, что учить:

1) Типы и переменные
Строгая типизация. "var", "const", ":=". Понимать, когда использовать явное объявление, а когда короткую форму.
2) Структуры (Structs) вместо классов. В Go нет ООП в привычном понимании. Есть структуры и методы. Композиция вместо наследования.
3) Интерфейсы (interfaces). Реализуются неявно. Если структура имеет нужный метод - она реализует интерфейс. Никакого ключевого слова implements. Если «крякает как утка» - значит утка.

Обязательно понять:

• Pointers (указатели) . Не бойтесь * и &. В Go указатели безопасные и простые. Нужно понимать разницу между Value Receiver и Pointer Receiver. Когда метод изменяет структуру - используйте pointer receiver.
• Error Handling . Тот самый "if err != nil". В Go ошибки - это значения, а не исключения. Ошибки возвращаются из функций и обрабатываются явно.

🔖 Ресурсы (cтартуем тут!):

- A Tour of Go. Официальный интерактивный тур. Пройти от начала до конца. Это база.
- Go by Example - лучшая шпаргалка. Забыли, как работает switch или map? Вам сюда.
- Effective Go - ОБЯЗАТЕЛЬНО к прочтению после "Тура". Объясняет, как писать идиоматичный код (форматирование, нейминг).

То, ради чего Go и придумали. Что учить:

1) Goroutines (горутины): это не потоки ОС. Это легкие «зеленые» потоки. Вы можете запустить их миллион на ноутбуке.
2) Channels (каналы): способ общения между горутинами. "Don't communicate by sharing memory; share memory by communicating".
3) Sync Package: WaitGroup, Mutex. Знать, когда использовать каналы, а когда - мьютексы.
4) Context: как правильно отменять операции и передавать дедлайны.

🔖 Ресурсы (по этому разделу):

- The Go Programming Language - книжка, библия "ГОев" 😌 . Ссылки на пиратки не даю, ибо не поддерживаю. Ищите сами.
- Concurrency in Go (Katherine Cox-Buday) - прям для выхода на уровень "профи".

В Go «все идет в комплекте», это вам не Python, где все нужно устанавливать из вне. Вам не нужны фреймворки для старта (нормального), как в JS. Что учить в итоге:

1) net/http: напишите веб-сервер на чистой стандартной библиотеке. Это прочищает мозги после Express/Django (я этого делать не буду, но вам, если знакомились с Питоном - маст хев, бразерс (энд, пробабли, систерс)).
2) JSON: encoding/json, теги структур (json:"name").
3) Go Modules: go mod init, go mod tidy. Как управлять зависимостями.
4) Testing: в Go тесты встроены (_test.go). Научитесь писать Unit-тесты и Table-Driven Tests.

🔖 Ресурсы (по этому разделу):

- Learn Go with Tests - топ тема, вы учите язык через TDD (Test Driven Development). Бесплатно!
- Gophercises - курс от Jon Calhoun. Вы пишете реальные утилиты: парсер HTML, викторину, CLI-тулзы. Бесплатно и невероятно полезно.

Не пишите сразу микросервисы. Начните с утилит. Go идеален для CLI (инструментов командной строки). Поэтому вот вам квест: "Concurrent URL Checker". Напишите CLI-утилиту, которая:

- Читает список сайтов из файла (100+ штук).
- Проверяет каждый сайт (отвечает ли он 200 OK).
- Делает это конкурентно (используя воркеры и каналы), чтобы проверка 100 сайтов занимала секунды, а не минуты.
- Выводит результаты в красивую табличку в терминале.

1. Топ-инструменты:
- GitHub Copilot Pro: бесплатный ИИ-помощник для кода в VS Code, JetBrains и других IDE;
- JetBrains All Products Pack: полный набор IDE (IntelliJ, PyCharm, WebStorm) на год с продлением - идеально для профессиональной разработки;
- DigitalOcean кредиты ($200+): хостинг для проектов без затрат, плюс MongoDB Atlas для БД.

2. Облако и инфраструктура:
- Microsoft Azure кредиты: полный доступ к облаку без карты - для приложений и ML;
- GitHub Pro/Codespaces: неограниченные приватные репозитории, Actions (3000 мин/мес) и Codespaces бесплатно.

3. Обучение и продуктивность:
- Educative/Frontend Masters: курсы по JS, системному дизайну (6+ месяцев);
- Namecheap .me домен + SSL: бесплатно на год для личного бренда.

Полный список (100+) смотрите на https://education.github.com/pack после верификации - там теги по категориям.