- Видео 600
- Просмотров 392 105
Coding With Topchiy
Украина
Добавлен 1 июн 2022
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:)
Добро пожаловать на мой канал: «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:)
Responsive Advantages of Yoga Section using only HTML & CSS step by step
В этом видео вы узнаете, как сделать адаптивную секцию advantages of yoga используя HTML & CSS шаг за шагом.
Адаптивная секция используя HTML & CSS.
Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm.
Have a nice day, GOD bless you ❤️
🔗 Images: surl.li/tzsai
👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy
💵 Поддержать канал (support channel): 5375411204111681 (universal bank || mono)
💵 Поддержать канал (support channel): send.monobank.ua/jar/3Aze2gcvVa
💵 Поддержать канал (support channel): www.patreon.com/CodingWithTopchiy
👍 Subscribe: ruclips.net/channel/UC93wVeK8kdQAHQYFjpHfFvw
😀Спасибо за просмотр!😀
Адаптивная секция используя HTML & CSS.
Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm.
Have a nice day, GOD bless you ❤️
🔗 Images: surl.li/tzsai
👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy
💵 Поддержать канал (support channel): 5375411204111681 (universal bank || mono)
💵 Поддержать канал (support channel): send.monobank.ua/jar/3Aze2gcvVa
💵 Поддержать канал (support channel): www.patreon.com/CodingWithTopchiy
👍 Subscribe: ruclips.net/channel/UC93wVeK8kdQAHQYFjpHfFvw
😀Спасибо за просмотр!😀
Просмотров: 42
Видео
Анимация для кнопки Play используя HTML & CSS шаг за шагом || Play button with animation using CSS
Просмотров 684 часа назад
В этом видео вы узнаете, как сделать анимацию для кнопки Play используя HTML & CSS шаг за шагом. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy 💵 Поддержать канал (support channel): 5375411204111681 (universal bank || mono) 💵 Поддержать канал (s...
Этот & символ в CSS можно использовать вместо корневых элементов html и :root для переменных в CSS
Просмотров 1147 часов назад
Этот & символ в CSS можно использовать вместо корневых элементов html и :root при добавлении переменных. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy 💵 Поддержать канал (support channel): 5375411204111681 (universal bank || mono) 💵 Поддержать ...
Трансформации в CSS || Свойство transform в CSS || Tranform property in CSS || Full CSS course
Просмотров 979 часов назад
В этом видеоуроке вы узнаете, что такое трансформации в CSS, каких типов они бывают и также узнаете, что такое свойство transform в CSS и его значениях. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy 💵 Поддержать канал (support channel): 5375411...
Overlay effect on hover from left and right using 2 ways only HTML & CSS step by step
Просмотров 12112 часов назад
В этом видео вы узнаете, как сделать эффект наложения при наведении на блок с левой стороны и правой стороны двумя способами. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 🔗 👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy 💵 Поддержать канал (support channel): 5375411204111681 (universal bank...
Верстка карточки товара с всплывающим видео при клике на кнопку || Video popup on click button JS
Просмотров 14214 часов назад
В этом видео вы узнаете, как сделать карточку товара со всплывающим видео при клике на кнопку используя HTML, CSS & JavaScript Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 🔗 Images & Video: surl.li/txnay 👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy 💵 Поддержать канал (support channel): 5...
Как сделать анимированную иконку используя HTML & CSS || Animated location icon using HTML & CSS
Просмотров 8816 часов назад
В этом видео вы узнаете, как сделать анимированную иконку используя HTML & CSS шаг за шагом. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 🔗 👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy 💵 Поддержать канал (support channel): 5375411204111681 (universal bank || mono) 💵 Поддержать канал (sup...
Как сделать кнопку наверх HTML, CSS & JavaScript || Go to TOP button using HTML, CSS & JavaScript
Просмотров 13119 часов назад
В этом видео вы узнаете, как сделать кнопку наверх которая будет появляться при скролле вниз и исчезать при скролле вверх, а также будет переносить вверх страницы при клике. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 🔗 👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy 💵 Поддержать канал (su...
Верстка адаптивных карточек товаров с модальным окном при клике используя HTML, CSS & JavaScript
Просмотров 11821 час назад
В этом видео вы узнаете, как сделать адаптивные карточки товаров с модальным окном при клике используя HTML, CSS & JavaScript шаг за шагом. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 🔗 Images: surl.li/tvsmv 🔗 Scroll Bar Selectors: codingwithtopchiy.github.io/scrollbar.selectors.github.io/ 👍 Полезная информация для программирования и дизайна...
Верстка адаптивной карточки товара HTML & CSS || Responsive product cards using HTML & CSS Flexbox
Просмотров 269День назад
В этом видео вы узнаете, как сделать адаптивные карточки с товаром используя HTML & CSS Flexbox шаг за шагом. Карточка товара используя Flexbox CSS. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 🔗 Images: surl.li/tvmwq 👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy 💵 Поддержать канал (suppo...
Верстка футера для сайта HTML & CSS Flexbox || Responsive footer design using HTML & CSS Flexbox
Просмотров 236День назад
🔗 Исходный код (source code): www.patreon.com/posts/104650620 В этом видео вы узнаете, как сделать адаптивный футер для сайта используя HTML & CSS Flexbox шаг за шагом. Responsive footer design for webiste using HTML & CSS FlexBox step by step. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 👍 Полезная информация для программирования и дизайна н...
Как сделать анимированный эффект для тени используя HTML & CSS || Animated effect for shadow CSS
Просмотров 111День назад
🔗 Исходный код (source code): www.patreon.com/posts/104650504 В этом видео вы узнаете, как сделать анимированный эффект для тени используя HTML & CSS шаг за шагом. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 🔗 Logo: logoipsum.com/ 👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy 💵 Поддержат...
Cool hover effect using only HTML & CSS step by step
Просмотров 140День назад
🔗 Исходный код (source code): www.patreon.com/posts/104650388 В этом видео вы узнаете, как сделать крутой hover effect при наведении на блок используя HTML & CSS шаг за шагом. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 🔗 Image: picjumbo.com/ 👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy...
Как стилизовать тег hr с помощью CSS || Style hr tag with CSS
Просмотров 10814 дней назад
В этом видео вы узнаете, как стилизовать тег hr с помощью CSS. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 👍 Полезная информация для программирования и дизайна на моем телеграм-канале: t.me/CodingWithTopchiy 💵 Поддержать канал (support channel): 5375411204111681 (universal bank || mono) 💵 Поддержать канал (support channel): send.monobank.ua/...
Outline hover effect using only HTML & CSS step by step
Просмотров 12914 дней назад
🔗 Исходный код (source code): www.patreon.com/posts/104650223 В этом видео вы узнаете, как сделать outline hover effect используя только HTML & CSS шаг за шагом. Please hit the LIKE 👍, it`ll help to grow on RUclips algorithm. Have a nice day, GOD bless you ❤️ 🔗 Images: picjumbo.com/ ✅ Адаптивный шрифт с помощью функции calc() CSS: ruclips.net/video/sekEFcrhJeA/видео.html ✅ Адаптивный шрифт с по...
Read more and Read less buttons using only HTML & CSS step by step
Просмотров 8814 дней назад
Read more and Read less buttons using only HTML & CSS step by step
How to PIN locations on Google maps using HTML & CSS || Как добавить маркеры/отметки на Google maps
Просмотров 10814 дней назад
How to PIN locations on Google maps using HTML & CSS || Как добавить маркеры/отметки на Google maps
Блок с hover effect при наведении с помощью transition-delay используя HTML & CSS шаг за шагом
Просмотров 15014 дней назад
Блок с hover effect при наведении с помощью transition-delay используя HTML & CSS шаг за шагом
Свойство transition в CSS || Transition property in CSS || Full CSS course || CSS полный курс
Просмотров 11914 дней назад
Свойство transition в CSS || Transition property in CSS || Full CSS course || CSS полный курс
Responsive timeline using only HTML & CSS step by step
Просмотров 17714 дней назад
Responsive timeline using only HTML & CSS step by step
Свойство transition-delay в CSS || Property transition-delay in CSS || Full CSS course
Просмотров 6621 день назад
Свойство transition-delay в CSS || Property transition-delay in CSS || Full CSS course
Load more button using HTML, CSS & JavaScript
Просмотров 17721 день назад
Load more button using HTML, CSS & JavaScript
Titles for sections using HTML & CSS step by step
Просмотров 9321 день назад
Titles for sections using HTML & CSS step by step
Свойство transition-timing-function в CSS || Property transition-timing-function in CSS
Просмотров 11121 день назад
Свойство transition-timing-function в CSS || Property transition-timing-function in CSS
Как добавить тень к объекту на прозрачном PNG изображении без фона || How to add shadow to png image
Просмотров 11521 день назад
Как добавить тень к объекту на прозрачном PNG изображении без фона || How to add shadow to png image
Свойство transition-property в CSS || Property transition-property in CSS || CSS Full course
Просмотров 11121 день назад
Свойство transition-property в CSS || Property transition-property in CSS || CSS Full course
Адаптивная E-commerce галерея изображений используя HTML, CSS & JacaScript
Просмотров 13528 дней назад
Адаптивная E-commerce галерея изображений используя HTML, CSS & JacaScript
Три способа сделать кнопку с небольшим затемнением при наведении используя HTML & CSS hover effect
Просмотров 15928 дней назад
Три способа сделать кнопку с небольшим затемнением при наведении используя HTML & CSS hover effect
Свойство transition-duration в CSS || Transition-duration property in CSS || CSS Full course
Просмотров 69Месяц назад
Свойство transition-duration в CSS || Transition-duration property in CSS || CSS Full course
Our Projects Section using only HTML & CSS Flex Boxes
Просмотров 208Месяц назад
Our Projects Section using only HTML & CSS Flex Boxes
Очень круто 😮😮
Спасибо)
😎👍круто!
Спасибо)
Здравствуйте, спасибо за урок)🤝
Приветствую! Пожалуйста)
Всё настолько просто....
спасибо за так сказать как уроки помагають для начинающих айтишникам
Пожалуйста) Рад, что есть польза 👍
* { } наверное выполняет аналогично? Т.е. пятый вариант. Или у звездочки есть какие-то ограничения?
Приветствую! С универсальным селектором (*) также будет работать 👍 Просто как правило переменные выделяют как-то отдельно, чаще всего с помощью html или псевдокласса :root, а символ & отличная альтернатива.
😎👍
👍🙂
Спасибо. Когда проверил код на Codepen все работает но когда загрузил код на Гитхаб почему то не работает. Делаю все как на видео в чем проблема подскажите
Приветствую! Сложно оценить в чем может быть проблема, возможно что-то не верно указали, нужно проверять сначала.
Дякую Вам Дмитре за цікаву і потрібну інформацію
Будь ласка)
😎👍так держать!
👍🙂
Супер! Дмитрий, а еще какие навинки есть???
Спасибо) Еще есть несколько новых математических функций round(), rem() и тд.
Классно. Два самых применимых способов. Без сомнения, как всегда, кратко и доходчиво.
Спасибо)
Дружище! Супер крут! Спасибо!!!
Пожалуйста)
Наконец-то применил такой эффект на сайте, в фотоменю ишопа. Вышло очень достойно! Ещё раз спасибо за такие полезные уроки!
Пожалуйста) Рад, что эффект пригодился 👍
Дмитрий, спасибо за урок!
Пожалуйста)
Отлично!!!!
Спасибо)
Спасибо)
Пожалуйста)
Очень полезная информация, хорошо бы еще такое же видео, но про адаптацию картинок, особенно если у них размеры разные, а карточку презентации нужно для всех одинаковую. Спасибо. Я посмотрела также ваше видео про 62,5% для font-size. Если вы работаете в этой сфере, делитесь с нами такой информации. К сожалению , очень мало просмотров (может эта тема уже не актуальна в реальной работе).
Приветствую! Спасибо за обратную связь. Это видео может быть полезным по изображениям: ruclips.net/video/UwMQa8r4Kb8/видео.htmlsi=TLtSVPvXI2VeXhIv Обязательно буду делится полезными знаниями!
А как базу данных добавить? Конектнуть к гитхабу Я чацник
Приветствую! Никак, GitHub предназначен для работы со статичными страницами.
@@codingwithtopchiy а как вообще подключать к сайту
GitHub - это бесплатный хостинг, вы можете делиться ссылками сайтов залитыми через GitHub, для этого нужно залить код HTML, CSS и JavaScript это может быть простой landing. Чтобы подключить базы данных MySQL, PHP и тд. можно заливать сайты на платные хостинги, такие как hostinger.com или godaddy.com.
😎👍super!
👍🙂
Супер. Надо б попрактивать и можно ли курсор слева вылетает слева, если справа - вылетает справа другой текст из <p> 👌👍
Отличное видео! Класс! 👍 👍 👍
Спасибо)
Дмитрий Спасибо Вам огромное! Простым языком и понятно!
Пожалуйста)
Бро я сколько облазил не нашёл, подскажи вот после отправки данных формы нас перенаправляют на страницу успеха: как мне на этой странице темный фон сделать? это собственная страница web3form и как мне там что-то изменить я не понимаю
Приветствую! Вот ссылка на документацию: docs.web3forms.com там есть такой пункт, как customization возможно там будет ответ.
@@codingwithtopchiy Привет! уже посмотрел документацию, к сожалению там ничего не нашёл (( только через redirect можно кастомизировать видимо
Решил проблему. Бэкграунд колор надо задать FIGURE. например #222. а у Боди РЭД и тогда опасити будет затенять картинку от #222. а не от Боди. Мы же просвечиваем свойством Опасити картинку, а там цвет БОДИ)) За уроки большое СПАСИБО!
Дмитрий обратил внимание если у body бэкграунд оставить по умолчанию (в данном ролике), то затенить картинку не получилось. все приобретает цвет Body по умолчанию (в белый цвет)... Если у BODY цвет красный, то и opacity 0.4 на img окрашивает все в красное. Это наверно у меня так....
всё супер, спс за фичу
Пожалуйста)
Дмитрий, Вы большой молодец! Полезное видео!! Спасибо!!!
Пожалуйста)
Что вы добавили из Java Script ?
Приветствую! Код в открывающий тег кнопки.
а можно source текстом, а то набирать самому не очень зочется
Приветствую! К сожалению на это пример, нет source кода.
@@codingwithtopchiy жаль
Дмитрий Здравствуйте! Все оверлеи по вашим видео получились, кроме с лева на право и с право на лево. текст на оверлее как будто бы изначально большой, а в момент ховера он собирается как надо (в момент начала оверлея блок с текстом и параграфом занимает 100% высоты блока и тут же собирается в центре как я и задавал). Как будто бы конструктор....(
Приветствую! Если я правильно понял, текст растягивается на всю ширину, тогда вам нужно указать определенную ширину и высоту для блока с текстом или используйте свойство white-space: wrap чтобы текст не растягивался, а разрывался.
Постараюсь на днях сделать еще несколько примеров с overlay 👍
@@codingwithtopchiy Проблему решил. было при наведении мыши на блок начинался хомвер и буквы параграфа и текста собирались с верху и снизу (из ТОП 0 и БОТТОМ 0) в центр... Но задал фиксированную ширину блоку с текстом и параграфом, который в блоке Оверлай, позиционированный абсолютно и все стало выезжать с лева и права как надо.... хз почему так.
Добрый день! Я сделал это несколько часов назад и не получилось. Я сделал точ в точ как показано в видео.
Приветствую! Скорее всего есть какая-то ошибка, проверьте код еще разок.
@@codingwithtopchiy у вас там был Бустраб?
Не было.
Чел ты лучший
Спасибо)
😎👍класс!
Спасибо)
чел ты гений, а почему ты используешь единицы измерения rem а не стандартные px?
Спасибо) Единицы rem лучше адаптируются.
@@codingwithtopchiy на другой видос заглянул уже, спасибо за ответ!
найс
👍
ссылки не работают
Приветствую! Проверяйте код, значит что-то не верно прописали.
Спасибо! Я хочу сделать несколько таких прокруток на странице. Как мне это сделать? Просто, у меня функция срабатывает только на один скрол( блок с фото).
Приветствую! Пожалуйста) Для другой прокрутки создайте такой же скрипт, только с другим названием блока и переменных. Например, если первый называется box-container, второй может быть box-container-1 и тд.
@@codingwithtopchiy Понял, спасибо! У меня почему-то ещё не работает horizontScroll.style.scrollBehavior = "smooth";. Что не так?
Сложно так сказать, возможно есть какая-то мелкая ошибка, проверьте код еще разок.
@@codingwithtopchiy Вроде всё правильно
Большое спасибо ... 🙂
Пожалуйста)
Вот у меня вопрос: для вашего кода для font-size и padding вы указываете либо rem, либо vw, либо %; как вы определяете что именно нужно использовать и при каких условиях. Не у кого на каналах не нашла обьяснения. Спасибо
Приветствую! Честно говоря, сложно объяснить по простому, это больше наверное уже связано с опытом. Все эти единицы rem, vw, vh и % отлично адаптируются, поэтому я их и использую. Могу дать следующую рекомендацию, изучите все единицы измерений в CSS, затем определите для себя какие лучше будут подходить в разных ситуациях. Вот например видео о единицах rem: Единица REM в CSS - детальный разбор ruclips.net/video/Qj5mBnC5mCg/видео.html Также в этом плей-листе есть разбор и других единиц, можете ознакомится, надеюсь будет полезно 👍
😎👍отличное видео!
Спасибо)
а как сделать 2 кнопки? очень нужно
Приветствую! Скопируйте первую кнопку и добавьте другие стили если нужно.
Дякую Вам Дмитре ! Як завжди все доступно і зрозуміло пояснили .
Дякую за зворотній звʼязок)
Дякую Вам! Перше що зробив находячись в відпустці після року на війні це зайшов на Ваш канал . За цей час все забулось , буду вчити по новому , потрібно жити далі . Ваш контент один з найкращих , бажаю всебічного розвитку Вам і вашому каналу !
Дякую за підтримку!) Вам теж бажаю розвитку і успіхів в цій справі, головне не зупинятися і не опускати руки 👍
а как обновить сайт если там ошибка?
Приветствую! Нужно все проверить и понять почему возникает ошибка, скорей всего что-то неправильно подключилось.