WEB-разработчик 2020
4.8 (2,356 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,122 students enrolled

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

Освой все, что необходимо для создания web-сайтов и начни зарабатывать на этом!
4.8 (2,370 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
6,122 students enrolled
Last updated 4/2020
Russian
Current price: $125.99 Original price: $179.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 23 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Узнаешь основы web-разработки: что такое web-сайт, зачем он нужен, циклы создания и многое другое
  • Научишься работать с графическими редакторами в контексте верстки: Photoshop, Zeplin, Figma, Avocode...
  • Научишься работать с графикой для web'a, в том числе с SVG
  • Узнаешь и поймешь как использовать HTML и CSS в реальных проектах (теория + настоящая практика)
  • Узнаешь основы JS и Jquery, научишься применять их в своих проектах
  • Научишься работать с Git и GitHub
  • Научишься работать с Bootstrap 4 и с технологией FlexBox
  • Научишься использовать препроцессоры Sass/Scss/Less в своих проектах
  • Научишься создавать мобильную адаптацию сайтов и приложений
  • Научишься использовать методологию БЭМ
  • Поймешь, как создавать многостраничные сайты и принципы посадки под CMS(системы управления сайтами)
  • Научишься автоматизировать процессы при помощи планировщика задач Gulp
  • Научишься оптимизировать скорость работы сайтов и проводить валидацию верстки по стандартам w3c
  • Научишься работать с множеством готовых плагинов, устанавливать гео-карты на сайте, работать со шрифтами и многое другое...
  • Все полученные знания даются в современном формате и сразу закрепляются на практике
  • Бонус: получишь несколько реальных макетов для практики
Course content
Expand all 69 lectures 22:57:13
+ Модуль 1. Погружение в тему создания web-продуктов. Изучение основ HTML и CSS
21 lectures 07:04:46

В этом уроке мы настроим редактор кода VSCode и установим окружение Node.js

Preview 07:53

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

Работа с Adobe Photoshop в вебе
21:13

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

Работа с современными редакторами: Avocode, Zeplin, Figma...
20:34
Бонус. Что такое "сетки" и преобразование иконок в SVG формат
08:12

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


Создаем свой первый проект. Основы HTML
19:33

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

Основные теги HTML на практике
39:48

В этом уроке мы познакомимся с одним из самых значимых нововведений HTML5 - семантические теги.

Семантические теги HTML5
10:49

В этом уроке мы познакомимся с языком стилей - CSS и начнем применять его на практике.

Основы CSS на практике
30:47

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

Блочная модель CSS
12:53

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

Developer Tool. Что это и как с ним работать?
13:37

В этом уроке мы узнаем, что за свойство такое display и как элементы разделяются на блочные, строчные и строчно-блочные.

Блочная модель CSS. Часть 2
18:51

В этом уроке мы научимся работать с позиционированием элементов на страницы при помощи свойства position.

Позиционирование элементов в CSS. Принцип карточной колоды
21:14

В этом уроке мы разберем, зачем нужна табличная верстка, обтекание элементов и как выравнивать строчно-блочные элементы по вертикали.

Выравнивание элементов по вертикали. Верстка таблицами и float'ами
08:35

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

Бонус. Единицы измерения CSS
10:28

В этом уроке мы начинаем верстку реального макета, используя чистый HTML и CSS.

Практика. Создаем сайт на чистом HTML и CSS
01:08:11

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

Технология Flexbox и применение её на макете
13:53

В этом уроке мы заканчиваем предыдущую верстку на чистом HTML и CSS и готовимся к выполнению домашнего задания.

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

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

Сброс стилей reset.css/normalize.css
09:04

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

Подключение шрифтов на сайт
30:55
+ Модуль 2. Ускорение работы в несколько раз
19 lectures 06:37:52
Зачем нам этот модуль
01:03

В этом уроке мы познакомимся с самой популярной библиотекой для верстки - Bootstrap версии 4.

Библиотека Bootstrap 4
34:28

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

Практика. Новый проект с использованием сетки Bootstrap 4
01:03:11
Как правильно формировать пути к файлам
05:28

В этом уроке мы познакомимся с понятием препроцессоров, как их правильно использовать и зачем.

Препроцессоры. SASS/SCSS/LESS
30:43

Если вы сталкиваетесь с ошибкой компиляции - проверьте отступы в коде.

Если у вас ошибка при компиляции SASS кода
02:55

В этом уроке мы познакомимся с вендорными префиксами в CSS

Вендорные префиксы в CSS
04:06

В этом уроке мы продолжим верстать макет, но уже применяя препроцессор SASS

Практика. Продолжаем работу и используем препроцессор SASS
31:40

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

Псевдоклассы и псевдоэлементы в CSS
17:11

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

Практика. Используем псевдоэлементы и псевдоклассы в проекте
42:32

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

Как работать с иконками. Иконочные шрифты
20:18

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

Адаптация проектов под различные устройства
17:31

В этом уроке мы познакомимся с понятием Pixel perfect верстка

Pixel Perfect верстка
03:44

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

Адаптация при помощи Bootstrap
11:21

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

Практика. Адаптация проекта. Часть 1
42:15

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

Практика. Адаптация проекта. Часть 2
44:45

В этом уроке мы установим локальные ссылки и фивиконку на наш сайт.

Локальные ссылки и favicon
05:46

В этом уроке мы поговорим про такое понятие, как User Experience (UX)

UX. Дорабатываем мелочи
06:36

В этом уроке мы познакомимся с такими понятиями как хостинг, домен и кеш. Опубликуем наш сайт в интернете и поработаем с GitHub Pages.

Публикуем сайт в интернете. Домен. Хостинг. GitHub Pages и сброс "кеша"
12:19
+ Модуль 3. Необходимые технологии для веб-разработчика и продвинутая практика
29 lectures 09:14:35
Зачем нам этот модуль
01:09

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

В этом уроке мы познакомимся с СКР - Git и сервисом для хранения своих репозиториев - GitHub.

Система контроля версий Git и сервис GitHub
22:23

В этом уроке мы научимся работать с GitHub репозиториями с разных компьютеров.

Как работать с GitHub с разных компьютеров, gitignore и Git Kraken
15:52

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

Планировщик задач Gulp
38:29

В этом уроке мы познакомимся с методологией БЭМ

Методология БЭМ
13:36

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

Практика. Создаем новый проект, используя Gulp, БЭМ...
37:11

В этом уроке мы разберем ошибку, когда не отображаются картинки

Если у вас не работают картинки
02:10

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

Формы на сайтах
32:03

В этом уроке мы познакомимся с языком программирования JavaScript

Знакомимся с языком программирования JavaScript
31:10
Как можно освоить JavaScript?
01:20

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

Практика. Создаем слайдер на сайте. Slick-слайдер
34:50
Если у вас не работают скрипты
03:14

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

Практика. Альтернативные варианты слайдеров
30:09

В этом уроке мы начнем создавать табы на сайте.

Практика. Создаем табы на сайте. Часть 1
31:59

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

Практика. Создаем табы на сайте. Часть 2
37:16

В этом уроке мы будем создавать Google и Яндекс карты на сайте

Создаем интерактивные карты на сайте
20:13

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

Практика. Создаем модальные окна на сайте
37:56

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

Валидация форм
22:43

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

Маска ввода номера на сайте
05:29

В этом уроке мы познакомимся с понятием "Локальный сервер" и установим его для дальнейшей работы

Локальные сервера
08:07

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

Практика. Отправка писем с сайта
18:45

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

Если у вас ошибка при отправке формы
11:55

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

Плавный скролл по ссылкам и элемент "вверх"
11:22

В этом уроке мы научимся создавать красивы и динамичные анимации при помощи CSS3

Анимации на сайтах при помощи CSS3
12:05

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

Библиотеки для работы с анимациями
11:09

В этом уроке мы научимся проводить валидацию нашей верстки при помощи официального валидатора

Валидация сайта
07:34

В этом уроке мы загрузим наш сайт на реальный хостинг, узнаем, как работать с FTP-менеджерами и что такое SSL-сертификат

Загружаем сайт на реальный хостинг. Настройка домена, что такое FTP и SSL
14:49

В этом уроке мы заканчиваем работу над нашим сайтом, оптимизируем скорость загрузки и донастраиваем gulpfile.js

Оптимизация скорости загрузки сайта, доработка gulpfile
38:10
Что делать дальше?
01:27
Requirements
  • Желание освоить создание сайтов и начать зарабатывать на этом
  • Никакой другой предварительной подготовки: все что нужно мы настроим и выучим
Description

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • мы научимся работать с Bootstrap 4 и с технологией FlexBox

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

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

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

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

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

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

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

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

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

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

Who this course is for:
  • Для тех людей, кто вообще не знаком с темой создания сайтов
  • Для тех людей, кто уже делал свои первые попытки создания сайтов