Содержание курса
10
разделов
135
уроков
1
тест
18 ч.
обн. 17 мая 2026
Введение
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.
Тест для получения сертификата об окончании курса
↗