Веб-разработчик
О чём курс
О чём курс
Интерактивные веб-проекты становятся результатом пути от проектирования интерфейсов до готовых сайтов: обучение помогает освоить вёрстку и веб-программирование, систематизировать разрозненные знания и собрать первые работы для портфолио.
Для кого
Материал рассчитан на новичков, которые хотят начать изучать программирование или сменить текущую деятельность на сферу веб-разработки. Курс подойдёт тем, кто пробовал учиться самостоятельно по бесплатным материалам, но столкнулся с отсутствием структуры, а также тем, кто планирует выйти на фриланс.
Что внутри
Обучение начинается с настройки рабочей среды и редактора кода. Далее рассматриваются основы разметки и стилей, семантика, блочная модель и позиционирование элементов. В блоке дизайна изучаются базовые правила 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, реализовав таймеры, слайдеры, модальные окна, сортировку, фильтрацию и многое другое
- Множество минипроектов и собственные уникальные проекты, разработанные от идеи и дизайна до вёрстки и программирования
Теги курса
Отзывов пока нет. Будьте первым!
Этот курс сейчас в процессе организации складчины. Нажмите кнопку «Записаться» и ожидайте старта — вам придёт уведомление. Когда складчина стартует, в карточке курса будет указан актуальный взнос. Текущая цена пока в процессе формирования и может отличаться от финальной.
Да, мы стремимся, чтобы финальный взнос был не больше ≈10% от оригинальной цены курса. Чем больше участников записывается в складчину, тем ниже выходит взнос для каждого.
Нажмите кнопку «Записаться» и авторизуйтесь на сайте через email (через ту же почту, которую будете использовать для входа). В личном кабинете вас будут ждать инструкции, как пригласить других участников — чем больше людей записалось, тем быстрее стартует складчина и тем ниже взнос. Как только складчина готова к приобретению, вам придёт уведомление.