Начните свой путь
к знаниям с Mohirdev
к знаниям с Mohirdev
Отправьте данные и мы свяжемся с вами в ближайшее время. Поможем подобрать курс и начать обучение.
+50,000 учеников
Рассрочка на курсы
БУДЬТЕ НА ФРОНТАХ
СВОЕЙ IT КАРЬЕРЫ
СВОЕЙ IT КАРЬЕРЫ
Пройдите наш курс и освойте все необходимые навыки для становления опытным Front-End разработчиком. Более 50 разделов практических курсов ждут вас!
Спрос на front-end разработчиков до 2029 года вырастет на
8%
Подготовьтесь к растущему спросу
Спрос на фронтенд-разработчиков неуклонно растет, и к 2029 году он увеличится на 8%. Не упустите шанс занять свою нишу в этой перспективной сфере. Наш курс предоставит вам все необходимые навыки и инструменты для успешного старта в фронтенд-разработке.
На этом курсе
вы научитесь:
вы научитесь:
HTML и CSS
Освоите структуру веб-страниц и научитесь их стилизовать.
JavaScript
Поймите, как добавить интерактивность на ваш сайт.
Git и GitHub
Научитесь версионному контролю и совместной работе.
Рассказ
от автора курса
от автора курса
В этом видео Мухаммаджавохир Суратов, опытный Front-End разработчик, расскажет о том, какие навыки и знания вы получите, пройдя его курс. Он поделится своим опытом и даст ценные советы, которые помогут вам в профессиональном развитии.
Длительность видео 02:53
Длительность видео 02:53
Сколько зарабатывает Front-end разработчик
Данные взяты из сервисов по поиску работы
Зарплата в месяц. Данные за 2023 год в Узбекистане.
Middle
$1350
Senior
$2800
Junior
$312
Соревнуйтесь
в знаниях
с учениками
в знаниях
с учениками
Покажите свои навыки и знания, соревнуясь с другими участниками курса. Таблица лидеров поможет отслеживать ваш прогресс и мотивировать двигаться вперед.
Что вы получите по окончанию курса?
Практика и опыт
Пройдите практику на реальных проектах и получите ценный опыт который повысит вашу ценность как профессионала.
Инструментарий
Знание актуальных технологий и инструментов для Front-End разработки.
Сертификация
Вы получите сертификат, подтверждающий ваши навыки и знания, что будет дополнительным плюсом при поиске работы.
А эти скиллы будут в вашем резюме:
Работа с HTML и CSS
Создание адаптивных сайтов любой сложности.
JavaScript разработка
Реализация интерактивных элементов на сайте.
Владение Git и GitHub
Версионный контроль и совместная работа над проектами.
Технологии изучаемые в процессе обучения
HTML
Основа любого веб-сайта.
Java Script
Для интерактивности и динамики.
BootStrap
Быстрая и эффективная стилизация.
CSS
Для креативного и уникального дизайна.
Sass
Продвинутая работа со стилями.
Pug
Шаблонизатор для упрощения работы с HTML.
Содержание курса
- Добро пожаловать в Mohirdev
- Просмотр уроков на компьютере
- Просмотр уроков на телефоне
- Ознакомьтесь с публичным предложением
- Присоединиться к закрытой группе
- Руководство по задаванию вопросов
- Презентация курса
- Об авторе
- Технологии, изучаемые в курсе
- Проекты, которые будут разработаны в течение курса
- Какой результат можно ожидать по окончании курса?
- Преимущества и важные моменты изучения Frontend и программирования в целом
- Знакомство с областями веб-программирования
- Последовательность этапов создания сайта
- Методы создания сайта и когда использовать каждый из них?
- Подготовка технических требований для онлайн-курса, мозговой штурм
- Создание дизайн-макета онлайн-курса в Balsamiq
- Установка Google Chrome и включение синхронизации в нем
- Установка и настройка Visual Studio Code. Размещение важных программ в панели задач
- Установка и использование программы для снимков экрана Lightshot
- Правильная организация файлов и папок проекта, установка расширения Live Server
- Правила написания элементов. Элементы, связанные с текстом
- Структурные элементы. html, head, body, DevTools
- Работа со ссылками
- Соединение с другими HTML-файлами по ссылке
- Проверка кода в HTML Validator
- Отправка проекта в архиве (zip)
- Лучшие и худшие стороны области верстки
- Знакомство с Figma. Макет Akademnashr. Описание 1-го большого задания
- Ссылка на макет Akademnashr
- Анализ отправленных работ по созданию сайта Akademnashr
- Решение задачи по созданию сайта Akademnashr. Советы по повышению производительности при написании кода
- Элементы hr и br
- Применение изученного о списке к макету Akademnashr
- Элемент div и группировка
- Применение элемента div к макету Akademnashr
- Новые секционные элементы в HTML5 - header, nav, main, section, footer и маленькое задание
- Применение секционных элементов HTML5 к макету Akademnashr
- Добавление изображений на страницу. Различие форматов изображений
- Как работает добавление изображения из папки
- Экспорт изображений с закругленными углами и важность задания width и height для изображения
- Оптимизация размера изображений. Инструмент TinyPNG
- Когда изображения добавляются не как img, а как код SVG? Оптимизация размера SVG.
- Адаптация растровых изображений для экрана Retina
- Инструмент Squoosh. Оптимизация размера изображения с помощью Squoosh и создание изображений 2x для Retina с помощью Picsum Photos
- Получение произвольных изображений с Placeholder.com
- Генерация временного текста из произвольного количества слов
- Описание задания на основе изображений для макета Akademnashr
- Применение изученного в разделе изображений к макету Akademnashr
- Список, изображения и группировка
- Что такое GitHub
- Регистрация на GitHub
- Удаление Git и связанных с ним логинов и паролей с компьютера
- Установка Git на компьютер и настройка глобальных параметров для нового профиля
- Основы Git
- Использование основ Git на примере демо-проекта
- Размещение проекта Akademnashr на GitHub
- Знакомство с Netlify. Размещение проекта Akademnashr на Netlify
- Git, GitHub и Netlify
- Основы CSS. Открытие файла для CSS и его подключение к HTML, небольшие примеры с цветами
- Указание цветов в CSS в формате RGB
- Работа с прозрачным цветом RGBA
- Указание цветов в формате HEX
- Наиболее часто используемые стили для текста
- Важность порядка кода в CSS
- Применение стилей к элементам через класс, правила именования классов
- Сила селекторов в CSS. Селектор класса против селектора элемента
- Часто используемые имена классов
- Применение нескольких классов к элементам. Выравнивание текста слева, по центру и справа
- Изменение ширины и высоты элементов
- Свойство object-fit для изображений
- Описание задания по применению изученного из CSS к макету Akademnashr
- Добавление изученного из CSS к макету Akademnashr. Часть 1
- Добавление изученного из CSS к макету Akademnashr. Часть 2
- Изменение стилей списка и применение стилей к другому элементу в зависимости от родительского элемента
- Добавление изученного из CSS к макету Akademnashr. Часть 3
- Отправка нового кода для макета Akademnashr на GitHub и размещение на Netlify
- Основы CSS
- Работа со шрифтами. Свойство font-family и наборы шрифтов
- Использование безопасных веб-шрифтов
- Использование шрифтов из Google Fonts
- Подключение нескольких шрифтов из Google Fonts к проекту
- Применение глобальных стилей для текста к тегу body
- Наследование свойств в CSS
- Описание задания по добавлению CSS для шрифтов к макету Akademnashr
- Решение задачи по добавлению CSS для шрифтов к макету Akademnashr
- Отправка решенного кода на GitHub
- Шрифты и наследуемые свойства в CSS
- Подготовка к изучению flexbox. Использование принципа DRY в CSS на маленьком примере
- Свойства display flex и justify-content
- Свойство align-items в flex
- Применение flex, justify-content и align-items к макету Akademnashr
- Свойство flex-wrap
- Принцип DRY и flexbox в CSS
- CSS transition
- Свойство outline
- Свойство opacity. Различие между opacity и прозрачным цветом
- Добавление стилей для состояний hover и active в макет Akademnashr. Изменение цвета SVG иконок
- Свойство border
- Изменение outline стилей в макете Akademnashr
- Свойство padding
- Свойство border-radius
- Различия между display inline и block. Знакомство с display inline-block
- Применение padding, border и border-radius к макету Akademnashr
- Обзор Code Review и issue в репозитории на GitHub
- О NormalizeCSS
- Знакомство со свойством margin
- Применение NormalizeCSS и margin к макету Akademnashr
- Удаление отступа под изображениями и внесение изменений в макет Akademnashr
- О явлении "схлопывания" отступов (margin collapse)
- Какой отступ и с какой стороны применять
- О box model и свойстве box-sizing
- Недостатки свойства box-sizing по умолчанию и их коррекция
- Когда использовать padding, а когда margin
- Применение padding и margin в сокращенной форме
- Особенность значения auto для margin
- Что такое контейнер и когда его использовать
- Свойства box-shadow и text-shadow
- Применение всех изученных тем к макету Akademnashr. Финальное улучшение
- Репозиторий проекта и страница на Netlify
- Ссылка на макет AnsorMed
- Проект AnsorMed. Подготовка начального состояния, размещение на GitHub и Netlify
- Проект AnsorMed. Подключение шрифтов проекта и глобальные стили для обычного текста
- Проект AnsorMed. Верстка верхней части сайта (HTML)
- Проект AnsorMed. Стили для верхней части сайта
- Проект AnsorMed. Полная верстка нижней части сайта
- Проект AnsorMed. Верстка блока hero
- Проект AnsorMed. Верстка блока услуг
- Проект AnsorMed. Добавление блока CTA. Финальный проект
- Репозиторий проекта и страница на Netlify
- Установка расширения TODO Tree
- Упрощение размещения галереи изображений с помощью отрицательного отступа в CSS, используя принцип DRY
- Свойство flex-direction
- Свойство flex-grow
- Свойство flex-shrink
- Создание закрепленного подвала (Sticky footer)
- Свойство order
- Практика работы с сайтом N24 и элементами формы
- Ссылка на макет N24
- Создание сайта N24. Глобальные настройки. Верхняя часть заголовка сайта. Основы работы с form, input, label и button
- Добавление формы поиска и стилей фокуса для интерактивных элементов. Sitenav и site-header-banner
- Карточки новостей news-grid в HTML
- Стили карточек новостей new-grid. Раздел Notifications
- Создание глобального раздела новостей на сайте N24
- Полная версия сайта N24 с глобальным разделом новостей и боковой панелью
- Размещение изображения retina на фоне
- Когда использовать img и когда background-image. Размещение иконок как фоновые изображения
- Размещение декоративных иконок с помощью элемента img. Вопросы по кнопкам и flex
- Псевдоэлементы - before и after
- Ссылка на макет Articles
- Создание репозитория шаблонов. Демо
- Создание стартового шаблона CSS
- Использование репозитория шаблонов. Создание геройской части макета Articles. Подключение шрифтов. Добавление отступа герою
- Полная версия раздела последних видео макета Articles
- Использование свойства counter в CSS
- Подключение шрифтов с помощью @font-face. Введение
- Подключение шрифта из Google Fonts с помощью @font-face. Использование сервиса Google Webfonts Helper
- Элементы формы. Повторное использование input и select. Checkbox input, fieldset и legend
- Radio input
- Элемент datalist
- Элемент textarea
- Макет N24. HTML часть site-footer
- Макет N24. Стили site-footer
- Макет N24. Страница news-list
- Макет N24. Форма контактов
- Макет N24. Контактная информация
- Макет N24. Поле поиска и размещение фонового изображения в notifications-cta
- Минификация в CSS
- Префиксация и минификация стилей проектов Akademnashr и AnsorMed
- Пользовательские свойства в CSS. Часть 2
- Применение пользовательских свойств в проекте Akademnashr. Применение пользовательских свойств в проекте N24
- Ссылка на макет Apple Watch
- Проект Apple Watch. Site-header
- Проект Apple Watch. Hero
- Проект Apple Watch. Features
- Проект Apple Watch. Promo и runners
- Ссылка на макет Intro form
- Проект Intro form. Общие работы и героический раздел. Форма регистрации в проекте Intro form
- Ссылка на макет CoffeeRoasters
- Проект CoffeeRoasters. Заголовок сайта и героический раздел
- Проект CoffeeRoasters. Index-collection
- Проект CoffeeRoasters. Index-features
- Проект CoffeeRoasters. Как это работает
- Проект CoffeeRoasters. Подвал сайта
- Размещение градиентного фона в CSS
- Применение стилей с градиентными цветами для текста
- Создание сайта с вариантом темной темы
- JavaScript. Введение
- JavaScript. Поиск элемента на странице, его именование и изменение текста
- JavaScript. Знакомство с событиями
- JavaScript. Добавление и удаление классов для элементов
- Свойство transform
- Важность последовательности значений в свойстве transform и transform-origin
- Значение perspective в transform
- Создание эффекта открывающегося окна с помощью CSS transform
- Ссылка на макет "Countries"
- Проект Countries. Глобальные стили, подготовка шрифтов и изображений
- Проект Countries. Заголовок сайта и SVG код в разделе intro
- Размещение изображений в виде SVG кода. Изменение свойств SVG изображения в CSS
- Проект Countries. Изменение цвета рамки SVG в заголовке сайта в соответствии с темой сайта
- Проект Countries. Включение и выключение темного режима сайта
- Проект Countries. Фильтр
- Проект Countries. Index-countries
- Проект Countries. Стили раздела Index-countries
- Проект Countries. Страница страны
- Присвоение индивидуального стиля checkbox и radio
- Селектор валидного input
- Селекторы невалидного input и placeholder-shown
- Атрибут disabled и задача по JS
- Решение задачи по атрибуту disabled и JS
- Как работают селекторы + и ~
- Селектор :checked
- Создание пользовательского checkbox
- Дополнительные видео по созданию индивидуального стиля для checkbox и radio (обязательно к просмотру!)
- Присвоение индивидуального стиля checkbox и radio
- Селектор валидного input
- Селекторы невалидного input и placeholder-shown
- Атрибут disabled и задача по JS
- Решение задачи по атрибуту disabled и JS
- Как работают селекторы + и ~
- Селектор :checked
- Создание пользовательского checkbox
- Дополнительные видео по созданию индивидуального стиля для checkbox и radio (обязательно к просмотру!)
- Свойство position. static и relative position
- position absolute
- К чему относится position absolute
- Корректировка порядка элементов при наложении и z-index
- Описание упражнений по теме position
- Решение упражнения интерфейса стиральной машины
- Решение упражнения страницы настроек профиля
- Ссылка на макет Pricing component with toggle
- Решение упражнения Pricing component. Часть цен
- Решение упражнения Pricing component. Создание переключателя
- Решение упражнения Pricing component. Изменение цен в JS в зависимости от значения переключателя
- Добавление нововведений по position в макеты Akademnashr, CoffeeRoasters и Countries
- z-index stacking
- Основы выпадающего меню
- Создание меню на сайте Mover.uz
- position fixed
- position sticky
- Создание модального элемента
- Свойство overflow и position absolute
- Создание треугольника в CSS
- Дополнительные видеоуроки по transform, transition и position в CSS (обязательно к просмотру!)
- Ссылка на макет Job listing
- Создание главной страницы макета Job Listings
- Создание модали макета N24
- Закрытие модали макета N24 при нажатии кнопки
- Почему элементам, активирующим JS, присваивается класс с префиксом js-
- Защита event listener'ов в JS
- Активация JS действия позже с помощью setTimeout
- Введение
- Как можно называть классы
- Правила написания HTML кода по BEM и полезные ресурсы
- Некоторые правила стилей CSS в BEM
- Общие случаи применения стилей не к блоку, а к его внутреннему элементу
- Правильное предсказание времени, которое пойдет на проект. Пример таблицы в Google Sheets
- Создание сниппета
- Ссылка на макет "Shortly"
- Глобальные настройки, шрифты и переменные
- Заголовок сайта и кнопка
- Сравнение с PerfectPixel. Пример макета "Shortly"
- Геройский раздел
- Форма и результаты раздела для сокращения URL
- Код для изменения цвета валидации ввода и заполнителей
- Остановка отправки формы для сокращения URL и отображение результатов в это время
- Изменение стилей для заполненных значений в CSS. Изменение autofill стилей в макете "Shortly"
- Изменение состояния при нажатии кнопки копирования сокращенной ссылки. Простое знакомство с делегацией событий в JS. Копирование сокращенной ссылки в буфер обмена
- Раздел особенностей
- Раздел CTA
- Краткий анализ кода. Мысли по BEM
- Футер сайта
- Мысли о времени, потраченном на проект. Проверка кода проекта в валидаторе и BEM tree checker
- Исправление маленькой ошибки в футере сайта
- Ссылка на макет "Bookmark"
- Анализ вида макета и предсказание времени на проект
- Добавление новостей в css-starter repo
- Коррекция шрифтов, глобальных стилей, пользовательских свойств и стилей контейнера
- Заголовок сайта
- Геройский раздел
- Создание общих стилей для разделов
- Раздел особенностей. Создание ссылок на вкладки
- Раздел особенностей. Создание панелей вкладок
- Где пишется код JavaScript
- Как записываются числа и текст
- Отображение данных в консоли
- Соединение переменных и текста
- Подсчет символов в тексте
- Работа с шаблонными литералами
- Выбор элемента - document.querySelector
- Почему переменной, привязанной к HTML-элементу, следует давать имя, начинающееся с el
- Выбор нескольких элементов - document.querySelectorAll
- Определение количества элементов, найденных с помощью querySelectorAll
- Получение и изменение текста элемента. Обращение к элементу по имени $0 в DevTools
- Работа с классами, добавление, удаление, переключение, содержание
- Добавление слушателя событий
- Почему классам элементов, которым добавлен слушатель событий в JS, следует давать префикс js-
- Типы событий и пример события изменения select
- Упражнение. Выполнение действия при вводе данных в input
- Обеспечение выполнения действия в ответ на событие (if)
- Выполнение действия через некоторое время с помощью setTimeout
- Event preventDefault
- Привязка слушателя событий к нескольким элементам
- Нужно ли обеспечивать безопасность при привязке слушателя событий к нескольким элементам
- Работа с data-атрибутами
- Делегирование событий
- Копирование текста - navigator.clipboard.writeText()
- Перемещение по DOM
- localStorage
- Описание работы с вкладками. Получение значения href при нажатии на ссылку вкладки и использование метода split текста
- Управление активностью tabs__item при нажатии на ссылку вкладки
- Основы понимания функций в JavaScript
- Создание и запуск функции deactivateTabItems
- Полное использование вкладок
- Нахождение панели вкладки с помощью dataset
- Очистка кэша в Netlify, если изменения не видны
- Исправление ошибок BEM в панелях вкладок
- Коррекция отступов изображений в панелях вкладок
- Создание раздела Extensions
- Селектор nth-child в форме Xn + Y
- Раздел FAQ. Элементы до аккордеона
- Создание HTML и CSS части аккордеона
- JavaScript часть аккордеона
- Сравнение раздела FAQ с макетом в PerfectPixel
- Раздел подписки
- Раздел футера сайта
- Исправление ошибки в аккордеоне FAQ и совет
- Основы объектов в JS
- Группировка модификаторных классов в один объект
- Введение и первое задание
- Оценка времени проекта и подготовка начального кода
- Глобальные стили, переменные, контейнер и стили шрифтов
- Шапка сайта
- Герой
- Особенности
- Сетка статей и индекс статей
- Футер. Логотип и социальные сети
- Футер, ссылки и части cta-copy
- Знакомство с проектом. Оценка времени
- Добавление пользовательских свойств, шрифтов, контейнера и стилей для body
- Шапка сайта, логотип и навигация
- Ссылка на корзину в шапке сайта
- Ссылка на профиль в шапке сайта
- Корзина, покупательская корзина и стили для количества товаров в корзине
- Стили для пустого содержимого, постоянно присваиваемый класс empty
- Содержимое покупательской корзины HTML
- Стили для списка товаров в корзине
- Кнопка корзины
- Всплывающий элемент корзины, часть JS
- Начальное состояние страницы товара
- Показ изображений HTML
- Стили для показа изображений
- Изменение стиля полосы прокрутки
- Создание сниппета для изменения стиля полосы прокрутки и редактирование триггера предыдущего сниппета
- Описание самостоятельной работы. Описание возможностей показа изображений JS и этапы их создания
- При нажатии на миниатюру активировать ее активное состояние. Почему изображения были прикреплены к кнопке
- При нажатии на миниатюру изменить активное изображение
- Можно ли назначить слушатель событий клика на изображения
- Часть HTML для lightbox
- Стили для lightbox
- Открыть и закрыть lightbox
- Исправление ошибки при связывании lightbox с показом изображений
- Изменение изображений в lightbox
- Возможность перехода к следующему изображению в lightbox
- Возможность перехода к предыдущему изображению в lightbox
- Решение конфликта между галереей изображений и lightbox
- Часть информации о продукте HTML
- Стили информации о продукте
- Изменение количества товара при нажатии кнопки
- Элемент table. Часть 1. Основы
- Элемент table. Часть 2. rowspan, colspan
- Элемент table. Часть 3. Распространенные стили
- iframe. Вставка видео с YouTube, карт с YandexMaps и GoogleMaps
- Аудио и видео элементы
- CSS фильтры и mix-blend-mode
- Преобразование страницы профиля GitHub в полезный и красивый вид
- Заполнение страницы профиля GitHub информацией. Часть 1
- Заполнение страницы профиля GitHub информацией. Часть 2
- Создание портфолио. Что это, какую информацию разместить и некоторые мысли
- Создание портфолио. Создание первой версии главной страницы портфолио
- Создание портфолио. Размещение информации о проекте на сайте Teletype
- Покупка домена и связывание портфолио с новым доменом
- Типы интерфейсов - CLI против GUI
- Написание команд Git в терминале
- Работа с программой Sublime Merge
- Совместная работа и введение в темы SDLC
- Знакомство с Scrum
- Информация о методе Waterfall. Введение в тему работы с ветками в Git
- Работа с ветками в Git
- Работа с ветками в Git (терминал)
- Если работа в ветке не завершена, отправка ее в репозиторий
- Правила защиты веток в Git
- Действия перед открытием ветки в Git. Получение проекта с компьютера с ветками и некоторые дополнительные правила
- Пример конфликта слияния в Git и разрешение конфликта слияния
- Возможность создания форка на GitHub
- Отправка изменений из форка в основной репозиторий. Краткое знакомство с некоторыми концепциями совместной работы на GitHub
- Технические методы совместной работы на GitHub
- Основы совместной работы на основе форка на GitHub
- Введение в практику совместной работы
- Выполнение глобальных задач проекта MyTeam (контейнер, шрифт, настраиваемые свойства)
- Размещение макета MyTeam на Netlify
- Разделение макета MyTeam на компоненты. Добавление членов команды в репозиторий
- Введение в создание адаптивного сайта
- Работа с инструментом Device Toolbar и некоторые полезные инструменты
- Мета-тег viewport
- Знакомство с медиа-запросами
- Различия между адаптивными и отзывчивыми сайтами
- Desktop-first против Mobile-first
- Иллюстрация создания адаптивного сайта
- Распространенные ошибки
- Установка ширины элементов в процентах и ее преимущества
- Знакомство с элементом picture
- Использование медиа-запросов в элементе picture
- Изменения в профиле GitHub
- Задания по созданию адаптивного сайта
- Создание адаптивного макета Akademnashr. Информация о последовательности уроков
- Приведение социальных сетей в подвале Akademnashr в соответствие с BEM
- Создание адаптивного подвала сайта
- Создание адаптивного раздела функций
- Создание адаптивного героического раздела
- Создание адаптивного промо-раздела
- Создание адаптивного заголовка сайта
- Введение и HTML
- Стили меню
- JavaScript часть
- Адаптация под крайние случаи
- Hero-section
- Index-services
- CTA
- Подготовка к адаптации части Site-footer AnsorMed
- Адаптивный AnsorMed. Часть 1 Site-footer
- Адаптивный AnsorMed. Часть 2 Site-header
- Анализ времени на создание макета
- Минималистичное портфолио. Глобальные стили, контейнер и пользовательские свойства
- Минималистичное портфолио. Подключение шрифтов
- Минималистичное портфолио. Часть Site-header
- Минималистичное портфолио. Часть Site-footer
- Минималистичное портфолио. Кнопка CTA
- Минималистичное портфолио. Кнопка
- Минималистичное портфолио. Часть Hero
- Минималистичное портфолио. Компонент img-text-info
- Минималистичное портфолио. Часть О мне
- Минималистичное портфолио. Контактная информация CTA
- Минималистичное портфолио. Страница портфолио
- Минималистичное портфолио. Герой проекта
- Минималистичное портфолио. Часть информации о проекте
- Минималистичное портфолио. Коррекция выравнивания в части информации о проекте
- Минималистичное портфолио. Часть Project meta
- Минималистичное портфолио. Часть Project details
- Минималистичное портфолио. Управление страницей
- Минималистичное портфолио. Заполнение информации о страницах проектов
- Минималистичное портфолио. HTML контактной страницы
- Минималистичное портфолио. Стили контактной страницы
- 12 февраля 2022
- 3 марта 2022
- 21 июля 2022, 1 часть
- 21 июля 2022, 2 часть
- 29 августа 2022
- 10 октября 2022
- 30 октября 2022
- 25 ноября 2022
- 8 января 2023, 1 часть
- 8 января 2023, 2 часть
- 8 января 2023, 3 часть
- 26 марта 2023, 1 часть
- 26 марта 2023, 2 часть
- 3 апреля 2023, 1 часть, Sass Введение
- 3 апреля 2023, 2 часть, Sass Введение
- 12 мая, Собственные хуки и вопрос-ответ
- 9 июля 2023, Javascript - прототипное наследование
- Введение в модуль ReactJS
- 1-урок. Что такое ReactJS
- 2-урок. Необходимые программы
- 3-урок. Подробно о NPM
- Бонус. Купон Webstorm
- 4-урок. Создание программы ReactJS. React APP
- 5-урок. Soft ReactJS
- 6-урок. Мини-проект
- 7-урок. JSX
- 8-урок. Практика
- 9-урок. Особенности JSX
- 10-урок. Разделение приложения на модули
- 11-урок. Условное отображение
- 12-урок. Пример Loader
- 13-урок. Практика
- 14-урок. О классовых компонентах
- 15-урок. Состояние и управление классовыми компонентами
- 16-урок. Создание методов в классовых компонентах
- 17-урок. Практика
- 18-урок. Понятие жизненного цикла и компонент React
- 19-урок. Практика
- 20-урок. Работа с массивами и ключевым атрибутом
- 21-урок. Props
- 22-урок. Практика
- 23-урок. Работа с формами и валидация
- 24-урок. Работа с Checkbox, radio и TextArea
- 25-урок. Практика
- 26-урок. Подробно о CreateRef
- 27-урок. Неконтролируемая форма
- 28-урок. Знакомство с проектом Movie App
- 28-урок. Знакомство с проектом
- 29-урок. Header и Footer
- 30-урок. Знакомство с API
- 31-урок. Создание общего списка фильмов
- 32-урок. Создание кнопки поиска
- 33-урок. Добавление фильтрации по категории
- 34-урок. Управление неудачным поиском и размещение на хосте
- 2-ПРОЕКТ. Аналог Twitter
- 35-урок. Введение в проект
- 36-урок. JSX процессор
- 37-урок. Свойства компонентов
- 38-урок. Состояния компонентов
- 39-урок. Удаление данных из базы данных
- 40-урок. Работа с формой
- 41-урок. Добавление данных в Data
- 42-урок. Система поиска и фильтр
- 2-МОДУЛЬ. Функциональные компоненты
- 43-урок. Функциональные компоненты
- 44-урок. Понятие жизненного цикла с помощью функционального компонента
- 45-урок. Использование рефов в функциональном компоненте
- 46-урок. Практика. Компоненты
- 47-урок. Практика. 1-часть
- 48-урок. Практика. 2-часть
- 49-урок. Hooks. useState, useEffect, useRef и useMemo
- 50-урок. Hook useCallback и useContext
- 51-урок. Hook useLayoutEffect
- 52-урок. Hook useImperativeHandle
- 53-урок. Hook useReducer
- 54-урок. Специальные хуки
- 55-урок. Условия использования хуков
- 56-урок. Практика. Hook useReducer
- 3-ПРОЕКТ. Корзина покупок
- 57-урок. Введение в проект
- 58-урок. Знакомство с API
- 59-урок. Header & Footer
- 60-урок. Отображение списка продуктов
- 61-урок. Состояние заказа и корзина
- 62-урок. Функция размещения заказа
- 63-урок. Удаление продукта
- 64-урок. Изменение продуктов в корзине
- 65-урок. Добавление и удаление продуктов
- 66-урок. Библиотека Toast и Github
- 3-МОДУЛЬ. Сложное состояние программы. Работа с Context
- 67-урок. Создание сложного состояния управления программы: создание Context & Provider
- 68-урок. Создание функции Reducer
- 69-урок. Передача всех компонентов вместо свойств в контекст
- 70-урок. Комментарий
- 4-ПРОЕКТ. SPA программа (Одностраничное приложение)
- 71-урок. Маршрутизация и SPA. Знакомство
- 72-урок. Основы маршрутизации и компонент Link
- 73-урок. Хуки useHistory, useParams, useLocation и useRouteMatch
- 74-урок. API
- 75-урок. Создание методов API
- 76-урок. Категория и главная страница
- 77-урок. Метод получения продуктов с помощью фильтра
- 78-урок. Рецепт
- 79-урок. Панель поиска
- Опрос по модулю
В каком формате проходит обучение?
1
Закрытая группа
Вы можете задавать вопросы в закрытых Telegram группах с другими учениками.
2
Онлайн-встречи
Регулярные онлайн-звонки с преподавателями через Zoom.
3
Видеоуроки
Постоянный доступ к видеоурокам в процессе обучения.
4
Проверка знаний
Тесты после каждого окончания учебного модуля.
Ментор курса
- Мухаммаджавохир СуратовFrontend разработчикОпытный Frontend разработчик, автор проекта Mayoq
Выберите удобный для вас тариф
Вы выбрали покупку в рассрочку
Отправьте свои данные и мы свяжемся с вами в ближайшее время. Мы поможем вам выбрать курс и начать обучение.
Начните свой путь
к знаниям с Mohirdev
к знаниям с Mohirdev
Отправьте данные и мы свяжемся с вами в ближайшее время. Поможем подобрать курс и начать обучение.
+50,000 учеников
Рассрочка на курсы
Остались вопросы?
Давайте обсудим!
Давайте обсудим!
08:00 → 21:00
Понидельник → Суббота
Что представляют собой курсы Praktikum?
Курсы Praktikum длительностью от 3 до 9 месяцев — это комплексные программы, направленные на подготовку к определенной специализации. Они предоставляют полный объем знаний, что и определяет их длительность.
В какой форме проводятся курсы?
Курсы включают в себя видеоуроки и тестовые задания. Для взаимодействия между преподавателем и студентами существуют специализированные группы в Telegram. Видеоуроки доступны онлайн на нашей платформе.
Смогу ли я найти работу после обучения?
На курсах Praktikum вы получите все ключевые знания и навыки для трудоустройства. Тем не менее, успешное трудоустройство также зависит от ваших soft skills, таких как коммуникабельность и умение работать в команде.
Можно использовать один курс разным людям?
Каждый приобретенный курс предназначен для использования только одним человеком. Передача или распространение курса другим лицам запрещена.
Можно ли оплатить обучение в рассрочку?
Да, вы можете оформить рассрочку на срок от 30 дней до 12 месяцев.
Все права защищены.
© Mohirdev 2023.
© Mohirdev 2023.
