VIMP dev — верстка сайтов
VIMP dev — верстка сайтов
  • 72
  • 168 220
Стрим. Верстаем макет и общаемся. Ответы на вопросы
Перезалив стрима с версткой макета. Часть 1
Стили для селекта
th-cam.com/video/4SEhtHEw2Ow/w-d-xo.html
Модальное окно на HTML
th-cam.com/video/m-mWUNUdtss/w-d-xo.html
Продвинутая адаптивная верстка - CSS container queries
th-cam.com/video/LVGBY3j4N_o/w-d-xo.html
Логические свойства в CSS
th-cam.com/video/uPvivRLg0Go/w-d-xo.html
Верстку для обзора отправлять сюда:
t.me/joinchat/RLcz-wL3yKs0ZDMy
Привет! Меня зовут Тима и на этом канале я показываю и рассказываю как верстать современные сайты. Делюсь интересными и полезными фишками этого ремесла. Так же регулярно выпускаю видео с разбором верстки подписчиков, указываю на их ошибки и предлагаю способы их решения. Не забывайте поддерживать канал подпиской и лайком, а так же заглядывайте в мой телеграм канал. Там я публикую ссылки на полезные сервисы и макеты для практики верстки.
Телеграм:
t.me/vimpdev
Инстаграм
vimpdev
ВК:
bit.ly/3m33aku
#html #css #frontend
มุมมอง: 994

วีดีโอ

Псевдокласс :has. Как обратиться к родительскому элементу в CSS
มุมมอง 2.8K2 ปีที่แล้ว
В этом видео рассмотрим новый псевдокласс :has. Он предоставляет возможность обращения к родительскому элементу, в зависимости от дочерних. Стили для селекта th-cam.com/video/4SEhtHEw2Ow/w-d-xo.html Модальное окно на HTML th-cam.com/video/m-mWUNUdtss/w-d-xo.html Продвинутая адаптивная верстка - CSS container queries th-cam.com/video/LVGBY3j4N_o/w-d-xo.html Логические свойства в CSS th-cam.com/v...
Отвечаю на вопросы. Вредные советы по CSS от канала Ulbi TV. Часть 2
มุมมอง 6452 ปีที่แล้ว
Второе видео с ответами на 50 вопросов по CSS и подробным объяснением некоторых моментов. Для общего понимания посмотрите первую часть. Не было задачи хейтить коллег по цеху. Всех люблю. В некоторых эпизодах это просто эмоции) Первая часть th-cam.com/video/547bVuFsglk/w-d-xo.html Оригинал видео: th-cam.com/video/4YRG6cMAASI/w-d-xo.html Стили для селекта th-cam.com/video/4SEhtHEw2Ow/w-d-xo.html ...
Отвечаю на вопросы по CSS от канала Ulbi TV с объяснениями. Часть 1
มุมมอง 1.2K2 ปีที่แล้ว
Новый для меня формат, в котором отвечаю на 50 вопросов по CSS и объясняю некоторые моменты. Оригинал видео: th-cam.com/video/4YRG6cMAASI/w-d-xo.html Калькулятор специфичности селетора specificity.keegan.st/ CSS трюки th-cam.com/video/k-OzRCgR5Fs/w-d-xo.html Псевдоклассы :is и :where в CSS th-cam.com/video/sKD4dCdXL5w/w-d-xo.html Другие видео Продвинутая адаптивная верстка - CSS container queri...
CSS трюки #2 Изоляция в CSS, стили для пустого элемента, цвет каретки
มุมมอง 1.6K2 ปีที่แล้ว
Разбираем что такое изоляция в CSS, как стилизовать пустой элемент :empty и как установить цвет каретки Верстку для обзора отправлять сюда: t.me/joinchat/RLcz-wL3yKs0ZDMy Продвинутая адаптивная верстка - CSS container queries th-cam.com/video/LVGBY3j4N_o/w-d-xo.html Модальное окно на html и анимация без плагинов и библиотек. Dialog html th-cam.com/video/m-mWUNUdtss/w-d-xo.html Логические свойст...
Как стилизовать селект без плагинов. Selectmenu, slot, behavior
มุมมอง 3.6K2 ปีที่แล้ว
Стилизация селекта без плагинов и библиотек. Рассмотрим новый тег selectmenu, атрибуты slot, behavior. Верстку для обзора отправлять сюда: t.me/joinchat/RLcz-wL3yKs0ZDMy Продвинутая адаптивная верстка - CSS container queries th-cam.com/video/LVGBY3j4N_o/w-d-xo.html Модальное окно на html и анимация без плагинов и библиотек. Dialog html th-cam.com/video/m-mWUNUdtss/w-d-xo.html Логические свойств...
CSS трюки.Media hover, липкий список, плавная прокрутка без JS
มุมมอง 3K2 ปีที่แล้ว
В этом виде разберем три CSS трюка, которые могу облегчить жизнь верстальщика. Разберем медиа выражение от hover, сделаем список с липким заголовком и плавную прокрутку без JS. Верстку для обзора отправлять сюда: t.me/joinchat/RLcz-wL3yKs0ZDMy Продвинутая адаптивная верстка - CSS container queries th-cam.com/video/LVGBY3j4N_o/w-d-xo.html Логические свойства в CSS th-cam.com/video/uPvivRLg0Go/w-...
Загрузка большого количества видео на сайт с ютуба
มุมมอง 2.8K2 ปีที่แล้ว
В этом виде покажу как можно добавить на сайт большое количество видео не влияя на скорость загрузки сайта. Верстку для обзора отправлять сюда: t.me/joinchat/RLcz-wL3yKs0ZDMy Соотношение сторон, aspect-ratio th-cam.com/video/93eVd-lUVLM/w-d-xo.html Обзор верстки подписчиков #2 th-cam.com/video/pJdqqp_nLVk/w-d-xo.html Продвинутая адаптивная верстка - CSS container queries th-cam.com/video/LVGBY3...
Модальное окно на html и анимация без плагинов и библиотек. Dialog html
มุมมอง 10K2 ปีที่แล้ว
Делаем модальное окно без сторонних плагинов и библиотек на чистом html. Рассмотрим работу тега dialog и как его анимировать Верстку для обзора отправлять сюда: t.me/joinchat/RLcz-wL3yKs0ZDMy Обзор верстки подписчиков #2 th-cam.com/video/pJdqqp_nLVk/w-d-xo.html Продвинутая адаптивная верстка - CSS container queries th-cam.com/video/LVGBY3j4N_o/w-d-xo.html Минимум CSS кода для адаптивной верстки...
Динамический разделитель контента на flexbox css.
มุมมอง 1K2 ปีที่แล้ว
Динамический разделитель на флексбоксе, который адаптируется в зависимости от направления контента. Верстку для обзора отправлять сюда: t.me/joinchat/RLcz-wL3yKs0ZDMy Оригинальная статья ishadeed.com/article/flexbox-separator/ Обзор верстки подписчиков #2 th-cam.com/video/pJdqqp_nLVk/w-d-xo.html Продвинутая адаптивная верстка - CSS container queries th-cam.com/video/LVGBY3j4N_o/w-d-xo.html Мини...
Продвинутая адаптивная верстка - CSS container queries
มุมมอง 5K2 ปีที่แล้ว
Новая технология для адаптивной верстки container queries (выражение от контейнера), позволяющая изменять элементы в зависимости от их собственного размера Верстку для обзора отправлять сюда: t.me/joinchat/RLcz-wL3yKs0ZDMy Обзор верстки подписчиков #2 th-cam.com/video/pJdqqp_nLVk/w-d-xo.html Минимум CSS кода для адаптивной верстки th-cam.com/video/G_PscnwtMms/w-d-xo.html Верстка адаптивного сай...
Обзор верстки подписчиков #2. Присылайте работы
มุมมอง 4532 ปีที่แล้ว
Сегодня смотрим работы подписчиков. Разбираю html и css код. Верстку для обзора отправлять сюда: t.me/joinchat/RLcz-wL3yKs0ZDMy Обзор верстки подписчиков #1 th-cam.com/video/4MHmGgL7l9o/w-d-xo.html Минимум CSS кода для адаптивной верстки th-cam.com/video/G_PscnwtMms/w-d-xo.html Обзор верстки подписчиков #1 th-cam.com/video/4MHmGgL7l9o/w-d-xo.html Верстка адаптивного сайдбара th-cam.com/video/o5...
Как привязать анимацию к прокрутке страницы без JS. CSS Scroll-timeline.
มุมมอง 5K2 ปีที่แล้ว
Как привязать анимацию к прокрутке страницы без JS. CSS Scroll-timeline.
Почему проценты в grid css не работают как ожидаешь?
มุมมอง 6732 ปีที่แล้ว
Почему проценты в grid css не работают как ожидаешь?
Минимум CSS кода для адаптивной верстки
มุมมอง 1.8K2 ปีที่แล้ว
Минимум CSS кода для адаптивной верстки
Соотношение сторон. CSS свойства aspect-ratio и object-fit
มุมมอง 4.6K2 ปีที่แล้ว
Соотношение сторон. CSS свойства aspect-ratio и object-fit
Обзор верстки подписчиков #1. Присылайте работы
มุมมอง 5253 ปีที่แล้ว
Обзор верстки подписчиков #1. Присылайте работы
Логические свойства в CSS. Блочные и строчные оси.
มุมมอง 9063 ปีที่แล้ว
Логические свойства в CSS. Блочные и строчные оси.
☠ Скелетон на сайте. Индикатор загрузки в форме контента. + Анонс нового формата
มุมมอง 3.4K3 ปีที่แล้ว
☠ Скелетон на сайте. Индикатор загрузки в форме контента. Анонс нового формата
Список описаний. Элемент DL. HTML
มุมมอง 7383 ปีที่แล้ว
Список описаний. Элемент DL. HTML
Анимация перехода между страницами. Barba JS + GSAP
มุมมอง 6K3 ปีที่แล้ว
Анимация перехода между страницами. Barba JS GSAP
Редко используемые свойства в CSS. Цвет.
มุมมอง 4113 ปีที่แล้ว
Редко используемые свойства в CSS. Цвет.
Верстка адаптивного сайдбара. HTML, CSS, JS
มุมมอง 2.6K3 ปีที่แล้ว
Верстка адаптивного сайдбара. HTML, CSS, JS
Как работает nth-child в CSS. Выборка элементов по позиции
มุมมอง 4.9K3 ปีที่แล้ว
Как работает nth-child в CSS. Выборка элементов по позиции
Тени в CSS. Box-shadow и drop-shadow. В чем разница?
มุมมอง 1.7K3 ปีที่แล้ว
Тени в CSS. Box-shadow и drop-shadow. В чем разница?
Свойство image-set. Эффективные фоновые изображения в CSS
มุมมอง 1.1K3 ปีที่แล้ว
Свойство image-set. Эффективные фоновые изображения в CSS
Псевдоклассы focus-within и focus-visible в CSS
มุมมอง 2K3 ปีที่แล้ว
Псевдоклассы focus-within и focus-visible в CSS
Стилизация маркеров списка. Псевдоэлемент ::marker.
มุมมอง 2.1K3 ปีที่แล้ว
Стилизация маркеров списка. Псевдоэлемент ::marker.
CSS Columns. Мультиколонки в CSS.
มุมมอง 1.9K3 ปีที่แล้ว
CSS Columns. Мультиколонки в CSS.
Псевдоклассы :is и :where в CSS. Как работают и в чем разница?
มุมมอง 1.7K3 ปีที่แล้ว
Псевдоклассы :is и :where в CSS. Как работают и в чем разница?

ความคิดเห็น

  • @andreyfedyukin8360
    @andreyfedyukin8360 2 หลายเดือนก่อน

    Спасибо! Видео очень помогло! 👍 Лайк поставил))

  • @alexandr6427
    @alexandr6427 3 หลายเดือนก่อน

    😊

  • @СергейК-б6н
    @СергейК-б6н 4 หลายเดือนก่อน

    Капец ты мастер css анимаций!💪💪💪💪💪

  • @СергейК-б6н
    @СергейК-б6н 4 หลายเดือนก่อน

    Ваще красава💪💪💪💪💪

  • @igor_piro
    @igor_piro 4 หลายเดือนก่อน

    Моё почтение автору. Коротко и понятно.

  • @softwareDevFromAlmaty
    @softwareDevFromAlmaty 4 หลายเดือนก่อน

    я не новичок, но видео был полезным

  • @MentorYoudo
    @MentorYoudo 6 หลายเดือนก่อน

    привет Тима

  • @Amberstargazerofearth
    @Amberstargazerofearth 6 หลายเดือนก่อน

    Наверное, поддержка браузерами ещё не полная... Видимо, js будет надёжнее для данного эффекта. За видео спасибо!😊

  • @АндрейЖуравлев-ь3р
    @АндрейЖуравлев-ь3р 7 หลายเดือนก่อน

    Чел, вот от всей души спасибо! Три дня мучался не врубался как сделать именно с прокруткой от 200рх

  • @contrik_2469
    @contrik_2469 7 หลายเดือนก่อน

    Вы забыли про третий элемент. Маленький зеленый кружочек внизу первой секции.

  • @contrik_2469
    @contrik_2469 7 หลายเดือนก่อน

    Здравствуйте. При вёрстке кнопок левая кнопка почему-то стала меньше по ширине чем правая . Всю верстку в точности повторил за Вами. Почему так произошло и как исправить? Заранее спасибо.

  • @Jhon_2142
    @Jhon_2142 7 หลายเดือนก่อน

    тоесть я дурак что сам написал на js

  • @_Fantom_.
    @_Fantom_. 7 หลายเดือนก่อน

    Жаль канал умер..

  • @_Fantom_.
    @_Fantom_. 7 หลายเดือนก่อน

    У меня почему-то картинка не меняется при изменении экрана, всегда стоит последняя.. С чем это связано?

  • @MrHackzack
    @MrHackzack 7 หลายเดือนก่อน

    как сделать что бы было два разных цвета например чередования? например: одна красная другая синяя

  • @UlbiTV
    @UlbiTV 8 หลายเดือนก่อน

    За кликбейт осуждаю! Пришлось смотреть полчаса)) 26:27 - братан, ты серьезно приводишь как аргумент про скрытие инпута «название файла»?) согласился, еслиб ты что то про доступность сказал, тут подводные камни рил есть. Но название файла 😂😂 Неужели ты серьезно считаешь, что кто то будет в здравом уме загружать файлы без js и не обрабатывать никак загрузку файла? И не отображать его в интерфейсе? Ну это очень странный наброс, имхо 31:40 - что значит нельзя?) аргумент с инструмент сразу мимо. Тебе спецификация позволяет одни и те же вещи делать иногда разными способами В чем действительно отличие (из спецификации): «CSS псевдокласс :disabled находит любой отключённый элемент. Элемент отключён, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включённое состояние, когда его можно активировать или сфокусировать.» Т.е атрибут disabled необязательно указывать. Но это точно то поведение, которое мы хотим?) 46:50 - тут согласен, механическая ошибка. Речь конечно шла не про длительность анимации, а про кол-во итераций. Тут по факту, можно набросить на вентилятор P.S ролик приятный, писал коммент без негатива, осуждаю только кликбейт!

  • @FalCoNrevival
    @FalCoNrevival 8 หลายเดือนก่อน

    Как менять модельное окно? Сделать его типо другого дизайна, фигуры

  • @mainass2616
    @mainass2616 8 หลายเดือนก่อน

    Благодарю. Помог

  • @MKCerberus
    @MKCerberus 8 หลายเดือนก่อน

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

  • @sergmalin210
    @sergmalin210 8 หลายเดือนก่อน

    Класс, помогло сделать заказ

  • @deneaz
    @deneaz 9 หลายเดือนก่อน

    отличная штука, минималистично

  • @rahim6821
    @rahim6821 9 หลายเดือนก่อน

    Молодец пацан респект

  •  9 หลายเดือนก่อน

    Come back with Gsap animate websites.

  • @lapotkoden
    @lapotkoden 9 หลายเดือนก่อน

    Добрый день! Очень хорошее видео! Ещё предложение снять видео (если не сняли ранее) об использовании Фотошопа для вёрстки, как вы в этом видео делали. Какие инструменты для чего использовать, где находятся, где, например, посмотреть свойства css и прочее (лайфхаки, клавиатурные комбинации и т.д)

  • @AlexAlex-bp9il
    @AlexAlex-bp9il 9 หลายเดือนก่อน

    07:30 Так я и попал на это видео =) Спасибо тебе, добрый человек !

  • @dibof228
    @dibof228 10 หลายเดือนก่อน

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

  • @808beno7
    @808beno7 10 หลายเดือนก่อน

    А где тг канал??? Поч он недоступен

  • @808beno7
    @808beno7 10 หลายเดือนก่อน

    Прикольно, хорошее видео. Доходчивое объяснение, приятно смотреть. Спасибо

  • @technasan
    @technasan 11 หลายเดือนก่อน

    Спасибо! суперполезно и понятно

  • @George_E.
    @George_E. 11 หลายเดือนก่อน

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

  • @michaelkamko
    @michaelkamko 11 หลายเดือนก่อน

    Огромное спасибо за полезный видос с суперской подачей!

  • @kharisovas
    @kharisovas 11 หลายเดือนก่อน

    Не забрасывай.

  • @avbykovsky
    @avbykovsky 11 หลายเดือนก่อน

    На гитхабе кода анимации нет(

  • @beegoodb1213
    @beegoodb1213 ปีที่แล้ว

    Спасибо, очень поучительно!

  • @АлиР-з1к
    @АлиР-з1к ปีที่แล้ว

    А как такое сделать с помощью js, нужно чтоб при прокрутке колеса мыши такой эффект был, подскажите примеры и библиотеки

  • @sashatunik
    @sashatunik ปีที่แล้ว

    Блин всю голову сломал. Такие велосипеды на велосипеде наделал . Оказывается готовый псевдокласс есть

  • @Дмитрий-д8о6м
    @Дмитрий-д8о6м ปีที่แล้ว

    Огонь 🔥

  • @АндрейЦаплин-ш8ы
    @АндрейЦаплин-ш8ы ปีที่แล้ว

    Работает пока только в Chrome Canary. Рано радоваться

  • @ИванПомидоров-н3н
    @ИванПомидоров-н3н ปีที่แล้ว

    Столько бесполезный лишних телодвижений? Очень глупая и непродуманная система, да ещё и не поддерживаемая сколь-нибудь адекватно.

  • @ul-kaem-ka8094
    @ul-kaem-ka8094 ปีที่แล้ว

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

  • @Александр-н1ю1п
    @Александр-н1ю1п ปีที่แล้ว

    Супер! Очень помогло! Благодарю!

  • @АндрійХалявка
    @АндрійХалявка ปีที่แล้ว

    Вау, очень круто

  • @pavel.karpets
    @pavel.karpets ปีที่แล้ว

    Спасибо посмеялся)) Особенно с "неменее значимого"

  • @medvedev_photo
    @medvedev_photo ปีที่แล้ว

    Очень крутой мастер-класс, спасибо огромнейшее! Очень понятно всё!

  • @pavel.karpets
    @pavel.karpets ปีที่แล้ว

    По какой причине может не сработать переменная, объявленная 3мя строчками выше?) А вообще смотреть интересно - хорошо рассказываешь и профессионально показываешь

  • @pavel.karpets
    @pavel.karpets ปีที่แล้ว

    как упражнение норм. Но на практике данных подход бесполезен - зачем заменять fr на проценты? Если у вас есть гриди, то и fr к ним автоматом идёт

  • @seafoxmusic
    @seafoxmusic ปีที่แล้ว

    Совсем забыл про вставку через <svg>. Спасибо

  • @Alim0408
    @Alim0408 ปีที่แล้ว

    Большое человеческое спасибо за урок Пришлось перелопатить немало видео чтобы наткнуться на нужное

  • @efremandre
    @efremandre ปีที่แล้ว

    А правда, почему сделал все то же самое, но ничего не работает? :(

  • @GOOD-MAN-5
    @GOOD-MAN-5 ปีที่แล้ว

    А как сделать чтобы оно вылазило при загрузки страницы?