---

Видео на тему: ITDoctor - видео

В этом уроке вы шаг за шагом сверстаете полноценный сайт от шапки и кнопок до разделов с брендами, работами и товарами. Разберём оптимизацию изображений и современные форматы, а также оформим футер с градиентом. Записаться на курс "Сайт с нуля: Pixso, Tilda и ChatGPT для новичка" на Stepik, чтобы получить больше практики: https://stepik.org/275997 Макет можно скачать в уроке "Меню и шрифты". Этот урок в свободном доступе по ссылке выше. Просто нажмите кнопку "Попробовать бесплатно". 00:00 Разметка для Header 04:48 Стили для Header 10:37 Кнопки 16:18 Брэнды 21:40 Кейсы, разметка и стили для блока 30:02 Оптимизация изображений и подключение webp и avif 38:03 Разметка для товаров 42:32 Стили для товаров 49:48 Footer Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #pixso #tilda #chatgptРазбираем, заменит ли ChatGPT и другие ИИ верстальщиков и как использовать его в работе. Поговорим о подключении шрифтов с помощью ИИ, сочетании нейросетей и поисковиков, разберём пример DeepSeek и сравним с реалиями профессии в 2022 году. Практика, размышления и мотивация. Записаться на курс "Сайт с нуля: Pixso, Tilda и ChatGPT для новичка" на Stepik, чтобы получить больше практики: https://stepik.org/275997 Макет можно скачать в уроке "Меню и шрифты". Этот урок в свободном доступе по ссылке выше. Просто нажмите кнопку "Попробовать бесплатно". 00:00 Поговорим про ИИ, заменят ли вас, как этим пользоваться 17:25 ИИ про подключение шрифта и продолжаем рассуждать 27:05 Комбинировать ИИ и поисковики, наставления и мотивация 34:53 Пример хорошей работы DeepSeek 43:33 Как это было в 2022 году, профессия верстальщик и мотивация Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #pixso #tilda #chatgptВ этом уроке вы узнаете, как подготовить проект, импортировать макет в Pixso и сверстать меню с нуля. Разберём базовые стили, работу с box-sizing, подключение и оптимизацию шрифтов, а также оформим финальные стили для меню. Записаться на курс "Сайт с нуля: Pixso, Tilda и ChatGPT для новичка" на Stepik, чтобы получить больше практики: https://stepik.org/275997 Макет можно скачать в уроке "Меню и шрифты". Этот урок в свободном доступе по ссылке выше. Просто нажмите кнопку "Попробовать бесплатно". 00:00 О чём этот урок? 02:08 Подготовка проекта 08:18 Как импортировать макет в Pixso 10:35 Разметка для меню 21:10 Базовые стили 27:09 Box-sizing Border-box 37:30 Работа со шрифтом, оптимизация, поддержка, подключение 48:15 Стили для меню Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #pixso #tilda #chatgptВ этом уроке вы изучите React с нуля и создадите свой первый проект с использованием Vite. Разберём ключевые темы: компоненты, props, состояния (state), обработка событий, условный рендеринг и работа с формами. Урок подойдёт новичкам и тем, кто хочет быстро освоить современную разработку на React и понять структуру проектов на практике. Записаться на курс "Основы React для начинающих" на Stepik, чтобы получить больше практики: https://stepik.org/a/259789 00:00:00 Что такое React и для чего он нужен 00:01:57 Онлайн редактор для React 00:04:46 Установка редактора VS Code и Node.js c NPM 00:07:32 Создание проекта React 00:13:33 Завершить компиляцию и открыть проект в редакторе 00:16:32 Работа с Vite 00:20:35 Что такое компоненты на React 00:27:28 Структура проекта React 00:37:01 Упрощаем проект для лучшего понимания 00:42:33 Создание своего компонента 00:49:57 Выносим компонент в отдельный файл 00:56:33 Интерполяция и импорт изображений 01:00:52 Свойства props и динамические данные в компоненте 01:05:42 Деструктуризация 01:07:43 Импорт стилей для отдельного компонента 01:11:35 Что такое Children у компонента 01:13:22 Обработчики событий на React 01:18:54 Состояния для динамического рендера 01:25:13 Пример кода с отображением времени на странице 01:31:14 Тернарный оператор 01:34:30 Несколько вариантов условного отображения 01:37:41 Стили для активной кнопки 01:41:37 Инлайновые стили 01:45:38 Изоляция стилей отдельного компонента 01:50:18 Создание нового компонента для работы с формами 01:54:59 Работа с полем ввода input 01:59:19 Работа с выпадающим списком select 02:03:37 Простая валидация формы Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке мы рассмотрим как сделать простую валидацию формы на React. Весь цикл уроков по React уже доступен на платформе Stepik (ссылки ниже). Здесь видео будут выходить по два раза в неделю (вторник, суббота). Всего будет 28 уроков. Если вы начинающий рекомендую комплексный курс от А до Я - Frontend разработчик на HTML, CSS и JavaScript - https://stepik.org/a/113402 Если уже знаете какие-то основы и хотите изучить JS, Vue. React, то рекомендую - Супер курс по языку JavaScript - https://stepik.org/a/113653 Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке мы рассмотрим работу с выпадающим списком select на React. Весь цикл уроков по React уже доступен на платформе Stepik (ссылки ниже). Здесь видео будут выходить по два раза в неделю (вторник, суббота). Всего будет 28 уроков. Если вы начинающий рекомендую комплексный курс от А до Я - Frontend разработчик на HTML, CSS и JavaScript - https://stepik.org/a/113402 Если уже знаете какие-то основы и хотите изучить JS, Vue. React, то рекомендую - Супер курс по языку JavaScript - https://stepik.org/a/113653 Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке мы рассмотрим работу с полем ввода input на React. Весь цикл уроков по React уже доступен на платформе Stepik (ссылки ниже). Здесь видео будут выходить по два раза в неделю (вторник, суббота). Всего будет 28 уроков. Если вы начинающий рекомендую комплексный курс от А до Я - Frontend разработчик на HTML, CSS и JavaScript - https://stepik.org/a/113402 Если уже знаете какие-то основы и хотите изучить JS, Vue. React, то рекомендую - Супер курс по языку JavaScript - https://stepik.org/a/113653 Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке мы рассмотрим создание нового компонента для работы с формами на React. Весь цикл уроков по React уже доступен на платформе Stepik (ссылки ниже). Здесь видео будут выходить по два раза в неделю (вторник, суббота). Всего будет 28 уроков. Если вы начинающий рекомендую комплексный курс от А до Я - Frontend разработчик на HTML, CSS и JavaScript - https://stepik.org/a/113402 Если уже знаете какие-то основы и хотите изучить JS, Vue. React, то рекомендую - Супер курс по языку JavaScript - https://stepik.org/a/113653 Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке мы рассмотрим как изолировать стили отдельного компонента на React. Весь цикл уроков по React уже доступен на платформе Stepik (ссылки ниже). Здесь видео будут выходить по два раза в неделю (вторник, суббота). Всего будет 28 уроков. Если вы начинающий рекомендую комплексный курс от А до Я - Frontend разработчик на HTML, CSS и JavaScript - https://stepik.org/a/113402 Если уже знаете какие-то основы и хотите изучить JS, Vue. React, то рекомендую - Супер курс по языку JavaScript - https://stepik.org/a/113653 Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке мы рассмотрим как работают инлайновые стили на React. Весь цикл уроков по React уже доступен на платформе Stepik (ссылки ниже). Здесь видео будут выходить по два раза в неделю (вторник, суббота). Всего будет 28 уроков. Если вы начинающий рекомендую комплексный курс от А до Я - Frontend разработчик на HTML, CSS и JavaScript - https://stepik.org/a/113402 Если уже знаете какие-то основы и хотите изучить JS, Vue. React, то рекомендую - Супер курс по языку JavaScript - https://stepik.org/a/113653 Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке мы рассмотрим пример работы со стилями CSS для активной кнопки на React. Весь цикл уроков по React уже доступен на платформе Stepik (ссылки ниже). Здесь видео будут выходить по два раза в неделю (вторник, суббота). Всего будет 28 уроков. Если вы начинающий рекомендую комплексный курс от А до Я - Frontend разработчик на HTML, CSS и JavaScript - https://stepik.org/a/113402 Если уже знаете какие-то основы и хотите изучить JS, Vue. React, то рекомендую - Супер курс по языку JavaScript - https://stepik.org/a/113653 Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке мы рассмотрим несколько вариантов условного отображения на React. Весь цикл уроков по React уже доступен на платформе Stepik (ссылки ниже). Здесь видео будут выходить по два раза в неделю (вторник, суббота). Всего будет 28 уроков. Если вы начинающий рекомендую комплексный курс от А до Я - Frontend разработчик на HTML, CSS и JavaScript - https://stepik.org/a/113402 Если уже знаете какие-то основы и хотите изучить JS, Vue. React, то рекомендую - Супер курс по языку JavaScript - https://stepik.org/a/113653 Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке мы рассмотрим как работать с тернарным оператором на JavaScript в контексте React. Весь цикл уроков по React уже доступен на платформе Stepik (ссылки ниже). Здесь видео будут выходить по два раза в неделю (вторник, суббота). Всего будет 28 уроков. Если вы начинающий рекомендую комплексный курс от А до Я - Frontend разработчик на HTML, CSS и JavaScript - https://stepik.org/a/113402 Если уже знаете какие-то основы и хотите изучить JS, Vue. React, то рекомендую - Супер курс по языку JavaScript - https://stepik.org/a/113653 Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке мы рассмотрим пример кода на React с отображением времени на странице. Весь цикл уроков по React уже доступен на платформе Stepik (ссылки ниже). Здесь видео будут выходить по два раза в неделю (вторник, суббота). Всего будет 28 уроков. Если вы начинающий рекомендую комплексный курс от А до Я - Frontend разработчик на HTML, CSS и JavaScript - https://stepik.org/a/113402 Если уже знаете какие-то основы и хотите изучить JS, Vue. React, то рекомендую - Супер курс по языку JavaScript - https://stepik.org/a/113653 Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке мы рассмотрим как использовать состояния для динамического рендера на React. Весь цикл уроков по React уже доступен на платформе Stepik (ссылки ниже). Здесь видео будут выходить по два раза в неделю (вторник, суббота). Всего будет 28 уроков. Если вы начинающий рекомендую комплексный курс от А до Я - Frontend разработчик на HTML, CSS и JavaScript - https://stepik.org/a/113402 Если уже знаете какие-то основы и хотите изучить JS, Vue. React, то рекомендую - Супер курс по языку JavaScript - https://stepik.org/a/113653 Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке мы рассмотрим обработчики событий на React. Весь цикл уроков по React уже доступен на платформе Stepik (ссылки ниже). Здесь видео будут выходить по два раза в неделю (вторник, суббота). Всего будет 28 уроков. Если вы начинающий рекомендую комплексный курс от А до Я - Frontend разработчик на HTML, CSS и JavaScript - https://stepik.org/a/113402 Если уже знаете какие-то основы и хотите изучить JS, Vue. React, то рекомендую - Супер курс по языку JavaScript - https://stepik.org/a/113653 Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке мы рассмотрим, что такое Children у компонента на React. Весь цикл уроков по React уже доступен на платформе Stepik (ссылки ниже). Здесь видео будут выходить по два раза в неделю (вторник, суббота). Всего будет 28 уроков. Если вы начинающий рекомендую комплексный курс от А до Я - Frontend разработчик на HTML, CSS и JavaScript - https://stepik.org/a/113402 Если уже знаете какие-то основы и хотите изучить JS, Vue. React, то рекомендую - Супер курс по языку JavaScript - https://stepik.org/a/113653 Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке мы рассмотрим импорт стилей для отдельного компонента на React. Весь цикл уроков по React уже доступен на платформе Stepik (ссылки ниже). Здесь видео будут выходить по два раза в неделю (вторник, суббота). Всего будет 28 уроков. Если вы начинающий рекомендую комплексный курс от А до Я - Frontend разработчик на HTML, CSS и JavaScript - https://stepik.org/a/113402 Если уже знаете какие-то основы и хотите изучить JS, Vue. React, то рекомендую - Супер курс по языку JavaScript - https://stepik.org/a/113653 Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке мы будем использовать деструктуризацию в контексте React. Весь цикл уроков по React уже доступен на платформе Stepik (ссылки ниже). Здесь видео будут выходить по два раза в неделю (вторник, суббота). Всего будет 28 уроков. Если вы начинающий рекомендую комплексный курс от А до Я - Frontend разработчик на HTML, CSS и JavaScript - https://stepik.org/a/113402 Если уже знаете какие-то основы и хотите изучить JS, Vue. React, то рекомендую - Супер курс по языку JavaScript - https://stepik.org/a/113653 Кайдзен разработка, чтобы бесплатно изучить основы HTML, CSS, JS - https://stepik.org/208758 💡 Телеграм - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/ITDoctor/teach ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor YouTube - https://youtube.com/@ITDoctor Дзен - https://dzen.ru/itdoctor ВК - https://vk.com/itdoctorstudio Rutube - https://rutube.ru/channel/23500045/ #itdoctor #reactВ этом уроке я расскажу про языки HTML и CSS. Мы установим браузер и редактор кода VS Code для создания сайтов. Мы создадим первую тестовую веб-страницу и в следующих уроках будем последовательно изучать эти языки и вы научитесь создавать сайты. Уроки по языку HTML собраны в одном плейлисте для вашего удобства. Тут вы сможете легко выучить язык HTML5 начиная с основ и завершая полным пониманием языка разметки HTML. Изучите много полезных тегов. 📌 Язык HTML для новичков - https://www.youtube.com/playlist?list=PLuY6eeDuleINqbJtQv32qtDpTBopxuqs4 Данный плейлист включает в себя видео лекции из курса "Frontend разработчик на HTML, CSS и JavaScript". Задания к этому курсу можно найти на платформе Stepik. 📌 Курс "Frontend разработчик на HTML, CSS и JavaScript" - https://stepik.org/a/113402 ⚡️ Эксклюзив на Boosty - https://boosty.to/itdoctor 💡 Telegram канал - https://t.me/itdoctor_official/4 🎥 Курсы на Stepik - https://stepik.org/users/387773773/teach 💰 Донаты на ЮMoney - https://sobe.ru/na/itdoctor ВКонтакте - https://vk.com/itdoctorstudio Яндекс Дзен - https://zen.yandex.ru/itdoctor Rutube - https://rutube.ru/channel/23500045/ #html #html5 #htmltutorial #htmlcss #itdoctor