Курс Frontend Developer с нуля:
современная верстка и
основы веб-разработки

МОДУЛЬ 1: Основы веб-разработки: HTML, CSS, BEM.

1. Введение. Что такое HTML, CSS и JavaScript. Правила оформления кода. Первый кодинг.

2. Блочные и строчные элементы. Инструменты разработчика (dev tools). Блочная модель. Методы подключения CSS. Основы CSS: первые шаги в стилизации.

3. Работа с FTP, создание рабочего пространства, работа с файлами. Формирование URL для подключения файлов.

4. Практическая верстка. Свойство box-sizing. Свойство display: inline-block. Класснейминг и пространство имен. Понятие кроссбраузерности. Reset.css

5. Подключение шрифтов. Знакомство с сервисом Google Fonts. Безопасные и вариативные шрифты. Формирование относительных путей для подключения файлов проекта. Импорт стилей. Расширение структуры проекта.

6. Знакомство с искусственным интеллектом: Grok, ChatGPT, DeepSeek. Роль AI и его использование в разработке. HTML-таблицы и их верстка. Создание навигации. Единицы измерения: px, em, rem, vh, vw. Переход проекта на использование em и rem.

7. Цвет в CSS. Специфика стилей. Использование CSS-селекторов.

8. Flexbox layout. Основы гибкой верстки.

9. CSS псевдоклассы :first-child, :last-child, :nth-child. CSS свойство z-index.

10. Свойство position и его значения static, relative, absolute, fixed, sticky.

11. Псевдоэлементы ::before и ::after.

12. Верстка блока «хронология событий». Отработка нестандартных бордеров в блоках. Верстка блока «Цитата».

13. Методология BEM: блок, элемент, модификатор, миксы. Функция calc(). CSS-переменные. Конструктор иконок. Конструктор кнопок. CSS псевдоклассы :hover, :active, :focus. Использование переменных css.

14. Работа с формами: <input>, <textarea> и <select>

15. Конструктор форм. Стилизация чекбоксов, радиокнопок и инпутов для загрузки файлов.

16. Старт проекта. Знакомство с Node.js, npm, Vite.js, SCSS и Handlebars. Работа с Vite.js, изучение SCSS и Handlebars. Закрепление пройденного материала методологии BEM. Верстка проекта.

МОДУЛЬ 2: Динамический веб и адаптивная верстка

1. CSS-анимации: свойство transform, правило @keyframes и CSS animation. Анимация блоков. Использование AI для анимации (Grok, ChatGPT, DeepSeek).

2. Разработка покадровой анимации с помощью свойства steps(). Изучение структуры SVG-разметки: базовые и сложные элементы, атрибуты и оптимизация.

3. Современные инструменты веб-анимации: библиотеки AOS.js, GSAP и интеграция JSON-анимаций через Lottie.

4. Динамические SVG-элементы и анимация с использованием anime.js

5. Адаптивная верстка и медиазапросы: Mobile First и Desktop First.

6. Работа с макетами в Figma. Практическая работа с адаптивной версткой.

МОДУЛЬ 3: Фронтенд в действии: от макета к проекту.

1. Vite.js. Знакомство с фреймворком Tailwind CSS и его основными принципами.

2. Работа с Tailwind CSS. Tailwind CSS в проекте. Закрепление навыков на практике.

3. Vite.js. Знакомство с Git. Создание проекта на Git. Старт проекта.

4. Работа над проектом. Git и публикация проектов на GitHub Pages. SVG-спрайты. Старт работы с JavaScript. Переменные: let, const, var, использование console.log.

5. Git – работа с ветками: создание и переключение. Плагин NiceSelect2. Типы данных в JavaScript: string, number, boolean, null, undefined, object, array. Оператор typeof.

6. Git–merge веток и работа с ними. Библиотека Tasty CSS-animated Hamburgers для бургер-меню. Операторы сравнения и условные конструкции в JavaScript: if/else, switch.

7. Работа над проектом.

8. Поиск работы и подготовка к трудоустройству