Содержание пакета (2 курса)
2
курса
267
уроков
2
теста
38 ч.
1. Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop 4.84
1 547
132
1
20 ч.
Подготовка / Повторение / Первые анимации
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.
Тест для получения сертификата об окончании курса
↗
2. Курс по верстке и веб разработке сайтов с нуля! Web development 4.96
3 477
135
1
18 ч.
Введение
3 урока
1.
О чем этот курс
↗
2.
Подготовка. Скачиваем материалы. Как проходить курс
↗
3.
Оставайтесь со мной на связи.
↗
Основы HTML и CSS
10 уроков
1.
О чем этот блок
↗
2.
Создаем первый веб сайт!
↗
3.
Как работают теги HTML и стили CSS
↗
4.
Теги Head и Body. Правильная структура веб страницы
↗
5.
Как работают теги заголовка и описания, в теге head.
↗
6.
Как работает тег "контейнер' - div
↗
7.
Как работать с классами в верстке
↗
8.
Как подключить лист со стилями к файлу html
↗
9.
ПРАКТИКА: Создайте и стилизуйте несколько тегов div
↗
10.
Пример преподавателя. "Практика: создайте и стилизуйте несколько
↗
Мини-курс по ChatGPT для обучения и работы (Опционально)
12 уроков
1.
Обзор нейросетей
↗
2.
Лучшие модели искусственного интеллекта на сегодня
↗
3.
Как оплатить подписку на Chat GPT
↗
4.
Обзор тарифов Chat GPT
↗
5.
Программа Chat GPT на разные операционные системы
↗
6.
Используем Chat GPT для обучения
↗
7.
Используем Chat GPT для программирования
↗
8.
Где еще полезен Chat GPT
↗
9.
Как показывать экран чату GPT
↗
10.
Генерация изображений с помощью Chat GPT и не только
↗
11.
Advanced Voice mode в Chat GPT
↗
12.
Как работает Copilot от GitHub
↗
Погружение в HTML и CSS
35 уроков
1.
О чем этот блок
↗
2.
Классификация сайтов
↗
3.
Правильная структура файлов и папок проекта
↗
4.
Как использовать плагины VS Code
↗
5.
Если у вас не работает плагин Go Live
↗
6.
Как работают семантические теги
↗
7.
Как работать с цветом в верстке
↗
8.
Как добавить изображение на сайт через тег IMG
↗
9.
Как работает консоль разработчика в браузере
↗
10.
Как создать меню и ссылки
↗
11.
Теги списков UL и OL
↗
12.
Как задавать отступы элементам с помощью margin и padding.
↗
13.
Как работают блочные и строчные элементы
↗
14.
Что такое "Cхлопывание margin"
↗
15.
Правильная организация отступов в верстке ч.1
↗
16.
Как использовать "Псевдоклассы"
↗
17.
Правильная организация отступов в верстке ч.2
↗
18.
Как быстро сбросить кеш вашего браузера
↗
19.
Как добавить изображение используя свойство background-image
↗
20.
Позиционирование элементов на веб странице
↗
21.
Как работает z-index
↗
22.
Как добавить градиентную заливку через CSS
↗
23.
Выравнивание элементов по горизонтали
↗
24.
Box-sizing. Отступы внутри размера элемента.
↗
25.
Единицы измерения CSS
↗
26.
Селекторы CSS
↗
27.
Тег span
↗
28.
Can i use
↗
29.
Normalize.css и Reset.css - Сброс стилей браузера
↗
30.
Как добавить интерактивную карту на сайт
↗
31.
Тег HR или как отрисовать линию
↗
32.
Как использовать разные шрифты на сайте
↗
33.
Как устанавливать шрифты на компьютер
↗
34.
Загружаем сайт на реальный хостинг. Выбор и настройка домена.
↗
35.
Как редактировать сайт загруженный на хостинг, через VS Code
↗
Работа в Figma. Мини курс Figma free.
30 уроков
1.
О чем этот блок
↗
2.
Об обновлении интерфейса Figma
↗
3.
О чем мини курс?
↗
4.
Подготовка. Скачиваем материалы
↗
5.
Какой размер у сайта?
↗
6.
Как сохранить свой проект
↗
7.
Как работать с сетками и направляющими
↗
8.
Бриф с заказчиком.
↗
9.
Mood board и поиск вдохновения
↗
10.
Создаем wireframe проекта
↗
11.
Стоковые площадки. Где найти идеальное фото?
↗
12.
Как работать с изображениями в figma
↗
13.
Иерархия элементов в figma
↗
14.
Как работать с цветом в figma
↗
15.
Разница UX и UI
↗
16.
Как создавать текст в figma
↗
17.
Линии и обводка фигур
↗
18.
Как группировать элементы
↗
19.
Поиск и установка новых шрифтов
↗
20.
Как работать с иконками
↗
21.
Как работать с градиентом
↗
22.
Как работатет инструмент subtract
↗
23.
Стоковая площадка по иконкам. Поиск иконок
↗
24.
Как работать с масками слоя
↗
25.
Как использовать рыбный текст в figma
↗
26.
Как добавлять эффекты к элементам
↗
27.
Экспорт из figma и передача в разработку
↗
28.
Обновление 2023.Где вкладка inspect?!
↗
29.
Dev mode стал платным
↗
30.
Поздравляю с завершением мини курса!
↗
Продвинутая верстка SASS / БЭМ / FlexBox
18 уроков
1.
О чем этот блок
↗
2.
Препроцессор SASS ч.1
↗
3.
Препроцессор SASS ч.2
↗
4.
Как решать ошибки
↗
5.
FlexBox. Новый способ позиционирования элементов.
↗
6.
Методология БЭМ и как ее использовать
↗
7.
Используем FlexBox и БЭМ в новом проекте
↗
8.
Как превратить растровый логотип в векторный с помощью Illustrat
↗
9.
Закругление / Поворот / Тени для элементов
↗
10.
Что такое иконочные шрифты
↗
11.
Создаем первую кнопку
↗
12.
Используем модификатор БЭМ. Новое свойство overflow
↗
13.
Min/Max - Height/Width
↗
14.
Практика. Создаем вторую секцию сайта
↗
15.
Практика. Создаем третью секцию сайта
↗
16.
Практика. Создаем footer сайта
↗
17.
Добавляем якорные ссылки на навигационное меню
↗
18.
Что такое fav-icons, и как их установить в свой проект
↗
Адаптивная верстка
12 уроков
1.
О чем этот блок
↗
2.
Какие существуют типы верстки
↗
3.
Как работает мета тег viewport
↗
4.
Под какие размеры нужно адаптировать сайт
↗
5.
Адаптация под планшетную версию ч.1
↗
6.
Практика: Адаптируйте сайт под следующую версию.
↗
7.
Пример преподавателя. Адаптация следующей версии под планшет
↗
8.
Как работают единицы измерения EM/REM VH/VW
↗
9.
Свойство transition. Создаем гамбургер для мобильной версии сайт
↗
10.
Создаем гамбургер для мобильной версии сайта ч.2
↗
11.
Знакомство с JS. Создаем гамбургер для мобильной версии сайта ч.
↗
12.
Speed test готового сайта
↗
Библиотека bootstrap
13 уроков
1.
О чем этот блок
↗
2.
Что такое bootstrap
↗
3.
Как подключить bootstrap в свой проект
↗
4.
Какие настройки содержит в себе bootstrap
↗
5.
Как задавать свои стили в bootstrap
↗
6.
Свойство Object-fit и как создать слайдер в bootstrap
↗
7.
Как модифицировать слайдер в bootstrap
↗
8.
Как менять цвета в bootstrap
↗
9.
Как изменить скорость слайдера в bootstrap
↗
10.
Типичные ошибки и проблемы с работой в bootstrap
↗
11.
Как менять компоненты bootstrap. Меняем иконки на слайдере
↗
12.
Система сеток bootstrap. Bootstrap-grid
↗
13.
Как решать задачи возникающие в процессе верстки
↗
До новых встреч!
1 урок
1.
Прощальное слово
↗
Получите ваш сертификат
1 урок
1.
Тест для получения сертификата об окончании курса
↗