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

❤️ Ранний доступ к видео и доступ к закрытому чату: https://boosty.to/friendly-frontend
🔥 Мастер-класс с Minista + JSX: https://stepik.org/a/228315

✏️ Разбираемся, как устроен мой стартовый шаблон для вёрстки на базе 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: https://www.npmjs.com/package/create-...
➖ GitHub-репозиторий Create Friendly Frontend: https://github.com/aleksanderlamkov/c...
➖ NPM-пакет friendly-frontend-lint-config: https://www.npmjs.com/package/friendl...
➖ GitHub-репозиторий Friendly Frontend Lint Config: https://www.npmjs.com/package/friendl...
➖ Документация Minista: https://minista.qranoko.jp/docs/
➖ PostCSS плагины: https://postcss.org/docs/postcss-plugins
➖ A11y Доступные секции — section и aria-labelledby:    • A11y Доступные секции — section и aria-lab...  
➖ CSS Фикс залипания hover на тач-устройствах:    • CSS Фикс залипания hover на тач-устройствах  

🧑‍💻 Основной телеграм-канал:
https://t.me/AleksanderLamkov

💬 Коммьюнити-чат в телеграме (помощь новичкам):
https://t.me/FriendlyFrontend

❤️ Boosty (поддержать автора):
https://boosty.to/friendly-frontend

🗂️ Бесплатные курсы на канале:
🟠 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), БЭМ: https://stepik.org/a/228315

📌 Автор:
➖ Личный сайт: https://aleksanderlamkov.ru/
➖ Telegram: https://t.me/AleksanderLamkov
➖ Boosty: https://boosty.to/friendly-frontend
➖ GetMentor: https://getmentor.dev/mentor/aleksand...
➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315

#frontend #фронтенд #вёрстка