Тёмный
Coding With Topchiy
Coding With Topchiy
Coding With Topchiy
Подписаться
Hello everyone:)

Добро пожаловать на мой канал: «Coding With Topchiy”, меня зовут Дмитрий. Этот канал создан с целью помочь вам в изучении веб-дизайна, HTML, CSS и другое.

Подписывайтесь на мой канал чтобы получать уведомления о новых видео и получать больше полезной информации об HTML и CSS.

Спасибо:)

-------------------------------------------------------------------

Welcome to my channel: "Coding With Topchiy". This channel was created to help you learn web design, HTML, CSS and more.

Subscribe to my channel to be notified of new videos and get more useful information about HTML and CSS.

Thanks:)
Комментарии
@mikhaildolgov
@mikhaildolgov 13 часов назад
😎👍так держать!
@codingwithtopchiy
@codingwithtopchiy 13 часов назад
👍🙂
@dmitrypoluhin2955
@dmitrypoluhin2955 13 часов назад
Супер! Дмитрий, а еще какие навинки есть???
@codingwithtopchiy
@codingwithtopchiy 13 часов назад
Спасибо) Еще есть несколько новых математических функций round(), rem() и тд.
@uismax
@uismax 13 часов назад
Классно. Два самых применимых способов. Без сомнения, как всегда, кратко и доходчиво.
@codingwithtopchiy
@codingwithtopchiy 13 часов назад
Спасибо)
@doktoraybolit5732
@doktoraybolit5732 17 часов назад
Дружище! Супер крут! Спасибо!!!
@codingwithtopchiy
@codingwithtopchiy 17 часов назад
Пожалуйста)
@ParnithaRE1
@ParnithaRE1 18 часов назад
Наконец-то применил такой эффект на сайте, в фотоменю ишопа. Вышло очень достойно! Ещё раз спасибо за такие полезные уроки!
@codingwithtopchiy
@codingwithtopchiy 17 часов назад
Пожалуйста) Рад, что эффект пригодился 👍
@mikhaildolgov
@mikhaildolgov День назад
Дмитрий, спасибо за урок!
@codingwithtopchiy
@codingwithtopchiy День назад
Пожалуйста)
@dmitrypoluhin2955
@dmitrypoluhin2955 День назад
Отлично!!!!
@codingwithtopchiy
@codingwithtopchiy День назад
Спасибо)
@user-sb9ix5rr9g
@user-sb9ix5rr9g День назад
Спасибо)
@codingwithtopchiy
@codingwithtopchiy День назад
Пожалуйста)
@moumoumoumou8199
@moumoumoumou8199 2 дня назад
Очень полезная информация, хорошо бы еще такое же видео, но про адаптацию картинок, особенно если у них размеры разные, а карточку презентации нужно для всех одинаковую. Спасибо. Я посмотрела также ваше видео про 62,5% для font-size. Если вы работаете в этой сфере, делитесь с нами такой информации. К сожалению , очень мало просмотров (может эта тема уже не актуальна в реальной работе).
@codingwithtopchiy
@codingwithtopchiy День назад
Приветствую! Спасибо за обратную связь. Это видео может быть полезным по изображениям: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-UwMQa8r4Kb8.htmlsi=TLtSVPvXI2VeXhIv Обязательно буду делится полезными знаниями!
@flyte1
@flyte1 2 дня назад
А как базу данных добавить? Конектнуть к гитхабу Я чацник
@codingwithtopchiy
@codingwithtopchiy 2 дня назад
Приветствую! Никак, GitHub предназначен для работы со статичными страницами.
@flyte1
@flyte1 2 дня назад
@@codingwithtopchiy а как вообще подключать к сайту
@codingwithtopchiy
@codingwithtopchiy 2 дня назад
GitHub - это бесплатный хостинг, вы можете делиться ссылками сайтов залитыми через GitHub, для этого нужно залить код HTML, CSS и JavaScript это может быть простой landing. Чтобы подключить базы данных MySQL, PHP и тд. можно заливать сайты на платные хостинги, такие как hostinger.com или godaddy.com.
@mikhaildolgov
@mikhaildolgov 2 дня назад
😎👍super!
@codingwithtopchiy
@codingwithtopchiy 2 дня назад
👍🙂
@sergejchap62
@sergejchap62 2 дня назад
Супер. Надо б попрактивать и можно ли курсор слева вылетает слева, если справа - вылетает справа другой текст из <p> 👌👍
@user-fn1cz7xe4d
@user-fn1cz7xe4d 2 дня назад
Отличное видео! Класс! 👍 👍 👍
@codingwithtopchiy
@codingwithtopchiy 2 дня назад
Спасибо)
@dmitrypoluhin2955
@dmitrypoluhin2955 2 дня назад
Дмитрий Спасибо Вам огромное! Простым языком и понятно!
@codingwithtopchiy
@codingwithtopchiy 2 дня назад
Пожалуйста)
@Mr-dd6eo
@Mr-dd6eo 2 дня назад
Бро я сколько облазил не нашёл, подскажи вот после отправки данных формы нас перенаправляют на страницу успеха: как мне на этой странице темный фон сделать? это собственная страница web3form и как мне там что-то изменить я не понимаю
@codingwithtopchiy
@codingwithtopchiy 2 дня назад
Приветствую! Вот ссылка на документацию: docs.web3forms.com там есть такой пункт, как customization возможно там будет ответ.
@Mr-dd6eo
@Mr-dd6eo 2 дня назад
@@codingwithtopchiy Привет! уже посмотрел документацию, к сожалению там ничего не нашёл (( только через redirect можно кастомизировать видимо
@dmitrypoluhin2955
@dmitrypoluhin2955 3 дня назад
Решил проблему. Бэкграунд колор надо задать FIGURE. например #222. а у Боди РЭД и тогда опасити будет затенять картинку от #222. а не от Боди. Мы же просвечиваем свойством Опасити картинку, а там цвет БОДИ)) За уроки большое СПАСИБО!
@dmitrypoluhin2955
@dmitrypoluhin2955 3 дня назад
Дмитрий обратил внимание если у body бэкграунд оставить по умолчанию (в данном ролике), то затенить картинку не получилось. все приобретает цвет Body по умолчанию (в белый цвет)... Если у BODY цвет красный, то и opacity 0.4 на img окрашивает все в красное. Это наверно у меня так....
@Mr-dd6eo
@Mr-dd6eo 3 дня назад
всё супер, спс за фичу
@codingwithtopchiy
@codingwithtopchiy 3 дня назад
Пожалуйста)
@mikhaildolgov
@mikhaildolgov 3 дня назад
Дмитрий, Вы большой молодец! Полезное видео!! Спасибо!!!
@codingwithtopchiy
@codingwithtopchiy 3 дня назад
Пожалуйста)
@user-ky3so3wk6n
@user-ky3so3wk6n 3 дня назад
Что вы добавили из Java Script ?
@codingwithtopchiy
@codingwithtopchiy 3 дня назад
Приветствую! Код в открывающий тег кнопки.
@Yury_Komar
@Yury_Komar 3 дня назад
а можно source текстом, а то набирать самому не очень зочется
@codingwithtopchiy
@codingwithtopchiy 3 дня назад
Приветствую! К сожалению на это пример, нет source кода.
@Yury_Komar
@Yury_Komar 3 дня назад
@@codingwithtopchiy жаль
@dmitrypoluhin2955
@dmitrypoluhin2955 3 дня назад
Дмитрий Здравствуйте! Все оверлеи по вашим видео получились, кроме с лева на право и с право на лево. текст на оверлее как будто бы изначально большой, а в момент ховера он собирается как надо (в момент начала оверлея блок с текстом и параграфом занимает 100% высоты блока и тут же собирается в центре как я и задавал). Как будто бы конструктор....(
@codingwithtopchiy
@codingwithtopchiy 3 дня назад
Приветствую! Если я правильно понял, текст растягивается на всю ширину, тогда вам нужно указать определенную ширину и высоту для блока с текстом или используйте свойство white-space: wrap чтобы текст не растягивался, а разрывался.
@codingwithtopchiy
@codingwithtopchiy 3 дня назад
Постараюсь на днях сделать еще несколько примеров с overlay 👍
@dmitrypoluhin2955
@dmitrypoluhin2955 3 дня назад
@@codingwithtopchiy Проблему решил. было при наведении мыши на блок начинался хомвер и буквы параграфа и текста собирались с верху и снизу (из ТОП 0 и БОТТОМ 0) в центр... Но задал фиксированную ширину блоку с текстом и параграфом, который в блоке Оверлай, позиционированный абсолютно и все стало выезжать с лева и права как надо.... хз почему так.
@neondeath5621
@neondeath5621 4 дня назад
Добрый день! Я сделал это несколько часов назад и не получилось. Я сделал точ в точ как показано в видео.
@codingwithtopchiy
@codingwithtopchiy 4 дня назад
Приветствую! Скорее всего есть какая-то ошибка, проверьте код еще разок.
@neondeath5621
@neondeath5621 3 дня назад
@@codingwithtopchiy у вас там был Бустраб?
@codingwithtopchiy
@codingwithtopchiy 3 дня назад
Не было.
@thezorged
@thezorged 4 дня назад
Чел ты лучший
@codingwithtopchiy
@codingwithtopchiy 4 дня назад
Спасибо)
@mikhaildolgov
@mikhaildolgov 4 дня назад
😎👍класс!
@codingwithtopchiy
@codingwithtopchiy 4 дня назад
Спасибо)
@Mr-dd6eo
@Mr-dd6eo 4 дня назад
чел ты гений, а почему ты используешь единицы измерения rem а не стандартные px?
@codingwithtopchiy
@codingwithtopchiy 4 дня назад
Спасибо) Единицы rem лучше адаптируются.
@Mr-dd6eo
@Mr-dd6eo 4 дня назад
@@codingwithtopchiy на другой видос заглянул уже, спасибо за ответ!
@Mr-dd6eo
@Mr-dd6eo 4 дня назад
найс
@codingwithtopchiy
@codingwithtopchiy 4 дня назад
👍
@terroz4641
@terroz4641 4 дня назад
ссылки не работают
@codingwithtopchiy
@codingwithtopchiy 4 дня назад
Приветствую! Проверяйте код, значит что-то не верно прописали.
@user-xp6ld5wl8i
@user-xp6ld5wl8i 5 дней назад
Спасибо! Я хочу сделать несколько таких прокруток на странице. Как мне это сделать? Просто, у меня функция срабатывает только на один скрол( блок с фото).
@codingwithtopchiy
@codingwithtopchiy 5 дней назад
Приветствую! Пожалуйста) Для другой прокрутки создайте такой же скрипт, только с другим названием блока и переменных. Например, если первый называется box-container, второй может быть box-container-1 и тд.
@user-xp6ld5wl8i
@user-xp6ld5wl8i 4 дня назад
@@codingwithtopchiy Понял, спасибо! У меня почему-то ещё не работает horizontScroll.style.scrollBehavior = "smooth";. Что не так?
@codingwithtopchiy
@codingwithtopchiy 4 дня назад
Сложно так сказать, возможно есть какая-то мелкая ошибка, проверьте код еще разок.
@user-xp6ld5wl8i
@user-xp6ld5wl8i 4 дня назад
@@codingwithtopchiy Вроде всё правильно
@user-vx2kx6oe6l
@user-vx2kx6oe6l 5 дней назад
Большое спасибо ... 🙂
@codingwithtopchiy
@codingwithtopchiy 5 дней назад
Пожалуйста)
@moumoumoumou8199
@moumoumoumou8199 5 дней назад
Вот у меня вопрос: для вашего кода для font-size и padding вы указываете либо rem, либо vw, либо %; как вы определяете что именно нужно использовать и при каких условиях. Не у кого на каналах не нашла обьяснения. Спасибо
@codingwithtopchiy
@codingwithtopchiy 5 дней назад
Приветствую! Честно говоря, сложно объяснить по простому, это больше наверное уже связано с опытом. Все эти единицы rem, vw, vh и % отлично адаптируются, поэтому я их и использую. Могу дать следующую рекомендацию, изучите все единицы измерений в CSS, затем определите для себя какие лучше будут подходить в разных ситуациях. Вот например видео о единицах rem: Единица REM в CSS - детальный разбор ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Qj5mBnC5mCg.html Также в этом плей-листе есть разбор и других единиц, можете ознакомится, надеюсь будет полезно 👍
@mikhaildolgov
@mikhaildolgov 5 дней назад
😎👍отличное видео!
@codingwithtopchiy
@codingwithtopchiy 5 дней назад
Спасибо)
@i_PhotoArtTop_Stream
@i_PhotoArtTop_Stream 5 дней назад
а как сделать 2 кнопки? очень нужно
@codingwithtopchiy
@codingwithtopchiy 5 дней назад
Приветствую! Скопируйте первую кнопку и добавьте другие стили если нужно.
@yuriyzadorozhnyi3849
@yuriyzadorozhnyi3849 5 дней назад
Дякую Вам Дмитре ! Як завжди все доступно і зрозуміло пояснили .
@codingwithtopchiy
@codingwithtopchiy 5 дней назад
Дякую за зворотній звʼязок)
@yuriyzadorozhnyi3849
@yuriyzadorozhnyi3849 5 дней назад
Дякую Вам! Перше що зробив находячись в відпустці після року на війні це зайшов на Ваш канал . За цей час все забулось , буду вчити по новому , потрібно жити далі . Ваш контент один з найкращих , бажаю всебічного розвитку Вам і вашому каналу !
@codingwithtopchiy
@codingwithtopchiy 5 дней назад
Дякую за підтримку!) Вам теж бажаю розвитку і успіхів в цій справі, головне не зупинятися і не опускати руки 👍
@exenoob4ik
@exenoob4ik 5 дней назад
а как обновить сайт если там ошибка?
@codingwithtopchiy
@codingwithtopchiy 5 дней назад
Приветствую! Нужно все проверить и понять почему возникает ошибка, скорей всего что-то неправильно подключилось.
@dmitrypoluhin2955
@dmitrypoluhin2955 6 дней назад
Дмитрий, а если нужно, что бы Модальное окно открывалось именно по клике на кнопку, о нужно в JS написать document.queryselectorALL('box-container . box .button') и далее как в ролике?
@codingwithtopchiy
@codingwithtopchiy 5 дней назад
По идее так, нужно попробовать.
@dmitrypoluhin2955
@dmitrypoluhin2955 6 дней назад
СУПЕР! о что Волшебник прописал!!! нижайший поклон ВАМ!!!
@codingwithtopchiy
@codingwithtopchiy 5 дней назад
Пожалуйста)
@mikhaildolgov
@mikhaildolgov 6 дней назад
😎👍класс!
@codingwithtopchiy
@codingwithtopchiy 6 дней назад
Спасибо)
@Salrad1
@Salrad1 6 дней назад
Полезно!
@codingwithtopchiy
@codingwithtopchiy 6 дней назад
Спасибо)
@pipiter
@pipiter 6 дней назад
Бро где ты был раньше??? Спасибо))))
@codingwithtopchiy
@codingwithtopchiy 6 дней назад
Пожалуйста) Всему свое время 😀
@user-sb9ix5rr9g
@user-sb9ix5rr9g 7 дней назад
Спасибо!
@codingwithtopchiy
@codingwithtopchiy 6 дней назад
Пожалуйста)
@user-fn1cz7xe4d
@user-fn1cz7xe4d 7 дней назад
Очень полезное видео! Спасибо за урок! 👍
@codingwithtopchiy
@codingwithtopchiy 7 дней назад
Пожалуйста)
@mikhaildolgov
@mikhaildolgov 7 дней назад
Дмитрий, спасибо. Полезное видео.
@codingwithtopchiy
@codingwithtopchiy 7 дней назад
Пожалуйста)
@babaikaboys
@babaikaboys 7 дней назад
как сделать вторую кнопку?
@codingwithtopchiy
@codingwithtopchiy 7 дней назад
Приветствую! Скопируйте первую и добавьте стили, если нужно что-то изменить.
@babaikaboys
@babaikaboys 7 дней назад
@@codingwithtopchiy спасибо большое
@user-ok5uq2wx8o
@user-ok5uq2wx8o 7 дней назад
Отличный формат и урок, было бы еще полезней если бы пару слов говорил про то чем служат аргументы непопулярных свойств, например я не понял что означают 3 значения в scale3d. 👍
@codingwithtopchiy
@codingwithtopchiy 7 дней назад
Приветствую! Спасибо за обратную связь 👍 Пожелание понял. scale3d - 1 значение масштаб горизонтальный, 2 значение вертикальный, 3 значение масштаб в глубину.
@yurimaysable963
@yurimaysable963 7 дней назад
Спасибо за видео!
@codingwithtopchiy
@codingwithtopchiy 7 дней назад
Пожалуйста)
@dmitrypoluhin2955
@dmitrypoluhin2955 8 дней назад
Дмитрий Здравствуйте. Не могу сообразить. Есть слайдер, состоящий из нескольких карточек (картинка, текст, кнопка "Подробнее"). И Вот нужно нажать на "Подробнее" что бы появилось модальное окно размером чуть больше карточки с описанием и прокруткой вниз(в описании карточки). Как это в HTML прописать не пойму.....
@codingwithtopchiy
@codingwithtopchiy 8 дней назад
Приветствую! В целом идея такая, создаете карточку, затем модальное окно и затем нужно с помощью JS подключить возможность открывать модальное окно при клике на кнопку «Подробнее» и закрывать при клике на крестик. Постараюсь на днях записать видео на эту тему 👍
@dmitrypoluhin2955
@dmitrypoluhin2955 7 дней назад
Эту модельную карточку нужно делать через тэг dialog?
@codingwithtopchiy
@codingwithtopchiy 7 дней назад
@dmitrypoluhin2955 Не обязательно, можно через div.