Содержание курса
9
разделов
132
урока
1
тест
20 ч.
обн. 17 мая 2026
Подготовка / Повторение / Первые анимации
13 уроков
1.
Привет!) Скачиваем материалы к курсу
↗
2.
Оставайтесь со мной на связи!
↗
3.
Устанавливаем и настраиваем необходимое программное обеспечение
↗
4.
Новое свойство clip-path. Начинаем создавать первую секцию сайта
↗
5.
Если у вас не работает scout-app
↗
6.
Практика: Создайте свою фигуру с помощью Clip-path
↗
7.
Выравнивание элементов по вертикали абсолютным позиционированием
↗
8.
Знакомство с @KeyFrames. Создаем первую анимацию.
↗
9.
Backface-visibility и создание кнопок через псевдо-классы
↗
10.
Анимируем кнопку с помощью псевдо-элементов
↗
11.
Animation-fill-mode. Запуск анимации из определенной точки.
↗
12.
3 принципа веб разработки
↗
13.
Используйте REM вместо PX
↗
Git и GitHub
42 урока
1.
О чем этот блок
↗
2.
Базовые команды в терминале
↗
3.
Как редактировать файлы через терминал
↗
4.
Устанавливаем систему git на наш компьютер
↗
5.
Как запустить гит в определенном проекте
↗
6.
Создаем первый коммит
↗
7.
Отправка проекта GitHub
↗
8.
Если у вас ошибка при отправке вашего проекта на GitHub
↗
9.
Ошибка с логином при попытке отправить проект на GitHub
↗
10.
Практика: создайте собственный репозиторий
↗
11.
Как удалить репозиторий GitHub
↗
12.
Как скачивать репозитории из GitHub
↗
13.
Эмулируем работу 2-х разработчиков на одном репозитории
↗
14.
Как вывести информацию о коммитах в терминал. Git log
↗
15.
Что такое ветки
↗
16.
Как создавать ветки и перемещаться по ним.
↗
17.
Закрываем пробел из начала мини курса с обозначениями -u и -M
↗
18.
Ошибка не сохраненного коммита при checkout
↗
19.
Как перекинуть созданные изменения на новую ветку
↗
20.
Как перекинуть несколько коммитов на новую ветку
↗
21.
Что такое состояние открепленной головы. Detached HEAD
↗
22.
Как восстановить конкретный файл из прошлого коммита
↗
23.
Продвинутый git log и git show
↗
24.
Как объединять ветки с помощью Git merge. Способ Fast-forward
↗
25.
Как удалять ветки
↗
26.
Как удалить файлы директории из состояния untracked
↗
27.
Git reset --hard. Способ жесткого отката к коммиту
↗
28.
Второй способ найти подвисший коммит с помощью ORIG_HEAD
↗
29.
Git reset --soft
↗
30.
Git commit --amend изменение комментария прошлого коммита
↗
31.
Git reset --mixed
↗
32.
Разница git reset и git restore
↗
33.
Введение в git diff. Вывод разницы нескольких коммитов в консоль
↗
34.
Практический пример применения git diff
↗
35.
Как вывести схему веток в терминал. Git log --graph
↗
36.
Объединяем ветки с помощью git merge. Способ "Истинное слияние"
↗
37.
Как откатиться назад после слияния
↗
38.
Как скопировать определенный коммит с помощью git cherry-pick
↗
39.
Слияние веток с помощью git rebase
↗
40.
Что лучше git rebase или git merge
↗
41.
Как использовать файл .gitignore
↗
42.
Заключительное слово
↗
Продвинутая верстка - CSS/SASS
27 уроков
1.
О чем этот блок
↗
2.
Как работают SASS переменные
↗
3.
Как работают миксины
↗
4.
Как добавлять аргументы для миксинов
↗
5.
Что такое шаблоны SASS
↗
6.
Как работают SASS функции
↗
7.
Организация файлов SASS большого проекта
↗
8.
3 способа позиционирования элементов
↗
9.
Как работает float
↗
10.
Создаем собственную систему grid
↗
11.
Применение градиента к тексту. Backgroud-clip
↗
12.
Как создавать символы с помощью HTML
↗
13.
Анимируем и доделываем вторую секцию
↗
14.
Как создавать собственные иконочные шрифты
↗
15.
Используем свойство perspective для отражения перспективы элемен
↗
16.
Как работает blending mode в CSS
↗
17.
Доделываем секцию с карточками
↗
18.
Как закруглить текст с помощью свойства shape-outside
↗
19.
Как работают CSS фильтры
↗
20.
Как добавить видео на страницу
↗
21.
Знакомимся с тегом form и его содержимым
↗
22.
Анимируем форму
↗
23.
Делаем собственные radio button с помощью CSS
↗
24.
Создаем footer сайта
↗
25.
Создаем навигационное меню на чистом CSS ч.-1
↗
26.
Настраиваем переходы скорости анимаций, с помощью cubic-bezier
↗
27.
Анимируем гамбургер
↗
Adaptive design
11 уроков
1.
О чем этот блок
↗
2.
Как создают адаптивные сайты
↗
3.
Создаем миксин с медиа правилами
↗
4.
Адаптация проекта ч.1
↗
5.
Адаптация проекта ч.2
↗
6.
Адаптация проекта ч.3
↗
7.
Что такое адаптивные изображения
↗
8.
Как адаптировать изображения в HTML
↗
9.
Адаптируем HTML изображения в нашем проекте
↗
10.
Адаптация CSS изображений
↗
11.
Несколько финальных правок сайта
↗
Node package manager
6 уроков
1.
О чем этот блок
↗
2.
Что такое node.js и npm
↗
3.
Готовим к использованию первый npm пакет
↗
4.
Запускаем первый npm пакет
↗
5.
Используем gulp в нашем проекте
↗
6.
Как открыть сайт на мобильном телефоне
↗
Введение в CSS GRID
16 уроков
1.
О чем этот блок
↗
2.
Подготовка
↗
3.
Как создать шаблон сетки. Grid template
↗
4.
Как работают единицы измерения fr
↗
5.
Как переместить элемент в другую ячейку
↗
6.
Размещение нескольких элементов в одной ячейки
↗
7.
Практика: Создайте layout сайта
↗
8.
Пример преподавателя. Создаем layout
↗
9.
Как переименовать каждую линию в сетке grid
↗
10.
Как создать шаблон сетки с помощью схемы имен
↗
11.
Что такое явные и не явные гриды
↗
12.
Как выравнивать элементы внутри ячеек
↗
13.
Как выравнивать сетку внутри контейнера
↗
14.
Min-Max content
↗
15.
Auto-fill и Auto-fit. Размеры ячеек исходя из контента
↗
16.
Заключение. Grid garden
↗
GRID CSS Project
15 уроков
1.
О чем этот блок
↗
2.
Подготовка
↗
3.
Создаем шаблон grid сетки ч.1
↗
4.
Создаем шаблон grid сетки ч.2
↗
5.
Как работают SVG спрайты
↗
6.
Доделываем вторую секцию сайта
↗
7.
Создаем секцию "Баннер" ч.1
↗
8.
Создаем секцию "Баннер" ч.2
↗
9.
Создаем секцию с карточками
↗
10.
Создаем галерею
↗
11.
Создаем footer
↗
12.
Делаем "Гамбургер"
↗
13.
Создаем header ч.1
↗
14.
Создаем header ч.2
↗
15.
Адаптируем сайт
↗
До новых встреч!
1 урок
1.
До свидания!
↗
Получите ваш сертификат
1 урок
1.
Тест для получения сертификата об окончании курса
↗