Программа и содержание
Курс по веб-разработке Web Pro.
Это про вас?
Вы посмотрели миллионы роликов на ютубе, тысячи бесплатных прямых эфиров и вебинаров, а в голове каша и результата нет?
Мечтаете сменить работу на более востребованную
Ищете высокооплачиваемую и перспективную профессию
Хотите выйти на фриланс и создать доп. заработок
Думаете с чего начать изучать программирование
Как проходит обучение:
Проверка знаний
Выполнение практических заданий и тестов на понимание теории после каждого урока и модуля
Гибкий формат
Обучение можно начать с любого доступного модуля. Если вам знакомы темы каких-либо модулей — пропускайте их и начинайте обучение с новых знаний
Безлимитный доступ
Курс записан в формате видеоуроков, а значит вы не привязаны ко времени прохождения и легко можете пересмотреть любой доступный вам урок
Программа:
Можно начать с любого доступного модуля.
Модуль 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 модуля, на котором вы отточите навыки программирования jаvascript, реализовав таймеры, слайдеры, модальные окна, сортировку, фильтрацию и многое другое
А также вас ждёт множество минипроектов и собственные уникальные проекты, которые вы разработаете сами от идеи и дизайна до вёрстки и программирования.
Автор Никита Щегольков:
Обучаю сайтам более 5 лет
Выпустил более 1 000 учеников. Младшему 9 лет, старшему 60
Основатель школы веб-разработки WEB PRO и автор YouTube канала
Более 120 000 руб. зарабатывал в месяц на веб-разработке, работая 2 дня в неделю
Более 6 лет программирую. Окончил университет по программированию
Тариф Интенсивный:
Начало обучения с любого доступного модуля
Последовательный доступ к урокам