Мой стартовый шаблон для вёрстки: Minista + JSX + Vite — без Gulp и Webpack
❤️ Ранний доступ к видео и доступ к закрытому чату: https://boosty.to/friendlyfrontend 🔥 Мастер-класс на стеке из видео: 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-friendly-frontend ➖ GitHub-репозиторий Create Friendly Frontend: https://github.com/aleksanderlamkov/create-friendly-frontend ➖ NPM-пакет friendly-frontend-lint-config: https://www.npmjs.com/package/friendly-frontend-lint-config ➖ GitHub-репозиторий Friendly Frontend Lint Config: https://www.npmjs.com/package/friendly-frontend-lint-config ➖ Документация Minista: https://minista.qranoko.jp/docs/ ➖ PostCSS плагины: https://postcss.org/docs/postcss-plugins ➖ A11y Доступные секции — section и aria-labelledby: https://www.youtube.com/shorts/uaadbgQuTSE ➖ CSS Фикс залипания hover на тач-устройствах: https://www.youtube.com/shorts/1sn_EDSOfJ0 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend ❤️ Boosty (поддержать автора): https://boosty.to/friendly-frontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #вёрстка
❤️ Ранний доступ к видео и доступ к закрытому чату: https://boosty.to/friendlyfrontend 🔥 Мастер-класс на стеке из видео: 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-friendly-frontend ➖ GitHub-репозиторий Create Friendly Frontend: https://github.com/aleksanderlamkov/create-friendly-frontend ➖ NPM-пакет friendly-frontend-lint-config: https://www.npmjs.com/package/friendly-frontend-lint-config ➖ GitHub-репозиторий Friendly Frontend Lint Config: https://www.npmjs.com/package/friendly-frontend-lint-config ➖ Документация Minista: https://minista.qranoko.jp/docs/ ➖ PostCSS плагины: https://postcss.org/docs/postcss-plugins ➖ A11y Доступные секции — section и aria-labelledby: https://www.youtube.com/shorts/uaadbgQuTSE ➖ CSS Фикс залипания hover на тач-устройствах: https://www.youtube.com/shorts/1sn_EDSOfJ0 🧑💻 Основной телеграм-канал: https://t.me/AleksanderLamkov 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend ❤️ Boosty (поддержать автора): https://boosty.to/friendly-frontend 🗂️ Бесплатные курсы на канале: 🟠 HTML: https://youtube.com/playlist?list=PL0MUAHwery4ot0KmgGxlBSB7rXssLeA6h 🔵 CSS: https://youtube.com/playlist?list=PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz 🟡 JS: https://www.youtube.com/playlist?list=PL0MUAHwery4qn4Y27iUxmzC-JiauX7vSL 🟢 A11y: https://youtube.com/playlist?list=PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV 🗺 Frontend Roadmap: https://youtu.be/1WRJKgwlX9w ⚪️ Мастер-класс по верстке для новичков: https://www.youtube.com/playlist?list=PL0MUAHwery4rqkzKF1mDBCIH_eZgjY6uN 🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): https://www.youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3 ⚫️ Мастер-класс по верстке с практикой по JavaScript: https://youtu.be/hkYzqTKnSIg 🔴 Мастер-класс по верстке на стеке 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/aleksandr-lamkov-1480 ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #вёрстка