Веб-разработчик

7 участников

О чём курс

О чём курс

Интерактивные веб-проекты становятся результатом пути от проектирования интерфейсов до готовых сайтов: обучение помогает освоить вёрстку и веб-программирование, систематизировать разрозненные знания и собрать первые работы для портфолио.

Для кого

Материал рассчитан на новичков, которые хотят начать изучать программирование или сменить текущую деятельность на сферу веб-разработки. Курс подойдёт тем, кто пробовал учиться самостоятельно по бесплатным материалам, но столкнулся с отсутствием структуры, а также тем, кто планирует выйти на фриланс.

Что внутри

Обучение начинается с настройки рабочей среды и редактора кода. Далее рассматриваются основы разметки и стилей, семантика, блочная модель и позиционирование элементов. В блоке дизайна изучаются базовые правила UI/UX, основы композиции и прототипирование в Figma.

Раздел вёрстки посвящён методологии БЭМ, построению сеток на Flexbox и Grid, работе с анимациями и трансформациями, а также правилам создания адаптивных сайтов с использованием медиазапросов. Финальная часть курса направлена на изучение основ языка JavaScript: от переменных и условий до манипуляций с DOM-деревом, обработки событий, работы с хранилищем браузера и написания интерактивных приложений.

Формат

Обучение проходит в формате записанных видеоуроков с возможностью изучать темы в удобное время. Допускается гибкий порядок прохождения: при наличии базовой подготовки можно пропустить знакомые темы и начать с любого доступного модуля. Закрепление теории происходит через практические задания и тесты после каждого урока и модуля.

Об авторе

Никита Щегольков — разработчик с опытом программирования более 6 лет и профильным высшим образованием. Основатель школы веб-разработки WEB PRO и автор профильного YouTube-канала. Преподаёт создание сайтов более 5 лет, за это время выпустил свыше 1000 учеников.

Программа обучения

  • Модуль 0. Настройка рабочей среды:
    • Знакомство с платформой
    • Установка и настройка редактора кода, расширений, а также других программ для прохождения курса
  • Модуль 1. Основы HTML и CSS:
    • Основные теги в html. Их виды и значения. Структура страницы
    • Семантика и её важность
    • Основные стили в CSS. Наследование и селекторы
    • Создание ссылок, многостраничных сайтов и тёмная тема на сайте
    • Работа с инструментом разработчика в браузере
    • Блочная модель. Размеры, отступы, стандартные стили и центрирование элементов
    • Ускорение вёрстки с помощью Emmet
    • Работа с фоном. Добавление фоновой картинки. Параллакс эффект
    • Поток документа. Позиционирование элементов. Фиксирование шапки. Теги-пустышки
    • Проекты на данном модуле: Личный сайт-визитка, Личный сайт-блог, Совместная вёрстка многостраничного сайта WEB FLY
  • Модуль 2. Дизайн сайта. Figma:
    • Основы дизайна. Принципы UI и UX дизайна
    • Разница коммерческих и информационных сайтов. Определение ЦА
    • Законы дизайна. Понимание психологии пользователя
    • Виды графики. Отличие растровой графики от векторной
    • Работа в Figma. Разработка UI kit, стилей и компонентов
    • Создание интерактива в прототипе макета
    • Дизайн проектов на данном модуле: Совместный сайт Dreamplanner под 3 экрана (мобильное устройство, планшет и компьютер), Индивидуальный сайт под 3 экрана
  • Модуль 3. Современная вёрстка:
    • Методология БЭМ
    • Отличие кнопки от ссылки
    • Модель flexbox
    • Псевдоклассы и псевдоэлементы на сайте
    • Взаимодействие с элементами при наведении, клике
    • Создание градиентов и тени
    • Трансформация, переходы и анимация
    • Проекты на данном модуле: Совместная вёрстка десктопной версии Dreamplanner, Вёрстка индивидуального сайта под десктоп
  • Модуль 4. Адаптивная вёрстка и Гриды:
    • Резиновая и адаптивная вёрстки
    • Виды медиазапросов. Вёрстка под Mobile first и Desktop first
    • Breakpoints. Как искать точки перелома. Работа с инспектором
    • Новые единицы измерения vh, vw
    • Создание и программирование бургер меню
    • Добавление видео и аудио. Создание видеофона
    • Создание и программирование модального окна с формой
    • Модель Grid. Теория по линиям и областям
    • Проекты на данном модуле: Адаптация Dreamplanner (вёрстка и программирование видео, формы и бургер меню), Вёрстка и адаптив на гридах WEB BIKE, Адаптация индивидуального проекта с предыдущего модуля
  • Модуль 5. Программирование на JS:
    • Знакомство с JS: способы подключения, консоль, типы данных, переменные, математические действия
    • Модальные окна, приведение типов данных и конкатенация
    • Условия if..else, сравнение и булева логика
    • Тернарный оператор, конструкция switch case
    • Функции и область видимости
    • Получение случайных чисел, отработка клика по элементам
    • Циклы while, do..while, for. Рекурсия
    • Массивы: перебор, добавление и удаление элементов, поиск элемента, копирование массива. Работа с многомерными массивами
    • Объекты: ключи и значения, методы и контекст this, прототипирование
    • Работа с DOM: навигация по элементам на странице, стилизация, работа с классами и атрибутами, работа с контентом, создание и удаление элементов на странице
    • События и обработчики: отслеживаем и ловим клики, перемещения мышки, нажатие клавиатуры и т.д., знакомимся с объектом event
    • Сохранение данных с помощью Local Storage, Session Storage. Знакомство с форматом JSON
    • Планирование (таймаут и интервал) и работа с датами
    • Разные способы объявлений функций. Стрелочные функции
    • Проекты на данном модуле: Совместное и самостоятельное программирование планировщика дел WebToDo (добавление и удаление задач, фильтрация задач, сохранение данных и т.д.), Минипроекты: генератор случайных цветов, счётчик символов, несколько разных кликеров на скорость и на время, а также несколько вариантов игры угадай число, Программирование онлайн-кинотеки WebFilms (сохранение имени и приветствие при входе, слайдер с индикаторами нуля, таймеры, добавление новых фильмов, фильтрация и сортировка кинотеки и т.д.)
  • Проекты на курсе в ваше портфолио:
    • WEB FLY многостраничный проект первого модуля. Сделан полностью на блочной модели. Якорные ссылки, позиционирование, параллакс эффект
    • Dreamplanner адаптивный проект 2-4 модулей. Разрабатываем дизайн. Используем БЭМ, Flexbox. Верстаем форму, модальное окно и добавляем видео
    • WEB BIKE адаптивный проект 4 модуля со сложной сеткой, которая перестраивается на разной ширине экрана. Вы сверстаете его, используя модель Grid
    • WEB FILMS выпускной проект 5 модуля, на котором вы отточите навыки программирования JavaScript, реализовав таймеры, слайдеры, модальные окна, сортировку, фильтрацию и многое другое
    • Множество минипроектов и собственные уникальные проекты, разработанные от идеи и дизайна до вёрстки и программирования
Складчина создана 14 сентября 2026 г.

Теги курса

Профессии
Инструменты
4 247 ₽ 25 000 ₽