#2 Уроки по Bootstrap 5 - Шапка, модальное окно, градиент, треугольник, адаптивное видео

[@ITDoctor]

Лучшая благодарность для меня это лайк, подписка и ваш комментарий под этим видео. Чтобы стать профессионалом в языке JavaScript изучите мой Супер курс по языку JavaScript: stepik.org/z/113653

[@MyAutist]

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

[@ITDoctor]

Спасибо что оценили

[@evielyn1976]

Спасибо, второй раз оставляю коммент, хочется чтоб вы знали что ваши курсы - находка. Очень мало по вебу нормальной и бесплатной информации. Еще раз спасибо

[@ITDoctor]

Спасибо за отзыв. Очень приятно

[@m_mariya_mari]

За генератор - отдельное спасибо! экономия времени и сил! Круто! 👍

[@ITDoctor]

пожалуйста

[@СергейКофанов-л8у]

Огромная благодарность вам за ваш труд! Лучше и понятнее никто не доносит информацию!!!

[@ITDoctor]

Спасибо что оценили. очень приятно

[@ОльгитаТатарченко-ъ2э]

СУПЕР, СУПЕР. У МЕНЯ ВСЕ ПОЛУЧИЛОСЬ!!!!!!!!!!!! Я В ВОСТОРГЕ ОТ ВАШВГО КАНАЛА!!!!! доступно, практично, все понятно. поление ссилки!! подробное обьяснение!!! УСПЕХОВ.

[@ITDoctor]

Спасибо, очень рад что было полезно!

[@violator1911]

ITDoctor, спасибо, что понижаете уровень невежества в web-разработке!

[@ITDoctor]

спасибо что цените

[@СергейНикольский-у5ы]

Огромное Спасибо! Продолжаю и учиться у Вас и рекомендовать Всем!!!

[@ITDoctor]

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

[@time4769]

спасибо большое! теперь думаю, переписать свой дипломный проект с помощью Bootstrap 5, чтобы был резиновым

[@ITDoctor]

пожалуйста

[@ITDoctor]

@Максим Петин совсем немного. Вот это видео если изучите будет достаточно kzbin.info/www/bejne/g17TlnqYjaiphKM

[@ITDoctor]

@Максим Петин натяжка так или иначе происходит через создание темы. Есть конечно именно создание качественных крутых тем на продажу это отдельный вид искусства там и php и wordpress нужно очень хорошо знать. Но в любом случае на вордпрессе можно делать практически все. Если не стандартными средствами то с помощью плагинов.

[@GGSoft2009]

Многое чего узнал и открил для себя!!! Огромное спасибо и уважуха!!!! Супер тренер!!!!

[@ITDoctor]

Спасибо за добрые слова

[@АртемБолгаров-ж8щ]

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

[@ITDoctor]

Спасибо, да работать все равно придется)

[@Demiurh]

Спасибо, полезно. Видеокурс только слитно )

[@step7275]

Очень познавательный курс , спасибо

[@ITDoctor]

Спасибо за оценку

[@kostukov75]

Дождались, спасибо тебе большое.

[@ITDoctor]

Пожалуйста

[@ГеннадийКочетков-н3й]

спасибо, я новичок, но было очень полезно понять, что вообще такое этот ваш бутстрап)

[@ITDoctor]

Рад что было полезно

[@АкимеУсеинова-с3е]

Огромное спасибо за ваш труд!!👍👍👍

[@elenamorgun7978]

Спасибо за плейлист, все четко и понятно.

[@ITDoctor]

рад что нравится

[@remfort.m]

Большое спасибо за труд! 👍

[@ITDoctor]

всегда пожалуйста!

[@ProgVipe]

очень понятно объясняете

[@ITDoctor]

рад слышать

[@elenapolat9228]

лучшее видео с лучшими разъяснениями, пояснениями

[@ITDoctor]

спасибо

[@mikhailbykov6311]

отличный курс! спаисбо большое!

[@ITDoctor]

Пожалуйста

[@progerlife6690]

Супер огонь!!!!

[@ITDoctor]

Спасибо

[@pendelbus555]

Для smoothScroll теперь default значение false. Поэтому на новой версии плавная прокрутка до якоря не работает без изменения переменной.

[@ITDoctor]

Спасибо что делитесь

[@nonamexrrr7504]

изменяю значение на true, все равно не помогает, подскажите пожалуйста как сделать плавную прокрутку

[@kuzinpeter3365]

Автор просто молодец. Большое спасибо, очень полезно!

[@ITDoctor]

Спасибо

[@Asad11122]

Огромное спасибо тебе за то что ты бесплатно это все рассказываешь, спасибоооооооооо тебе большое!!!!!!!!!

[@ITDoctor]

Пожалуйста. Очень рад что вам нравится

[@aliaskararzykulov2361]

спасибо за видео ждем продолжение

[@ITDoctor]

Пожалуйста

[@Екатерина-г4е4т]

Спасибо за урок!

[@ITDoctor]

пожалуйста

[@lumeaceaiuluisrl6343]

Супер! Спасибо!)

[@ITDoctor]

Пожалуйста

[@Igor160594]

очень круто! ты лучший) спасибо!

[@ITDoctor]

Спасибо, рад слышать

[@Fight-Santario]

Здаров. Конечно же благодарю за серию видосов. Но возникла проблема: делаю всё как в ролике да и по логике, но в моменте с градиентом и фоновой картинкой тупняк. Сначала была такая штука: див окрашивался либо в градиент либо показывал только картинку. Но никак не вместе. После скроллинга коментов, кто-то подсказал, что у картинки фон непрозрачный. Пустые места удалил. Вроде показывает. Извиняюсь за долгую подводку, но ведб градиент должен накладываться на картинку не зависимо от шо там и какие фоны. Также выражаю респект за то, что читаешь комменты!

[@ITDoctor]

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

[@r4rhrru324]

Спасибо за контент)

[@ITDoctor]

пожалуйста

[@АндрейКубаренко-й5ж]

Спасибо, Док!

[@ITDoctor]

Рад что оценили

[@vovaka440]

Отличное видео с объяснением, спасибо, кайфанул! :)

[@ITDoctor]

Пожалуйста

[@ДарияДолгая]

Спасибо Вам!))

[@ITDoctor]

спасибо что цените

[@Marina-1-7]

Отличные уроки - прямо то что надо! Подскажите, как все-таки убрать проигрывание видео по закрытию окна? Отловить событие - это понятно, но какой код нужно написать в обработчике, чтобы остановить встроенное видео из utube?

[@alexandrmelnikov6434]

У меня по итогу в модальном окне видео недоступно. Пробовал использовать разные сервисы для получения кода адаптивного видео, но безуспешно. ( в конце концов решил скачать видео с ютуба и поместил в папку video на сайте и прописал путь, короче так работает. Но вот задача, как уже здесь не в одном комментарии было указано - как остановить воспроизведение видео, если юзер закрыл модальное окно ?

[@mishatsigamenko8093]

Очень крутой видос , жаль что поздно на курс наткнулся , 3 часа модальное окно в ручную делал 😂

[@ITDoctor]

Спасибо

[@azatbegenchev8636]

Это очень круто!!!

[@ITDoctor]

Спасибо

[@elliothammerlock8181]

крутое видео, спасибо. вопрос: зачем 3 раза прописывать transparent у стрелки, если с одним тоже работает?

[@rocky3283]

Что делать если не работает плавная прокрутка до якоря?

[@nike-555]

Крассавчик прост!!!

[@ITDoctor]

Спасибо

[@digitalturkistan1857]

спасибо

[@ITDoctor]

пожалуйста

[@OddiyGaplar]

thank you

[@monsterskat]

❤

[@hakimjonghaniev5536]

Спасибо

[@ITDoctor]

Пожалуйста

[@RustamZholdubayev]

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

[@ровойт]

спасибо за уроки - хотел спросить - стоит ли учить (нужно или не нужно) PHP после JS

[@ITDoctor]

Не обязательно. смотря чем вы планируете заниматься в дальнейшем

[@вукі]

Спасибо!

[@ITDoctor]

Пожалуйста

[@СветланаГруздева-л7ю]

Здравствуйте! А можно подключать не весь bootstrap.bundle.min.js, а только нужный модуль, например, modal.js?

[@ITDoctor]

конечно. я в первом уроке говорил что так можно делать. и с CSS тоже можно только сетку подключить например если не нужны все стили лишние

[@_x_play2356]

Отличное видео

[@ITDoctor]

Спасибо

[@callmeliza18]

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

[@rustam_4]

Этот коммент для продвижения видео

[@ITDoctor]

Спасибо большое

[@MikaStan]

что-то не так идет у меня по урокам, уже второй раз (первый провал был в верстке макета Digital Agency). Треугольник вышел влево, за пределы круглой кнопки. А кнопка Заказать наехала на круг. Притом это во всех браузерах! Хотя повторяю все в точности по урокам.(( Может, что-то не так в дефолтных настройках VSCode ?

[@ITDoctor]

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

[@glamb_is_learning]

Спасибо, за уроки! а как вы сделали иконки во вкладке EXPLORER?

[@ITDoctor]

я все это показываю. смотрите плейлист по порядку kzbin.info/aero/PLuY6eeDuleINmJ4DV22gtPL4--HQ49Df3

[@glamb_is_learning]

@@ITDoctor сорри, я наверно просмотрел обязательно пересмотрю спасибо, за ответ

[@glamb_is_learning]

VSCode Icons

[@a_gassi]

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

[@sk-yq3jm]

Почему вы не использовал сразу в классах b-block, mx-auto, mw ...

[@McKenaz]

У меня почему то не работает плавная прокрутка на FOOTER

[@sprutgym2001]

Актуален ли бутстрап сейчас? Стоит ли его учить?

[@serge2033]

не стоит

[@РНС_Саакашвили]

@@serge2033 полностью ?

[@АнтонМакаров-д5ю]

ITDoctor, в самом начале не выставляется градиент (переменные выставлены, код градиента взят из градиент-генератора), цвет полною первой переменной, второго цвета нет, может быть не установлен какой-нибудь плагин?

[@apreelrain]

Если это ещё актуально, то могу сказать, что, вероятнее всего, после тега url с pattern в скобках, была пропущена запятая перед указанием цвета ( т.е. сразу же после закрытия круглых скобок).

[@ТатьянаБочкарева-ч3э]

Большое спасибо за уроки. Лайк поставила :) Но, пожалуйста, каталОг :)

[@ITDoctor]

Пожалуйста

[@DanieL-s6o2v]

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

[@ITDoctor]

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

[@radist126]

Когда кликаешь на главном окне при открытом модальном, модальное закрывается, но в фоне продолжает воспроизводиться видео. Что делать, чтобы закрывалось и воспроизведение?

[@ITDoctor]

отслеживать событие закрытия окна и останавливать видео через js

[@Sergey-cz7ym]

Подскажите как сделать что бы страница в браузере обновлялась сразу при редактировании css или html (как на видео), а то мне приходится каждый раз нажимать кнопку Go Live

[@ITDoctor]

ну раз у вас сервер установлен все должно работать. Один раз запускаем а потом просто сохраняем файл после изменений и все обновляется само. Странно если у вас не так.

[@extremiss1134]

16:55 что это за сочетание клавиш? очень удобно)

[@ITDoctor]

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

[@ELEVEN1001]

Видео в модальном окне не появляется, пустота белая

[@facer9195]

После закрытия модального окна, видео продолжает молотить, если не нажал на паузу... Что-то не так сделал?

[@ITDoctor]

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

[@beerbellywell9160]

создал style.css в нем делаю padding для header, а он не работает, сделал вроде все как в видео, кто может проконсультировать?

[@relaxmeditation9993]

Не работает модальное окно Видеокурс по верстке для новичков HTML & CSS Заказать Modal title × ...

[@Ятоп-я6з]

богдан богом дан

[@relaxmeditation9993]

Все делаю ка указано, проблема в том что не работает модальное окно

[@ГлебКошин-н4в]

тоже не работает, не разобрался почему?

[@a_gassi]

14:38 - какой-то неработающий инструмент :/

[@anastasiialeva4377]

у меня треугольник не получился((00

[@senianga1]

круто!

[@ITDoctor]

Спасибо

[@fuxetsu]

я ничего не понимаю, все делаю специально все как вы, но ничего вообще не выходит, мдааааа...........

[@ITDoctor]

ну такого быть не может. что то же получается? скачать и подключить получилось? это уже что то. Вы к себе высокие требования возможно ставите. Не спешите. Если уровень не дотягивает то будет сложно. Можно сначала пройти основы и изучить html css почувствовать себя уверенней а потом переходить к этим урокам. это все таки не начальный уровень. kzbin.info/aero/PLuY6eeDuleINqbJtQv32qtDpTBopxuqs4 kzbin.info/aero/PLuY6eeDuleINJ5hIlBJWopSWHWDJYz_XW

[@Masimkaify]

var не работает в ИЕ

[@ITDoctor]

ie никто не использует. забудьте про него. А Новый edge на движке chromium поэтому там все работает так же как в Chrome

[@ВладимирМихайлов-м8ч]

Ну и где архив из описания этого видео?

[@ITDoctor]

в описании Файлы к уроку

[@Christ_Deviloshi-l2z]

У меня нет прав на программирование

[@ДильбарМухамедова-щ3я]

Получилось все кроме треугольника

[@daianab6399]

не могу подключить css к html

[@ITDoctor]

В чем проблема?

[@Xrustalleff]

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

[@ITDoctor]

Ну HTML и CSS понимать нужно. у меня в плейлистах можете подтянуть эти темы при необходимости

[@Xrustalleff]

@@ITDoctor а так же переменные и не толькл

[@turbo9284]

Подскажите вашу тему

[@ITDoctor]

Drakula kzbin.info/www/bejne/eISXiZivmqakba8

[@turbo9284]

@@ITDoctor спасибо, тоже поставил, только она у меня почему-то более светлая, хотя обычную выбрал

[@dimadima-f5g]

как тема называется ? СРОЧНОООООО !!!!!!!!

[@ITDoctor]

уточняйте что за тема. мало ли что вы имеете ввиду, как я должен вам ответить? Если тема в редакторе кода Dracula Official kzbin.info/www/bejne/eISXiZivmqakba8si=9IXwMhgWmtThMlVX

[@staffmember9311]

12:16 прокрутка

[@margofclm]

Кровь из ушей, невозможно слушать из-за катАлог 😢 а вот материал хороший, но увы

[@ITDoctor]

увы и ах

[@МистерБут-ф4т]

👍👍👍

[@fobiya-d9b]

Почему именно в моем яндексе плавная прокрутка не работает? Единственный вариант - самому писать через body { transform: translateY (XXXXpx) }?

[@Marina-1-7]

это может быть из-за параметров Винды: в окне Параметры быстродействия есть пункт: "Анимированные элементы упралвения и элементы внутри окна" - нужно, чтобы этот пункт был включен (галочка стояла)

[@ПавелС-ш4ц]

25:22 блин, не работает кнопка у меня почему-то. Кто знает, почему может не работать, подскажите пжл

[@ITDoctor]

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

[@MaoMaoNekooo]

Была такая же проблема, оказалось, что в русскоязычном руководстве допущена ошибка в атрибутах, нужно указать вот эти data-bs-toggle="modal" data-bs-target="#exampleModal", которые были в видео

[@Dubik_Ks]

почему у меня перезаписывается фоновая заливка на просто картинку? Картинку скачала сама :root{ --color1:#1d33c4; --color2:#9a3ec4; } header{ background:url("../img/img.png"), var(--color1); background:url("../img/img.png"), -moz-linear-gradient(left, var(--color1) 0%, var(--color2) 100%); background: url("../img/img.png"), -webkit-linear-gradient(left, var(--color1) 0%,var(--color2) 100%); background: url("../img/img.png"), linear-gradient(to right, var(--color1) 0%,var(--color2) 100%); filter:url("../img/img.png"), progid:DXImageTransform.Microsoft.gradient( startColorstr=var(--color1), endColorstr=var(--color2),GradientType=1 ); }

[@Dubik_Ks]

вопрос решен))) скачала не png. а jpg. Фон был не прозрачный

[@ITDoctor]

рад что справились

[@mefistofelesfuckgood]

Отличный урок, спасибо! Немного помудохался из за.своего устаревшего браузера и компа но в конце все ПОЛУЧИЛОСЬ!

[@ITDoctor]

Рад что получилось

[@uvencosuper3471]

Пошто нужон бутстрап, коли есть флекс бокс?)

[@ITDoctor]

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

[@iskanderalyautdinov7382]

Спасибо!

[@ITDoctor]

Пожалуйста