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

5.0
(23 Reviews)
Ivan Petrychenko

Author

Ivan Petrychenko

Fullstack developer

Fullstack developer & content creator

 

Освойте все, что необходимо для создания web-продуктов 


 

Любые интерфейсы, которые вы видите в интернете на любом устройстве, созданы при помощи HTML и CSS или продуктов на их основе

 

Кому подойдет этот курс?

 

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

 

Не уверены, что вам подойдет этот курс?

Напишите мне лично и я отвечу на все ваши вопросы 📩

Консультация

Для оплаты в криптовалюте или другим методом свяжитесь со мной

 

Что вы найдете внутри курса?

 

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

     

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

 

  • Мы изучим основы web-разработки: что такое web-продукт, зачем он нужен, циклы создания, как работает интернет изнутри, и многое другое
  • Научимся работать с графическими редакторами в контексте верстки: figma, Zeplin и тп
  • Научимся работать с графикой для web'a, в том числе с SVG

     

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

 

  • Узнаем и поймем как использовать HTML5 и CSS3 в реальных проектах
  • Узнаем основы JS, научимся применять его в своих проектах
  • Научимся работать с Git и GitHub
  • Научимся работать с технологиями Flexbox и CSS Gridбудем их использовать сразу в практике
  • Научимся работать с новейшими фишками CSS, такими как CSS Nesting
  • Научимся использовать препроцессоры SASS/SCSS в своих проектах

     

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

 

  • Мы научимся создавать мобильную адаптацию сайтов и приложений
  • Научимся использовать методологии (Atomic design, BEM и тп)
  • Поймем, как создавать многостраничные сайты и принципы посадки под CMS (системы управления сайтами)
  • Научимся автоматизировать процессы при помощи планировщиков задач (Vite, Gulp)
  • Научимся оптимизировать скорость работы сайтов и проводить валидацию верстки по стандартам w3c
  • Научимся следовать последним стандартам доступности a11y
  • Научимся работать с множеством готовых плагинов, устанавливать гео-карты на сайте, работать со шрифтами и многое другое...
  • Создадим ваш личный сайт-портфолио
  • Никаких ограничений по времени. Занимаетесь в удобном для вас темпе, а доступ к материалам никуда не исчезает!

 

Ключевое в этом курсе

 

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

Последняя редакция курса - это объединение моего опыта, всех вопросов и практических задач от всех студентов, которые проходили этот курс. Ведь первая редакция была аж 2018м году

Отсюда и еще один плюс: у вас вся информация по одной теме будет в одном месте

 

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

 

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

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

Немного подробнее рассказал в видео-формате:

 

Курс так же доступен и в приложении на IOS / Android для комфортного прохождения где угодно

 

Буду рад помочь освоить вам новый навык и стать специалистом!

Остались вопросы? Напишите мне лично, буду рад ответить

Course program

Duration 47 h 7 m 27 s

videoЗачем нам этот модуль4 m 12 sFreevideoСовременная разработка сайтов, веб-приложений и других веб-продуктов. Перспективы4 m 40 sFreevideoПро конструкторы, искусственный интеллект и перспективы5 m 13 sFreevideoКлассификация и этапы создания сайтов/веб-приложений36 m 43 svideoКак все это работает изнутри: протоколы, клиент-серверная архитектура и http16 m 44 sFreevideoКак все это работает изнутри: html, css, js и тд.6 m 31 sFreevideoРабота с графикой: виды, дизайн-макеты и тп20 mFreevideoСервисы для работы с графикой30 m 38 svideo(Дополнительно) Преобразование иконок в svg формат и “сетки” в макетах9 m 41 svideoУстановка и настройка редактора кода18 m 30 svideoСоздаем свой первый проект. Основы HTML38 mvideoОсновные теги HTML на практике59 m 25 svideoТест на закрепление основных тэгов0 svideoСемантика и семантические теги HTML519 m 54 svideoТест на закрепление семантических тэгов0 svideoОсновы CSS на практике42 m 50 svideoТест на закрепление знаний о CSS0 svideoБлочная модель CSS27 m 57 svideoDeveloper Tool. Что это и как с ним работать?18 m 57 svideoБлочная модель CSS. Часть 235 m 3 svideoТест на закрепление знаний о блочной модели0 svideoПозиционирование элементов в CSS. Принцип карточной колоды26 m 10 svideoВыравнивание элементов по вертикали. История: верстка таблицами и float'ами16 m 15 svideoЕдиницы измерения CSS31 m 8 svideoСпецифичность CSS селекторов15 m 27 svideoПромежуточный тест на закрепление знаний0 svideoАвтоматическое форматирование кода10 m 14 svideoПрактика часть 1. Создаем сайт на чистом HTML и CSS46 m 45 svideoПрактика часть 2. Создаем сайт на чистом HTML и CSS42 m 24 svideoТехнология Flexbox19 m 19 svideoПрименение Flexbox в проекте17 m 16 svideoПрактика. Заканчиваем сайт на чистом HTML и CSS + домашнее задание52 m 46 svideoСвойство object-fit и работа с изображениями20 m 48 svideoНормализация стилей normalize.css и аналоги16 m 37 svideoПодключение файлов через cdn-сервера. Различия и преимущества10 m 34 svideoРабота со шрифтами в web'e42 m 38 svideoЗаключительный тест модуля0 s
videoЗачем нам этот модуль1 mvideoКак чистый CSS постепенно догоняет инструменты2 m 39 svideoCSS Nesting18 m 57 svideoПрактика. Создаем новый проект6 m 26 svideoCSS variables (custom properties)25 m 53 svideoПрактика. Создаем первые две секции1 h 3 m 55 svideoCSS Grid. Начало10 m 39 svideoCSS Grid. Единица гибкости (fr) и repeat()8 m 44 svideoЧто использовать: Grid или Flexbox8 m 36 svideoПрактика. Создаем grid-секцию28 m 31 svideoCSS Grid. Явные и неявные гриды10 m 22 svideoCSS Grid. Функция minmax()8 m 6 svideoCSS Grid. Масштабирование треков, auto-fit и auto-fill6 m 26 svideoCSS Grid. Позиционирование треков16 m 10 svideo(Дополнительно) CSS Grid. Выравнивание треков12 m 23 svideo(Дополнительно) CSS Grid. Grid Area и подсетки12 m 33 svideoТест на закрепление материала0 svideoПсевдоклассы в CSS20 m 13 svideoПрименяем псевдоклассы в проекте, CSS transition11 m 4 svideoПсевдоэлементы в CSS12 m 44 svideoПрименяем псевдоэлементы в проекте26 m 43 svideoПрактика. Заканчиваем базовую верстку. Функция calc()37 m 2 svideoПро футер и переменную1 mvideoВарианты работы с иконками31 m 19 svideoАдаптация проектов под различные устройства28 m 5 svideoЧто такое Pixel Perfect12 m 28 svideoБольшая практика. Адаптация проекта. Часть №11 h 3 m 30 svideoTip. Nesting при адаптации1 mvideoАдаптация проекта. Часть №211 m 31 svideoЛогические свойства размеров18 m 14 svideoЛокальные ссылки, favicon и smooth-behavior15 m 43 svideoСистемы контроля версий. Git30 m 37 svideoСервисы для хранения репозиториев. github / gitlab и другие29 m 23 svideoПубликуем сайт в интернете. Домен. Хостинг. Сброс "кеша"27 m 31 svideoКак работать с GitHub с разных компьютеров, gitignore и Git UI30 m 47 svideoЗаключительный тест модуля0 s
videoЗачем нам этот модуль1 mvideoПрепроцессоры в CSS (SASS/SCSS и другие)27 m 23 svideoМетодологии названия классов (BEM, Atomic и тд) конвенция названий19 m 15 svideoЧто такое сборщики проектов, планировщики задач и тд.4 m 30 svideoНастраиваем Vite для нового проекта и разбор нюансов41 m 22 svideo🤖 ИИ для конфигураций1 mvideoОбсуждаем и подготавливаем новый проект3 m 40 svideoЗаготовка под проект0 svideoЧто такое Mobile first14 m 58 svideoПрактика. Разбираемся с UI Kit / Style Kit и остальными нюансами сборки41 m 27 svideoПрактика. Создаем первую секцию и переиспользуемые компоненты1 h 9 m 43 svideoФункция clamp для быстрой адаптации (+ min()/max())21 m 10 svideoПрактика адаптации1 h 10 svideoГотовые инструменты для ускорения работы со стилями43 m 32 svideo🤖 ИИ для списка инструментов2 mvideoПрактика1 h 7 m 41 svideoВ дополнение к практике1 mvideoПеречень веб-компонентов и их названий + дз9 m 14 svideoФормы в web-продуктах59 m 32 svideoТест на закрепление материала0 svideoЗнакомимся с языком программирования Javascript40 m 25 svideoБольшая практика. Создаем и разбираем компонент-слайдер. Часть 139 m 35 svideoБольшая практика. Создаем и разбираем компонент-слайдер. Часть 247 m 1 svideoДополнительная строка настройки слайдера1 mvideoРеальные процессы в работе2 mvideoАльтернативные варианты функционала8 m 36 svideoБольшое домашнее задание. Создаем футер7 m 35 svideoПрактика. Создаем гамбургер-меню. Трансформации41 m 15 svideoПрактика. Создаем табы на странице35 m 27 svideoПроверьте свою работу 🙂3 mvideoПрактика. Создаем записи блога и обсуждаем нюансы динамического контента58 m 17 svideoПрактика. Создаем интерактивные карты. Iframe20 m 59 svideoПрактика. Валидация форм37 m 58 svideoРазбираем интересные моменты д/з, :auto-fill9 m 51 svideoПрактика. Отправка формы c сайта33 m 28 svideoАнимации при помощи CSS323 m 6 svideoБиблиотеки для работы с анимациями и AI-tips22 m 5 svideoВалидация, оценка и оптимизация веб-продукта. Метрики34 m 19 svideoМета-тэги и OG tags, расширенный favicon14 m 29 svideoЗагружаем web-продукт на реальный хостинг. Что такое FTP32 m 36 svideoЗаключительный тест курса0 svideoЗаключение. ИИ для ускорения работы. Интерфейсы в разных технологиях. Проекты3 m 59 s
certificate

Certificate

A certificate is given at the end of the course.

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

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

5.0
(23 Reviews)
Ivan Petrychenko

Author

Ivan Petrychenko

Fullstack developer

Fullstack developer & content creator

15 €
Buy now 15 €