Содержание пакета (2 курса)
1. Курс по верстке и веб разработке сайтов с нуля! Web development 4.96
Введение
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.
Тест для получения сертификата об окончании курса
↗
2. Полный курс по JavaScript - С нуля до результата! 4.97
Подготовка
3 урока
1.
Как проходить курс. Скачиваем материалы
↗
2.
Устанавливаем необходимое ПО
↗
3.
Оставайтесь со мной на связи
↗
Основы Java Script
23 урока
1.
Добро пожаловать в клуб Hello world!
↗
2.
Как работает Java Script
↗
3.
Важны ли точки с запятой? Как создавать комментарии
↗
4.
Что такое переменные
↗
5.
Подробнее о переменных
↗
6.
ПРОВЕРЬ СЕБЯ: Знание переменных
↗
7.
Что такое "выражения" и "инструкции"
↗
8.
Типы данных
↗
9.
Особенности чисел и строк
↗
10.
ПРОВЕРЬ СЕБЯ: Типы данных
↗
11.
Введение в операторы. Математические операторы "+" "-" "*" "/"
↗
12.
Как работают Операторы сравнения ">" "==" "<" "!="
↗
13.
ПРОВЕРЬ СЕБЯ: Операторы сравнения
↗
14.
Приоритетность операторов
↗
15.
Преобразование типов данных
↗
16.
Стандартные объекты. Подводим итоги и повторяем.
↗
17.
ПРАКТИКА-1. Создайте калькулятор индекса тела
↗
18.
ПРАКТИКА-2. Создайте любовный рандомайзер
↗
19.
Знакомство с If Else. Условное ветвление
↗
20.
Как работают логические операторы "!" "??" "&&" "||"
↗
21.
ПРОВЕРЬ СЕБЯ: Логические операторы
↗
22.
Как работает тернарный оператор "?"
↗
23.
Заключительное слово этого блока
↗
Мини-курс по 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
↗
Углубление в основы Java Script. Функции и Объекты
23 урока
1.
Используйте "Use Strict"
↗
2.
Введение в функции
↗
3.
Function Expression и Function Declaration
↗
4.
Области видимости в JS
↗
5.
ПРОВЕРЬ СЕБЯ: Области видимости
↗
6.
Значения по умолчанию для параметров функций
↗
7.
Что такое callBack функции
↗
8.
Как работают стрелочные функции
↗
9.
ПРАКТИКА-3. Калькулятор победителя
↗
10.
Что такое объекты
↗
11.
Вложенные свойства объектов
↗
12.
Сокращенная запись свойств
↗
13.
Создание функций в объектах и немного про this
↗
14.
ПРАКТИКА-04. Создайте калькулятор BMI с помощью объектов
↗
15.
Введение в массивы
↗
16.
Введение в методы массивов
↗
17.
Введение в цикл for
↗
18.
Break & Continue в циклах For
↗
19.
Цикл While Do While
↗
20.
Копирование объектов. Мутация Объектов
↗
21.
ПРАКТИКА-5-Создайте последовательность Фибоначи
↗
22.
ПРОВЕРЬ СЕБЯ. Тест по основам JS
↗
23.
Заключительное слово этого блока
↗
Основы работы с DOM
19 уроков
1.
Prettier и как работают "сниппеты".
↗
2.
Что такое DOM и Окружение JS
↗
3.
Получение HTML Элементов
↗
4.
Что такое HTML узлы и родство элементов
↗
5.
Что такое псевдомассив
↗
6.
Как работают циклы for of и for in
↗
7.
Получение и изменение содержимого тегов
↗
8.
Создание и вставка новых элементов DOM
↗
9.
Как работает InsertAdjastmentHTML
↗
10.
Клонирование, перемещение и удаление элементов
↗
11.
Изменение CSS стилей с помощью JS
↗
12.
Получение и изменение атрибутов DOM элементов
↗
13.
Что такое обработчик события на странице
↗
14.
Как добавлять воспроизведение аудио при срабатывании события
↗
15.
ПРАКТИКА - 6. Создайте игру в угадай число
↗
16.
ПРАКТИКА - 7. Создайте модальные окна
↗
17.
ПРАКТИКА - 8. Создайте игру в алфавит
↗
18.
ПРОВЕРЬ СЕБЯ. Тест по D.O.M.
↗
19.
Заключительное слово
↗
Углубленная работа с данными
13 уроков
1.
О чем этот блок
↗
2.
Как работает контекст вызова this
↗
3.
Деструктуризация массивов
↗
4.
Деструктуризация объектов
↗
5.
Как работает оператор spread
↗
6.
Что такое оператор rest
↗
7.
ПРАКТИКА-9. Деструктуризация, rest и spread
↗
8.
Что такое классы в JS
↗
9.
Что такое Set
↗
10.
Что такое Map
↗
11.
Конвертация структур данных
↗
12.
ПРАКТИКА-10. Map и Set
↗
13.
Заключительное слово
↗
Работа со строками
4 урока
1.
Методы строк ч. 1-Как работают строки. Метод slice
↗
2.
Методы строк ч. 2. (trim, toLowerCase, replace)
↗
3.
Методы строк ч. 3 (Split / Join)
↗
4.
ПРАКТИКА-11. Работа со строками
↗
Работа функций
6 уроков
1.
Параметры функций по умолчанию
↗
2.
Объекты как параметры функций
↗
3.
Функции высшего порядка и первого класса
↗
4.
Возврат функции из функции
↗
5.
Метод функций call
↗
6.
Метод функций bind
↗
Работа с массивами
21 урок
1.
О чем этот блок
↗
2.
Базовые методы массивов
↗
3.
Как работает метод forEach()
↗
4.
forEach на Map и Set
↗
5.
Начинаем создавать приложение
↗
6.
Метод Map()
↗
7.
Map() на практике
↗
8.
Метод filter()
↗
9.
Метод Reduce()
↗
10.
Практика. Filter/ map/ reduce
↗
11.
Применяем методы на странице
↗
12.
Метод find()
↗
13.
LogIn в аккаунт
↗
14.
Перевод средств из аккаунта
↗
15.
Метод findIndex()
↗
16.
Методы some() и every()
↗
17.
Метод flat()
↗
18.
Метод sort()
↗
19.
Метод fill() и Array.from()
↗
20.
Практика. Методы массивов
↗
21.
Заключение блока
↗
Числа и время
9 уроков
1.
Базовые методы чисел
↗
2.
Что такое bigInt
↗
3.
Как создать дату
↗
4.
Устанавливаем даты в банковском приложении
↗
5.
Выражения с датами
↗
6.
Форматы дат разных стран
↗
7.
Форматы чисел разных стран
↗
8.
SetInterval и SetTimer
↗
9.
Заключительное слово
↗
Углубление в работу DOM
14 уроков
1.
О чем этот блок
↗
2.
Живые VS статичные коллекции
↗
3.
Координаты элементов
↗
4.
Отмена и всплытие событий
↗
5.
Делегирование событий
↗
6.
Создаем табы
↗
7.
Создаем прозрачное меню
↗
8.
Intersection API
↗
9.
Применяем Intersection на секциях
↗
10.
Применяем Intersection на изображениях
↗
11.
Создаем слайдер
↗
12.
Доделываем слайдер
↗
13.
3 способа подключения скрипта на сайт
↗
14.
Заключительное слово
↗
Объектно ориентированное программирование
21 урок
1.
Что такое функции конструкторы
↗
2.
Разница между prototype и __proto__
↗
3.
ПРАКТИКА - Создайте функции конструкторы
↗
4.
Разница между классами и функциями конструкторами
↗
5.
Что такое геттеры
↗
6.
Что такое сеттеры
↗
7.
ПРАКТИКА - Классы, гетеры и сеттеры
↗
8.
Что такое статические методы
↗
9.
Object.create()
↗
10.
Создание дочерних классов
↗
11.
ПРАКТИКА - Создайте дочерний класс
↗
12.
Создание дочерних классов через синтаксис классов
↗
13.
Что такое API
↗
14.
Переменные в классах
↗
15.
Инкапсуляция свойств
↗
16.
Инкапсуляция свойств новый стандарт
↗
17.
Создание цепочки методов
↗
18.
Подводим итог изученного
↗
19.
ПРАКТИКА - Дочерние классы через синтаксис классов
↗
20.
Проверь себя. Тест по теме.
↗
21.
Заключительное слово
↗
Объектно ориентированное программирование - на практике
12 уроков
1.
О чем этот проект
↗
2.
Используем Geolocation API
↗
3.
Размещаем карту на сайте
↗
4.
Работаем с документацией
↗
5.
Отображение формы
↗
6.
Рефакторинг в синтаксис классов
↗
7.
Создаем классы тренировок
↗
8.
Валидация форм
↗
9.
Отображение тренировок
↗
10.
Плавное перемещение к тренировкам по карте
↗
11.
Работа с localStorage
↗
12.
Заключительное слово
↗
Асинхронный код
17 уроков
1.
Что такое асинхронный код
↗
2.
Как работает XMLHTTRequest
↗
3.
Подключаемся к API
↗
4.
Call-back hell
↗
5.
Введение в fetch & promise
↗
6.
Как работает promise по цепочке
↗
7.
Обработка ошибок в promise
↗
8.
Обработка ошибок сервера
↗
9.
ПРАКТИКА. Используем внешние API
↗
10.
Что такое промисификация
↗
11.
Очередь выполнения кода
↗
12.
Промисификация ч.2
↗
13.
Как работает async/await
↗
14.
Обработка ошибок try catch
↗
15.
Возврат данных из async/await
↗
16.
Параллельное выполнение promises
↗
17.
Доп. методы параллельного кода
↗
До встречи на уроках!
1 урок
1.
Прощание
↗