Курс по верстке и веб разработке сайтов с нуля! Web development
Подробнее
Что нужно для старта
- Никаких предварительных знаний не требуется
Что вы получите
- Вы узнаете как создавать сайты на языках HTML и CSS
- Научитесь размещать свой сайт в сети интернет
- Изучите HTML5
- Изучите CSS3
- Получите необходимые знания для использования библиотеки Bootstrap
- Научитесь работать с препроцессором SASS/SCSS
- Изучите методологию БЭМ
- Научитесь создавать адаптивные сайты, которые будут выглядеть отлично на любом устройстве
- Научитесь создавать дизайн сайтов
- Изучите базу программы Figma
- Научитесь работать в программе VS Code
- Поймете все этапы разработки сайтов
- Изучите современные стандарты позиционирования элементов сайта
- Изучите технологию Flexbox
Для кого этот курс
- Для начинающих веб разработчиков
Программа курса
- О чем этот курс
- Подготовка. Скачиваем материалы. Как проходить курс
- Оставайтесь со мной на связи.
- О чем этот блок
- Создаем первый веб сайт!
- Как работают теги HTML и стили CSS
- Теги Head и Body. Правильная структура веб страницы
- Как работают теги заголовка и описания, в теге head.
- Как работает тег "контейнер' - div
- Как работать с классами в верстке
- Как подключить лист со стилями к файлу html
- ПРАКТИКА: Создайте и стилизуйте несколько тегов div
- Пример преподавателя. "Практика: создайте и стилизуйте несколько
- Обзор нейросетей
- Лучшие модели искусственного интеллекта на сегодня
- Как оплатить подписку на Chat GPT
- Обзор тарифов Chat GPT
- Программа Chat GPT на разные операционные системы
- Используем Chat GPT для обучения
- Используем Chat GPT для программирования
- Где еще полезен Chat GPT
- Как показывать экран чату GPT
- Генерация изображений с помощью Chat GPT и не только
- Advanced Voice mode в Chat GPT
- Как работает Copilot от GitHub
Подробности будут доступны на странице курса
- О чем этот блок
- Об обновлении интерфейса Figma
- О чем мини курс?
- Подготовка. Скачиваем материалы
- Какой размер у сайта?
- Как сохранить свой проект
- Как работать с сетками и направляющими
- Бриф с заказчиком.
- Mood board и поиск вдохновения
- Создаем wireframe проекта
- Стоковые площадки. Где найти идеальное фото?
- Как работать с изображениями в figma
- Иерархия элементов в figma
- Как работать с цветом в figma
- Разница UX и UI
- Как создавать текст в figma
- Линии и обводка фигур
- Как группировать элементы
- Поиск и установка новых шрифтов
- Как работать с иконками
- Как работать с градиентом
- Как работатет инструмент subtract
- Стоковая площадка по иконкам. Поиск иконок
- Как работать с масками слоя
- Как использовать рыбный текст в figma
- Как добавлять эффекты к элементам
- Экспорт из figma и передача в разработку
- Обновление 2023.Где вкладка inspect?!
- Dev mode стал платным
- Поздравляю с завершением мини курса!
- О чем этот блок
- Препроцессор SASS ч.1
- Препроцессор SASS ч.2
- Как решать ошибки
- FlexBox. Новый способ позиционирования элементов.
- Методология БЭМ и как ее использовать
- Используем FlexBox и БЭМ в новом проекте
- Как превратить растровый логотип в векторный с помощью Illustrat
- Закругление / Поворот / Тени для элементов
- Что такое иконочные шрифты
- Создаем первую кнопку
- Используем модификатор БЭМ. Новое свойство overflow
- Min/Max - Height/Width
- Практика. Создаем вторую секцию сайта
- Практика. Создаем третью секцию сайта
- Практика. Создаем footer сайта
- Добавляем якорные ссылки на навигационное меню
- Что такое fav-icons, и как их установить в свой проект
- О чем этот блок
- Какие существуют типы верстки
- Как работает мета тег viewport
- Под какие размеры нужно адаптировать сайт
- Адаптация под планшетную версию ч.1
- Практика: Адаптируйте сайт под следующую версию.
- Пример преподавателя. Адаптация следующей версии под планшет
- Как работают единицы измерения EM/REM VH/VW
- Свойство transition. Создаем гамбургер для мобильной версии сайт
- Создаем гамбургер для мобильной версии сайта ч.2
- Знакомство с JS. Создаем гамбургер для мобильной версии сайта ч.
- Speed test готового сайта
- О чем этот блок
- Что такое bootstrap
- Как подключить bootstrap в свой проект
- Какие настройки содержит в себе bootstrap
- Как задавать свои стили в bootstrap
- Свойство Object-fit и как создать слайдер в bootstrap
- Как модифицировать слайдер в bootstrap
- Как менять цвета в bootstrap
- Как изменить скорость слайдера в bootstrap
- Типичные ошибки и проблемы с работой в bootstrap
- Как менять компоненты bootstrap. Меняем иконки на слайдере
- Система сеток bootstrap. Bootstrap-grid
- Как решать задачи возникающие в процессе верстки
- Прощальное слово
- Тест для получения сертификата об окончании курса
01Введение
- О чем этот курс
- Подготовка. Скачиваем материалы. Как проходить курс
- Оставайтесь со мной на связи.
02Основы HTML и CSS
- О чем этот блок
- Создаем первый веб сайт!
- Как работают теги HTML и стили CSS
- Теги Head и Body. Правильная структура веб страницы
- Как работают теги заголовка и описания, в теге head.
- Как работает тег "контейнер' - div
- Как работать с классами в верстке
- Как подключить лист со стилями к файлу html
- ПРАКТИКА: Создайте и стилизуйте несколько тегов div
- Пример преподавателя. "Практика: создайте и стилизуйте несколько
03Мини-курс по ChatGPT для обучения и работы (Опционально)
- Обзор нейросетей
- Лучшие модели искусственного интеллекта на сегодня
- Как оплатить подписку на Chat GPT
- Обзор тарифов Chat GPT
- Программа Chat GPT на разные операционные системы
- Используем Chat GPT для обучения
- Используем Chat GPT для программирования
- Где еще полезен Chat GPT
- Как показывать экран чату GPT
- Генерация изображений с помощью Chat GPT и не только
- Advanced Voice mode в Chat GPT
- Как работает Copilot от GitHub
04Погружение в HTML и CSS
05Работа в Figma. Мини курс Figma free.
- О чем этот блок
- Об обновлении интерфейса Figma
- О чем мини курс?
- Подготовка. Скачиваем материалы
- Какой размер у сайта?
- Как сохранить свой проект
- Как работать с сетками и направляющими
- Бриф с заказчиком.
- Mood board и поиск вдохновения
- Создаем wireframe проекта
- Стоковые площадки. Где найти идеальное фото?
- Как работать с изображениями в figma
- Иерархия элементов в figma
- Как работать с цветом в figma
- Разница UX и UI
- Как создавать текст в figma
- Линии и обводка фигур
- Как группировать элементы
- Поиск и установка новых шрифтов
- Как работать с иконками
- Как работать с градиентом
- Как работатет инструмент subtract
- Стоковая площадка по иконкам. Поиск иконок
- Как работать с масками слоя
- Как использовать рыбный текст в figma
- Как добавлять эффекты к элементам
- Экспорт из figma и передача в разработку
- Обновление 2023.Где вкладка inspect?!
- Dev mode стал платным
- Поздравляю с завершением мини курса!
06Продвинутая верстка SASS / БЭМ / FlexBox
- О чем этот блок
- Препроцессор SASS ч.1
- Препроцессор SASS ч.2
- Как решать ошибки
- FlexBox. Новый способ позиционирования элементов.
- Методология БЭМ и как ее использовать
- Используем FlexBox и БЭМ в новом проекте
- Как превратить растровый логотип в векторный с помощью Illustrat
- Закругление / Поворот / Тени для элементов
- Что такое иконочные шрифты
- Создаем первую кнопку
- Используем модификатор БЭМ. Новое свойство overflow
- Min/Max - Height/Width
- Практика. Создаем вторую секцию сайта
- Практика. Создаем третью секцию сайта
- Практика. Создаем footer сайта
- Добавляем якорные ссылки на навигационное меню
- Что такое fav-icons, и как их установить в свой проект
07Адаптивная верстка
- О чем этот блок
- Какие существуют типы верстки
- Как работает мета тег viewport
- Под какие размеры нужно адаптировать сайт
- Адаптация под планшетную версию ч.1
- Практика: Адаптируйте сайт под следующую версию.
- Пример преподавателя. Адаптация следующей версии под планшет
- Как работают единицы измерения EM/REM VH/VW
- Свойство transition. Создаем гамбургер для мобильной версии сайт
- Создаем гамбургер для мобильной версии сайта ч.2
- Знакомство с JS. Создаем гамбургер для мобильной версии сайта ч.
- Speed test готового сайта
08Библиотека bootstrap
- О чем этот блок
- Что такое bootstrap
- Как подключить bootstrap в свой проект
- Какие настройки содержит в себе bootstrap
- Как задавать свои стили в bootstrap
- Свойство Object-fit и как создать слайдер в bootstrap
- Как модифицировать слайдер в bootstrap
- Как менять цвета в bootstrap
- Как изменить скорость слайдера в bootstrap
- Типичные ошибки и проблемы с работой в bootstrap
- Как менять компоненты bootstrap. Меняем иконки на слайдере
- Система сеток bootstrap. Bootstrap-grid
- Как решать задачи возникающие в процессе верстки
09До новых встреч!
- Прощальное слово
10Получите ваш сертификат
- Тест для получения сертификата об окончании курса
Stepik
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «Курс по верстке и веб разработке сайтов с нуля! Web development» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.

Stepik 




















