Расширенный Web-разработчик с индивидуальным проектом

5.0
(4 Reviews)

Duration 57 h 34 s

Price

130 € Buy now
Расширенный Web-разработчик с индивидуальным проектом

About Course

 

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


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

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

 

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

 

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

 

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

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

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

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

 

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

 

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

     

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

 

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

     

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

 

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

     

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

 

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

    Это будет часть (или весь) реально существующего проекта, с реально существующими проблемами. Дальше будем работать в формате код-ревью на каждой стадии и я от вас не отстану, пока вы не дойдете до готового продукта 🙂
  • Со всеми вопросами внутри курса работаем в небольшом закрытом чате, где вы всегда сможете получить помощь. Этот курс идет с полной поддержкой
  • Никаких ограничений по времени. Занимаетесь в удобном для вас темпе, а доступ к материалам никуда не исчезает!

 

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

 

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

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

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

 

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

 

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

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

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

 

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

 

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

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

Course content

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

Pass the quiz to get a certificate

Subject

Финальный тест на курсе web-dev

Pass the quiz
Ivan Petrychenko

Ivan Petrychenko

Fullstack developer

Course Instructor

Fullstack developer & content creator