Мой стартовый шаблон для вёрстки: Minista + JSX + Vite — без Gulp и Webpack

❤️ Ранний доступ к видео и доступ к закрытому чату:
🔥 Мастер-класс с Minista + JSX:
✏️ Разбираемся, как устроен мой стартовый шаблон для вёрстки на базе Minista и Vite. Устанавливаем сборку через npm create, выбираем JS или TypeScript, изучаем структуру проекта и все ключевые конфиги. Объясняю логику организации src/, показываю каждый компонент из pages, layouts, sections и components. Рассказываю, как работают встроенные в Minista компоненты Head, Image, Icon. Показываю, как подключаются фавиконки, скрипты, шрифты, глобальные стили. Обсуждаем Sass-хелперы, миксины, утилиты и PostCSS-плагины, которые автоматизируют рутину и ускоряют разработку. 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:47 | Установка стартового шаблона ▶ 02:28 | Обзор README.md — документация стартового шаблона ▶ 03:11 | Обзор package.json — зависимости и скрипты ▶ 09:08 | Обзор .gitignore — игнорируемые гитом файлы и папки ▶ 09:37 | Обзор minista.config.js и jsconfig.json — алиасы, оптимизация картинок, SVG-спрайты, CSS-модули, настройки Sass, конфигурация Vite ▶ 12:22 | Обзор postcss.config.js — параметры PostCSS и плагинов ▶ 13:56 | Линтеры и форматтер — ESLint, Stylelint, Prettier ▶ 16:50 | Структура src: папка assets ▶ 18:08 | Структура src: папка pages. Роутинг по страницам (маршрутизация) ▶ 19:33 | Страница 404 ▶ 22:39 | Файл global.jsx. Компонент Head (Minista). Подключение скриптов. Подключение фавиконок ▶ 23:35 | Базовая структура компонента. Компонент layouts/Footer ▶ 24:55 | Компонент layouts/Section ▶ 26:26 | Компонент layouts/Header ▶ 28:22 | Компоненты sections/About и sections/Hero ▶ 30:05 | Папка components: компонент Field ▶ 34:50 | Компонент Logo. Работа со статичными изображениями. Папка public ▶ 36:37 | Как работать с изображениями. Компонент Image (Minista) ▶ 38:50 | Компонент Button ▶ 40:28 | Компонент BurgerButton ▶ 41:25 | Компонент Icon (MinistaIcon). Работа с SVG-иконками через спрайты ▶ 45:00 | Папка styles и styles/helpers — общие стили ▶ 51:13 | Папка utils — утилитарные функции ▶ 52:22 | Папка constants — JavaScript-константы ▶ 53:08 | Папка modules — JS-модули OverlayMenu, InputMaskCollection, файл main.js ▶ 54:35 | Заключение 📚 Ссылки из видео: ➖ NPM-пакет create-friendly-frontend:
➖ GitHub-репозиторий Create Friendly Frontend:
➖ NPM-пакет friendly-frontend-lint-config:
➖ GitHub-репозиторий Friendly Frontend Lint Config:
➖ Документация Minista:
➖ PostCSS плагины:
➖ A11y Доступные секции — section и aria-labelledby:    • A11y Доступные секции — section и aria-lab...   ➖ CSS Фикс залипания hover на тач-устройствах:    • CSS Фикс залипания hover на тач-устройствах   🧑‍💻 Основной телеграм-канал:
💬 Коммьюнити-чат в телеграме (помощь новичкам):
❤️ Boosty (поддержать автора):
🗂️ Бесплатные курсы на канале: 🟠 HTML:    • HTML курс 2025   🔵 CSS:    • CSS курс 2025   🟡 JS:    • JavaScript курс 2025   🟢 A11y:    • Accessibility курс 2025   🗺 Frontend Roadmap:    • Frontend Roadmap 2024 | Что должен учить ф...   ⚪️ Мастер-класс по верстке для новичков:    • Адаптивная верстка сайта с нуля для начина...   🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS):    • Вёрстка сайта с 0 до результата | HTML, БЭ...   ⚫️ Мастер-класс по верстке с практикой по JavaScript:    • Вёрстка сайта с нуля • HTML, SCSS, JS прак...   🔴 Мастер-класс по верстке на стеке JSX, SCSS, JS, Vite, Minista (SSG), БЭМ:
📌 Автор: ➖ Личный сайт:
➖ Telegram:
➖ Boosty:
➖ GetMentor:
➖ Stepik (платные курсы и мастер-классы):
#frontend #фронтенд #вёрстка