Курс ВЕБ-разработчик - с нуля до результата!

5Premium

На практике научитесь создавать веб-сайты и веб-приложения с применением полученной в курсе всей необходимой теории. Дополнительных знаний не требуется. Все нужные программы установим и настроим в процессе обучения. Курс соответствует современным трендам и стандартам. Основные технологии: HTML5, CSS3, Bootstrap 4-5, JavaScript.
По итогам курса мы создадим несколько проектов + ваш личный сайт-портфолио.

Начать обучение Регистрация

О курсе - Чему Вы научитесь?

Этот курс направлен на подробное обучение созданию сайтов, без воды, но главное, что здесь мы немедленно применяем все знания на практике.

Чему вы научитесь

Вы научитесь выполнять самостоятельные проекты на freelance или получите профессию веб-разработчика для работы в веб-студии и заложите базу для дальнейшего обучения. После прохождения курса “Веб-разработчик - с нуля до результата!” вы сможете освоить любую CMS, например, WordPress. Изнутри сможете понять и изучить, как работает backend часть. Создавать визуальную часть приложений, написанных на JavaScript фреймворках и библиотеках (ведь там везде используется верстка как и на обычных сайтах, в том числе и на мобильных приложениях).

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

  • Работу с дизайн-макетами сайтов в Photoshop
  • Другие полезные в верстке графические редакторы - Zeplin, Figma, Avocode...
  • HTML5 и CSS3 на реальных проектах
  • Библиотеку BOOTSTRAP 4-5 и технологию FlexBox
  • Препроцессоры Sass/Scss/Less в своих проектах
  • Мобильную адаптацию сайтов и приложений
  • Создание многостраничных сайтов и принципы посадки под CMS(системы управления сайтами)
  • Методологию БЭМ
  • JAVASCRIPT и JQuery на практике
  • Git и GitHub
  • Автоматизацию и планировщик задач Gulp
  • Оптимизацию скорости работы сайтов
  • Валидацию верстки по w3c-стандартам
  • и многое другое...
В процессе курса мы на практике проработаем несколько проектов, которые вы сможете включить в свое профессиональное рабочее портфолио.

В 4-м разделе курса мы создадим ВАШ ЛИЧНЫЙ САЙТ-ПОРТФОЛИО, куда вы сможете разместить информацию о себе и свои работы-портфолио для презентации работодателям или заказчикам.

А в конце курса вы получите приятный бонус - несколько реальных макетов для верстки сайтов и самостоятельного закрепления полученных знаний.

Начать обучение

Получите +6 проектов в личное портфолио

В курсе много практики и часть выполненных вами проектов, заданий и работ вы сможете разместить в ваше личное портфолио для демонстрации потенциальным работодателям и заказчикам.

Начать обучение

План курса

Программа обучения включает видео уроки по изучению Веб-разработки с нуля. Благодаря практическим заданиям, Вы сможете закрепить полученные знания и создать собственные сайты на практике.

развернуть все

свернуть все

Введение - О курсе Веб-разработчик - с нуля до результата!
1. Погружение в тему создания web-продуктов. Изучение основ HTML и CSS на практике
  • 1.1 Зачем нам этот модуль03:03
  • 1.2 Классификация сайтов. Этапы создания22:17
  • 1.3 Установка и настройка редактора кода Visual Studio Code08:17
  • 1.4 Работа с Adobe Photoshop в вебе21:37
  • 1.5 Работа с современными редакторами: Avocode, Zeplin, Figma23:03
  • 1.6 Бонус. Что такое "сетки" и преобразование иконок в SVG формат08:35
  • 1.7 Создаем свой первый проект. Основы HTML19:56
  • 1.8 Основные теги HTML на практике40:12
  • 1.9 Семантические теги HTML511:12
  • 1.10 Основы CSS на практике31:11
  • 1.11 Блочная модель CSS13:17
  • 1.12 Developer Tool. Что это и как с ним работать?14:01
  • 1.13 Блочная модель CSS. Часть 219:15
  • 1.14 Позиционирование элементов в CSS. Принцип карточной колоды21:38
  • 1.15 Выравнивание элементов по вертикали. Верстка таблицами и float'ами08:59
  • 1.16 Бонус. Единицы измерения CSS10:52
  • 1.17 Специфичность CSS селекторов12:02
  • 1.18 Практика. Создаем сайт на чистом HTML и CSS08:34
  • 1.19 Технология Flexbox и применение её на макете14:17
  • 1.20 Практика. Заканчиваем сайт на чистом HTML и CSS + домашнее задание34:14
  • 1.21 Сброс стилей reset.css/normalize.css09:27
  • 1.22 Подключение шрифтов на сайт31:19
2. Ускорение работы в несколько раз - Bootstrap
  • 2.1 Зачем нам этот модуль01:31
  • 2.2 Библиотека Bootstrap 434:52
  • 2.3 Про обновление Bootstrap до пятой версии08:03
  • 2.4 Практика. Новый проект с использованием сетки Bootstrap 403:35
  • 2.5 Как правильно формировать пути к файлам05:52
  • 2.6 Препроцессоры. SASS/SCSS/LESS31:07
  • 2.7 Если у вас ошибка при компиляции SASS кода03:18
  • 2.8 Вендорные префиксы в CSS04:30
  • 2.9 Практика. Продолжаем работу и используем препроцессор SASS32:03
  • 2.10 Псевдоклассы и псевдоэлементы в CSS17:34
  • 2.11 Практика. Используем псевдоэлементы и псевдоклассы в проекте42:55
  • 2.12 Как работать с иконками. Иконочные шрифты20:42
  • 2.13 Адаптация проектов под различные устройства18:15
  • 2.14 Pixel Perfect верстка04:07
  • 2.15 Адаптация при помощи Bootstrap11:44
  • 2.16 Практика. Адаптация проекта. Часть 142:39
  • 2.17 Практика. Адаптация проекта. Часть 245:13
  • 2.18 Локальные ссылки и favicon06:10
  • 2.19 UX. Дорабатываем мелочи06:59
  • 2.20 Публикуем сайт в интернете. Домен. Хостинг. GitHub Pages и сброс "кеша"12:42
3. Необходимые технологии для веб-разработчика и продвинутая практика
  • 3.1 Зачем нам этот модуль01:37
  • 3.2 Система контроля версий Git и сервис GitHub25:30
  • 3.3 Как работать с GitHub с разных компьютеров, gitignore и Git Kraken16:15
  • 3.4 Планировщик задач Gulp38:53
  • 3.5 Методология БЭМ14:00
  • 3.6 Практика. Создаем новый проект, используя Gulp, БЭМ37:34
  • 3.7 Если у вас не работают картинки02:33
  • 3.8 Формы на сайтах32:26
  • 3.9 Знакомимся с языком программирования JavaScript31:34
  • 3.10 Как можно освоить JavaScript?01:34
  • 3.11 Практика. Создаем слайдер на сайте. Slick-слайдер35:14
  • 3.12 Если у вас не работают скрипты03:37
  • 3.13 Практика. Альтернативные варианты слайдеров30:32
  • 3.14 Практика. Создаем табы на сайте. Часть 132:23
  • 3.15 Практика. Создаем табы на сайте. Часть 237:39
  • 3.16 Создаем интерактивные карты на сайте20:36
  • 3.17 Практика. Создаем модальные окна на сайте38:20
  • 3.18 Валидация форм23:06
  • 3.19 Маска ввода номера на сайте05:53
  • 3.20 Локальные сервера08:31
  • 3.21 Практика. Отправка писем с сайта19:08
  • 3.22 Если у вас ошибка при отправке формы12:19
  • 3.23 Плавный скролл по ссылкам и элемент "вверх"11:45
  • 3.24 Анимации на сайтах при помощи CSS312:29
  • 3.25 Библиотеки для работы с анимациями11:32
  • 3.26 Про обновления и animate.css10:37
  • 3.27 Валидация сайта07:58
  • 3.28 Загружаем сайт на реальный хостинг. Настройка домена, что такое FTP и SSL15:12
  • 3.29 Оптимизация скорости загрузки сайта, доработка gulpfile38:34
4. CSS Grid и сайт-портфолио
  • 4.1 Зачем нам этот модуль02:18
  • 4.2 Снова про сетки и CSS Grid17:40
  • 4.3 Единица гибкости (fr) и repeat()08:54
  • 4.4 Явные и неявные гриды20:52
  • 4.5 Функция minmax() и масштабирование треков18:55
  • 4.6 Позиционирование треков24:19
  • 4.7 Выравнивание треков13:55
  • 4.8 Grid Area и подсетки. Адаптация гридов19:40
  • 4.9 Еще раз про meta-тэги и фавикон. OG tags09:58
  • 4.10 Подготовка к созданию портфолио23:01
  • 4.11 Создаем первый экран. Часть 158:01
  • 4.12 Создаем первый экран. Часть 2. Анимация меню48:24
  • 4.13 Используем CSS Grid для создания второго экрана42:15
  • 4.14 Создаем третий экран портфолио47:53
  • 4.15 Реализуем скрипт автоматического пересчета процентов14:16
  • 4.16 Создаем блок - портфолио работ25:46
  • 4.17 Создаем блок с контактами38:11
  • 4.18 Политика конфиденциальности. Что это, зачем и как использовать15:39
  • 4.19 Свойство object-fit15:18
  • 4.20 Адаптация портфолио. Часть 157:40
  • 4.21 Адаптивные изображения31:58
  • 4.22 Заканчиваем портфолио и адаптируем последние экраны24:42
  • 4.23 CSS Variables (CSS переменные)17:04
  • 4.24 Что такое Mobile first11:50
5. Заключительная часть
  • 5.1 Что делать дальше?02:18
Завершение курса - Получение Сертификата

Начать обучение

Студенты также изучают

online_course
new
5
  • 84 видео
  • 27 часов
online_course
4.9
  • 31 видео
  • 65 заданий
  • 5 часов
online_course
4.9
  • 25 видео
  • 50 заданий
  • 4 часа
online_course
4.7
  • 10 видео
  • 21 заданий
  • 1 час
online_course
new
5
  • 48 видео
  • 19 часов
online_course
new
5
  • 28 видео
  • 14 часов

Отзывы студентов о курсе

Мы собрали отзывы учеников, прошедших онлайн курс. Оставьте свой отзыв после прохождения Курса Веб-разработчик - с нуля до результата.

Роман Артамонов

Лучший курс!

Вера Кузнецова

Самый лучший курс, который я когда либо смотрела!

Андрей Турчин

из всех что я видел - это лучший курс

Elena Brausmann

Шикарный курс. Все подробно. Затрачено много времени и сил, чтобы так информативно все рассказать и объяснить. Спасибо!

Николай Бочаров

Очень хороший курс. Доступно доходчиво. Есть исходные материалы.

Наталья Галицкая

отличный курс, глубокое погружение и практика , подача информации доступна и понятна. Большое спасибо! мне очень понравилось , буду дальше учиться!

Александр Стафий

Отличный курс! Простым понятным языком о сложном.

Владислав Зиновьев

Курс отличный, проходил в свободное время) Узнал много всего нового интересного, закончил свой сайт портфолио. Отличная подача материала! Это мой первый курс обучению веб разработке, Возможно что всё таки освоил для себя новую профессию. Ученикам порекомендовал бы быть терпеливыми, без этого не куда, и если что-то не получается надо продолжать, и всё получится. Нет ничего не возможного!

student_R3udPQg_

Понятные и доступные объяснения. К урокам прикреплены примеры выполнения ДЗ. Много дополнительных полезных материалов. Некоторые темы освещены довольно кратко, необходима самостоятельная работа по более углубленному изучению. Не хватает, пожалуй, только видео-разбора сложных ДЗ. Не всегда все получается, даже с разбором готового ДЗ. В целом очень рекомендую данный курс.

Ульяна Богдарина

Все понравилось, так как было много объяснений, примеров и документации

Anna Khaustova

В сравнении с другими преподавателями Иван предоставляет доп.информацию и крайне полезные источники на абсолютно каждое свойство, технологию. После каждого выполненного проекта с Иваном, не терпелось выполнить проект по собственному макету. Для этого даже в фигме разобралась) Отмечу, что если бы Иван преподавал нудно и бесталанно, то не появилось бы желание разработать свой сайт. Огромное спасибо Ивану и Beonmax!

Александр Воронов

отличный курс очень глубокий и понятный

Александр Кузьмин

Курск хороший. Для меня он был отчасти полезен, так как я уже и на фрилансе работаю, но в любом случае, было приятно слушать Ивана и благодаря ему заполнил мои небольшие пробелы по данной теме. Спасибо!

Alexei Fedotov

Курс отличный. Подача материала, объяснения и дикция на неплохом уровне.

Олег Горшенев

здравствуйте! большое спасибо за прекрасный курс. понравились все уроки. хочу использовать их в своих работах. очень хорошо что были готовые домашние задания, что облегчало работу.

Кирилл Сушков

Иван, спасибо за курс!!! Обязательно пройду курс Java Script, но чуть-чуть позже. От души! Мира Вам! Пойду поверстаю=)

Станислав Золоторев

Большое спасибо за полученные знания! Исчерпывающая информация, изложенная в доступной форме!

Алексей Мухаметшин

ЭТо супер курс!! Всем рекомендую)) Когда смотрел заключительную часть, аж прослезился немного, как будто закончился один из этапов моей жизни))

Владислав Бердышев

Обучение прошло интересным, понятным, увлекающим. Спасибо Ивану за потраченные силы на уроки!

Денис Кокотов

замечательный курс, Иван молодец, очень доступно и интересно объясняет.

Денис Голиков

Отличный курс, про который не забывают, лучшее что можно найти для старта и начальной базы для дальнейшего развития

Артем Вершинин

Отличный и очень подробный курс!

Елена Гох

Курс отличный!

Елена Ершова

Очень понравился курс! Уже на третьем модуле, начала делать коммерческие заказы! Все очень доступно, понятно! Ивану огромная благодарность! Рекомендую курс друзьям! рекомендация новым ученикам, найти себе друга веб разработчика, который подскажет, если возникнет где то ступор

Руслан Стамкулов

Очень познавательный курс

Елизавета Зеленова

Огромное спасибо! Море актуальной и полезной информации. Благодаря курсу я сделал отличное портфолио.

Владимир Фомин

спасибо Ивану самый крутой преподаватель

Анастасия Смушкина

Очень полезный курс. До этого знала HTML и CSS, но после прохождения курса поняла, что очень многое я не знала. Хочу сказать, большое спасибо разработчикам данного курса. Информации очень много, но все понятно рассказывается и объясняется. На данный момент, уже беру в разработку простые сайты-визитки.

Антон Петров

Интересный курс. В этот раз без практических заданий на проверку. Однако в нем есть моменты, которых не было в предыдущих курсах. Вся необходимая информация, которую зачастую приходится гуглить, собрана в курсе: от идеи сайта до его оптимизации.

Руслан Никитченко

Иван, спасибо большое, все уроки понятны, приятно было заниматься, даже жаль, что курс закончился)

Denys Semanchuk

Отличный курс, спасибо

Артем Куриленко

Отличный курс. Доступно, понятно, а главное все на практике и примерах. Огромный шаг для дальнейшего саморазвития. Спасибо!!!

student_3mvZ9qq2

Это лучшие курсы по Web разработке. Все доходчиво и понятно.

Сергей Новиков

Все было круто!

Алена Инденко

Иван СПАСИБО за подробный и вкрадчивый курс! Хоть сразу и не укладывается все в голове но благодаря четким темам уроков всегда можно быстро найти нужную информацию!!! Проходя ваш курс у меня появилось желание изучать новое, настолько сильное, что даже купила новый ноутбук, хотя начинала на старом и думала его вполне хватит) Курс отличный, есть с чем сравнивать, и голос приятный

Елена Шипилевская

Отличный курс, большое спасибо! Все четко объясняется, автора приятно слушать!

Александр

Всем привет! Прошел курс ВЕБ-разработчик 2021 - с нуля до результата! Хочу сказать, что курс реально крутой, много практики, спасибо Ивану за понятное объяснение материала! Учитывая , что я уже умел верстать сайты, из курса я узнал для себя много нового.

Лена Тодорова

Спасибо за ценные знания!

Сархан Абдуллаев

Очень понравился курс, очень познавательный!

Артур Сафин

Ваня очень классно преподает. Получал удовольствие от курсов, было все понятно и прошло на ура! Ну, работу я найти все-таки смог благодаря этим курсам, но все же, мой совет - не торопитесь и посмотрите 3 курса, во благо, по подписке: 1) Данный курс; 2) Курс по JS; 3) Курс по PHP. И станете машиной, которой легче будет пройти собеседование)

Rostyslav Huk

Хороший курс для начинающих, много практики)

Alexandr Kostitsyn

Курс прошёл на одном дыхании, спасибо большое.

Владимир Полюдов

Спасибо за курс!

Денис Соколовский

Отличный курс, все доступно и понятно!

Ihor Dolinskyi

Обучение было простым и доступным :) Как для меня - новичка было очень познавательно. Больше всего понравилось то что обучатся можно в любое время, что очень располагало к учебе.

Денис Немцов

Отличный курс. Снял сразу ряд вопросов и все разложил по полочкам!

Alexey Konopatsky

Отличный курс, который помогает развить свои навыки

Татьяна Когай

Отличный курс!

Андрей

Курс великолепный. Получил громадное удовольствие от прохождения. Большое спасибо.

Борис

Очень познавательный курс. Для создания подобного материала должны быть приложены колоссальные усилия, и они были приложены безусловно. Особенно хочу отметить как преподавателя Ивана Петриченко. Это просто ТАЛАНТИЩЕ! Продумать всю структуру обучения, рассказывая об основах и более мелких деталях ремесла, всё это записать и скомпоновать + ещё и дополнять новой информацией, тем самым оставляя актуальным курс год за годом - в общем титаническая работа была проделана. Спасибо beonmax, спасибо Ивану

кристина кондратьева

Это мой первый опыт дистанционного обучения. Мне очень понравилось. Огромное спасибо. Очень удобный, доступный, понятный, последовательный процесс обучения. Выражаю глубокую благодарность организаторам и администраторам!

Амир Оксумбаев

Курс понравился тем что сразу дается практический опыт. А также актуальные знания для настоящей работы верстальщиком.

Максим Марчук

Отличный курс, всё понятно, Иван (преподаватель) заслуживает отдельной похвалы, так как объяснил всё доступным языком. Рекомендую!

Игорь Кабаков

Курс супер! Все понятно, доступно преподнесено! Видео курсы пришлось просматривать по несколько раз, но со всем разобрался! Для начинающего, курсы Beonmax это идеальный старт в мир IT! Всем советую! Ребята молодцы!

Вадим Калашников

Курс хороший, подача на уровне, всё понятно, ничего лишнего. Ивану спасибо! Всем советую!

Ольга Недзельская

Классный курс)))

Александр Кайманов

Курс отличный! Все было понятно и доступно. Спешу применить полученные знания на практике!

Ghost

Объемный курс вышел)! Иван отлично все излагает, ну а голова от материла - взрывается! (В хорошем смысле) Теперь бегу дальше к JS! Спасибо!)

Начать обучение

Преподаватель

Course Author
Иван Петриченко

О преподавателе курса

  • Практикующий frontend-разработчик и консультант
  • Более 10 лет профессионально занимается frontend-разработкой и создает сайты "под ключ". Обучает этому взрослых и детей, организовывает и проводит мероприятия. Проводит консалтинг и аудит сайтов.

"В моей копилке уже несколько организованных и записанных авторских онлайн курсов, я люблю помогать людям и делиться с ними знаниями.

Я фрилансер и очень люблю путешествовать и выступать на различных конференциях."