Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
WEB-разработчик
Bestseller
Highest Rated
Rating: 4.9 out of 5(13,377 ratings)
32,460 students

WEB-разработчик

Освойте все, что необходимо для создания web-продуктов и начни зарабатывать на этом!
Last updated 6/2025
Russian

What you'll learn

  • Узнаете основы web-разработки: что такое web-продукт, зачем он нужен, циклы создания, как работает интернет в целом и многое другое
  • Научитесь работать с графическими редакторами в контексте разработки: Figma, Zeplin и тп
  • Научитесь работать с графикой для web'a, в том числе с SVG
  • Узнаете и поймете как использовать HTML и CSS в реальных проектах (теория + настоящая практика)
  • Узнаете основы JS, научитесь применять его в своих проектах
  • Научитесь работать с Git и GitHub
  • Научитесь работать с технологией FlexBox и CSS Grid
  • Научитесь использовать CSS Nesting или препроцессоры Sass/Scss в своих проектах
  • Научитесь создавать мобильную адаптацию сайтов и приложений
  • Научитесь использовать методологию БЭМ и аналоги
  • Поймете, как создавать многостраничные сайты и принципы посадки под CMS(системы управления сайтами)
  • Научитесь автоматизировать процессы при помощи Vite или Gulp
  • Научитесь оптимизировать скорость работы сайтов и проводить валидацию верстки по стандартам w3c
  • Научитесь создавать интерфейсы, подходящие под принципы доступности a11y
  • Научитесь работать с множеством готовых плагинов, устанавливать гео-карты на сайте, работать со шрифтами и многое другое...
  • Все полученные знания даются в современном формате и сразу закрепляются на практике
  • Бонус: получите несколько реальных макетов для практики

Course content

4 sections117 lectures46h 59m total length
  • Зачем нам этот модуль4:12

    В этом уроке мы поговорим о том, что мы будем изучать в первом модуле, какие результаты вы получите и как лучше его проходить

  • Современная разработка сайтов, веб-приложений и других веб-продуктов.Перспективы4:39

    В этом уроке мы обсудим перспективы web-разработки в целом

  • Про конструкторы, искусственный интеллект и перспективы5:12

    В этом уроке мы обсудим конструкторы сайтов, ИИ, как это все уживается в интернете и что нам со всем этим делать

  • Классификация и этапы создания сайтов/веб-приложений36:42

    В этом уроке мы разберем полную классификацию web-продуктов, как они разрабатываются и из каких частей состоят

  • Как все это работает изнутри: протоколы, клиент-серверная архитектура и http16:44

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

  • Как все это работает изнутри: html, css, js и тд.6:30

    В этом уроке мы обсудим из чего же состоит клиентская часть любого web-продукта

  • Работа с графикой: виды, дизайн-макеты и тп20:00

    В этом уроке мы обсудим что такое дизайн-макет, какие виды графики бывают в нем и какие форматы использовать

  • Сервисы для работы с графикой30:38

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

  • (Дополнительно) Преобразование иконок в svg формат и “сетки” в макетах9:41

    В этом уроке мы разберем такое понятие как "сетки" в макетах и что делать с иконками в плохом качестве

  • Установка и настройка редактора кода18:29

    В этом уроке мы установим и настроем самые важные инструменты для работы с кодом

  • Создаем свой первый проект. Основы HTML38:00

    В этом уроке мы создадим свой первый проект и настроим файловую структуру

  • Основные теги HTML на практике59:24

    В этом уроке мы изучим базовые тэги в HTML, которые необходимо знать

  • Тест на закрепление основных тэгов
  • Семантика и семантические теги HTML519:54

    В этом уроке мы разберем семантические тэги в HTML5

  • Тест на закрепление семантических тэгов
  • Основы CSS на практике42:50

    В этом уроке мы изучим все самое необходимое для начала работы с CSS

  • Тест на закрепление знаний о CSS
  • Блочная модель CSS27:57

    В этом уроке мы разберемся что такое блочная модель и из чего она состоит

  • Developer Tool. Что это и как с ним работать?18:57

    В этом уроке мы разберем один из самых нужных и полезных инструментов

  • Блочная модель CSS. Часть 235:02

    В этом уроке мы продолжим разбор блочной модели и узнаем все до мельчайших деталей

  • Тест на закрепление знаний о блочной модели
  • Позиционирование элементов в CSS. Принцип карточной колоды26:10

    В этом уроке мы разберем позиционирование элементов и его виды

  • Выравнивание элементов по вертикали. История: верстка таблицами и float'ами16:15

    В этом уроке мы изучим как выравнивать элементы по вертикали и немного истории

  • Единицы измерения CSS31:08

    В этом уроке мы обсудим единицы измерения, которые чаще всего используются в css

  • Специфичность CSS селекторов15:26

    В этом уроке мы изучим крайне важную тему - специфичность css селекторов

  • Промежуточный тест на закрепление знаний
  • Автоматическое форматирование кода10:14

    В этом уроке мы настроим автоматическое форматирование кода

  • Практика. Создаем сайт на чистом HTML и CSS1:29:08

    В этой большой практике мы начнем создавать свой первый реальный проект

  • Технология Flexbox19:19

    В этом уроке мы изучим все необходимые основы технологии flexbox

  • Применение Flexbox в проекте17:16

    В этом уроке мы применим всю изученную информацию по flexbox

  • Практика. Заканчиваем сайт на чистом HTML и CSS + домашнее задание52:46

    В этом уроке мы продолжим работать с проектом и получим шанс хорошо поработать самостоятельно

  • Свойство object-fit и работа с изображениями20:48

    В этом уроке мы поговорим про свойство object-fit и как работать с изображениями в разных условиях

  • Нормализация стилей normalize.css и аналоги16:36

    В этом уроке мы обсудим нормализацию стилей и приведение их к общему формату для всех браузеров

  • Подключение файлов через cdn-сервера. Различия и преимущества10:34

    В этом уроке мы обсудим локальное и удаленное подключение любых файлов, узнаем что такое cdn-сервисы

  • Работа со шрифтами в web'e42:38

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

  • Заключительный тест модуля

Requirements

  • Желание освоить создание сайтов и начать зарабатывать на этом
  • Никакой другой предварительной подготовки: все что нужно мы настроим и выучим

Description

Курс полностью перезаписан и новая версия выложена 06.2025


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

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

Для кого подойдет этот курс?

  • Если вы ничего не знаете про создание сайтов или веб-приложений, но хотите начать

  • Если вы новичок в html/css, хотите быстро их освоить и начать применять в работе

  • Если у вас был опыт в этой сфере несколько лет назад, ведь web-технологии очень быстро меняются и совершенствуются

Что внутри курса?

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

На все вопросы внутри курса отвечаю лично как можно быстрее. Так же есть телеграм канал для вопросов и обсуждений. Все обновления курса бесплатны и в автоматическом режиме.

  • мы изучим основы web-разработки: что такое web-продукт, зачем он нужен, циклы создания, как работает интернет изнутри, и многое другое

  • мы научимся работать с графическими редакторами в контексте верстки: Figma, Zeplin и тп

  • мы научимся  работать с графикой для web'a, в том числе с SVG

  • мы узнаем и поймем как использовать HTML5 и CSS3 в реальных проектах

  • мы узнаем основы JS, научимся применять его в своих проектах

  • мы научимся работать с Git и GitHub

  • мы научимся работать с технологиями FlexBox и CSS Grid, будем их использовать сразу в практике

  • мы научимся работать с новейшими фишками CSS, такими как CSS Nesting

  • мы научимся использовать препроцессоры Sass/Scss в своих проектах

  • мы научимся создавать мобильную адаптацию сайтов и приложений

  • мы научимся использовать методологии  (БЭМ и тп)

  • мы поймем, как создавать многостраничные сайты и принципы посадки под CMS(системы управления сайтами)

  • мы научимся автоматизировать процессы при помощи планировщиков задач (Vite, Gulp)

  • мы научимся оптимизировать скорость работы сайтов и проводить валидацию верстки по стандартам w3c

  • мы научимся следовать последним стандартам доступности a11y

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

  • мы создадим ваш личный сайт-портфолио

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

Почему стоит начать свое обучение уже сейчас?

Создание web-интерфейсов (верстка) -  востребованный на рынке труда навык, без которого не обходится ни один веб-продукт. Мало того, что изучив всю данную вам информацию вы уже сможете создавать свои продукты и работать как на фрилансе, так и в web-студии, но и вы заложите базу для дальнейшего обучения. Владея этими навыками вы сможете освоить любую CMS (WordPress, ModX...) изнутри, сможете понять и изучить как работает backend часть, и сможете создавать визуальную часть приложений, написанных на JavaScript фреймворках и библиотеках (ведь там везде используется верстка как и на обычных сайтах, в том числе и на мобильных приложениях).

Who this course is for:

  • Для тех людей, кто вообще не знаком с темой создания сайтов и web-продуктов
  • Для тех людей, кто уже делал свои первые попытки создания сайтов