4.85 из 5
4.85
8501 отзыв

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

Освойте все, что необходимо для создания web-сайтов и начни зарабатывать на этом!
Автор курса:
Иван Петриченко
21 333 студента зачислены
Узнаете основы web-разработки: что такое web-сайт, зачем он нужен, циклы создания и многое другое
Научитесь работать с графическими редакторами в контексте верстки: Photoshop, Zeplin, Figma, Avocode...
Научитесь работать с графикой для web'a, в том числе с SVG
Узнаете и поймете как использовать HTML и CSS в реальных проектах (теория + настоящая практика)
Узнаете основы JS и Jquery, научитесь применять их в своих проектах
Научитесь работать с Git и GitHub
Научитесь работать с Bootstrap 4/5 и с технологией FlexBox
Научитесь использовать препроцессоры Sass/Scss/Less в своих проектах
Научитесь создавать мобильную адаптацию сайтов и приложений
Научитесь использовать методологию БЭМ
Поймете, как создавать многостраничные сайты и принципы посадки под CMS(системы управления сайтами)
Научитесь автоматизировать процессы при помощи планировщика задач Gulp
Научитесь оптимизировать скорость работы сайтов и проводить валидацию верстки по стандартам w3c
Научитесь работать с множеством готовых плагинов, устанавливать гео-карты на сайте, работать со шрифтами и многое другое...
Все полученные знания даются в современном формате и сразу закрепляются на практике
Бонус: получите несколько реальных макетов для практики

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Модуль 1. Погружение в тему создания web-продуктов. Изучение основ HTML и CSS

1
Зачем нам этот модуль
2
Классификация сайтов. Этапы создания.
3
Установка и настройка редактора кода

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

4
Работа с Adobe Photoshop в вебе

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

5
Работа с современными редакторами: Avocode, Zeplin, Figma...

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

6
Бонус. Что такое "сетки" и преобразование иконок в SVG формат
7
Создаем свой первый проект. Основы HTML

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


8
Основные теги HTML на практике

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

9
Тест на закрепление основных тэгов
10
Семантические теги HTML5

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

11
Тест на закрепление семантических тэгов
12
Основы CSS на практике

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

13
Тест на закрепление знаний о CSS
14
Блочная модель CSS

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

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

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

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

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

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

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

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

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

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

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

21
Специфичность CSS селекторов

В этом уроке мы поговорим про специфичность селекторов в css

22
Промежуточный тест на закрепление знаний
23
Практика. Создаем сайт на чистом HTML и CSS

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

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

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

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

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

26
Сброс стилей reset.css/normalize.css

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

27
Подключение шрифтов на сайт

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

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

Модуль 2. Ускорение работы в несколько раз

1
Зачем нам этот модуль
2
Библиотека Bootstrap 4

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

3
Про обновление Bootstrap до пятой версии

В этом уроке мы поговорим про обновление этой библиотеки и как оно нас касается

4
Практика. Новый проект с использованием сетки Bootstrap

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

5
Как правильно формировать пути к файлам
6
Препроцессоры. SASS/SCSS/LESS

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

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

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

8
Вендорные префиксы в CSS

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

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

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

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

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

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

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

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

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

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

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

14
Pixel Perfect верстка

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

15
Адаптация при помощи Bootstrap

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

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

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

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

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

18
Локальные ссылки и favicon

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

19
UX. Дорабатываем мелочи

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

20
Публикуем сайт в интернете. Домен. Хостинг. GitHub Pages и сброс "кеша"

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

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

Модуль 3. Необходимые технологии для веб-разработчика и продвинутая практика

1
Зачем нам этот модуль
2
Система контроля версий Git и сервис GitHub

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

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

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

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

4
Планировщик задач Gulp

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

5
Методология БЭМ

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

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

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

7
Если у вас не работают картинки

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

8
Формы на сайтах

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

9
Тест на закрепление материала
10
Знакомимся с языком программирования JavaScript

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

11
Как можно освоить JavaScript?
12
Практика. Создаем слайдер на сайте. Slick-слайдер

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

13
Если у вас не работают скрипты
14
Практика. Альтернативные варианты слайдеров

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

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

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

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

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

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

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

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

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

19
Валидация форм

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

20
Маска ввода номера на сайте

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

21
Локальные сервера

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

22
Практика. Отправка писем с сайта

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

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

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

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

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

25
Анимации на сайтах при помощи CSS3

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

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

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

27
Про обновления и animate.css

В этом уроке мы поговорим про обновление библиотеки анимаций animate.css

28
Валидация сайта

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

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

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

30
Оптимизация скорости загрузки сайта, доработка gulpfile

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

31
Тест на закрепление материала

Модуль 4. CSS Grid и сайт-портфолио

1
Зачем этот модуль

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

2
Снова про сетки и CSS Grid

В этом уроке мы поговорим про CSS Grid и создадим свою первую сетку

3
Единица гибкости (fr) и repeat()

В этом уроке мы поговорим про единицу гибкости и функцию repeat()

4
Явные и неявные гриды

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

5
Функция minmax() и масштабирование треков

В этом уроке мы поговорим про важную функцию minmax()

6
Позиционирование треков

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

7
Выравнивание треков

В этом уроке мы поговорим о том, как можно выравнивать наши элементы внутри сетки

8
Grid Area и подсетки. Адаптация гридов

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

9
Еще раз про meta-тэги и фавикон. OG tags

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

10
Тест на закрепление материала
11
Подготовка к созданию портфолио

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

12
Создаем первый экран, часть 1

В этом уроке мы сверстаем первый экран проекта

13
Создаем первый экран, часть 2 (анимация меню)

В этом уроке мы сверстаем первый экран проекта

14
Используем CSS Grid для создания второго экрана

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

15
Создаем третий экран портфолио

В этом уроке мы сверстаем третий экран проекта

16
Реализуем скрипт автоматического пересчета процентов

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

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.9
4.9 из 5
8501 Рейтинги

Детальный Рейтинг

Звезды 5
6736
Звезды 4
1535
Звезды 3
169
Звезды 2
22
Звезды 1
39
c474d8398d9156f033b6982431523913
3-дневная гарантия возврата денег

Этот курс включает:

34 часов видео по запросу
Полный пожизненный доступ
Доступ с мобильного
Сертификат об окончании
WEB-разработчик 2022
Цена:
0.90 ₽ 13,990 ₽
Layer 1