- 72
- 168 220
VIMP dev - верстка сайтов
Azerbaijan
เข้าร่วมเมื่อ 3 ส.ค. 2020
Приветствую на моем канале. Меня зовут Тима.
Здесь мы будем говорить о вэбе, в частности о HTML и CSS, так как больше всего я занимаюсь именно версткой. Но не обойдем стороной и другие языки программирования и технологии.
Буду делиться с вами своим опытом верстальщика, рассказывать о нюансах этого дела, сопутствующих технологиях и конечно верстать верстать и еще раз верстать.
Здесь мы будем говорить о вэбе, в частности о HTML и CSS, так как больше всего я занимаюсь именно версткой. Но не обойдем стороной и другие языки программирования и технологии.
Буду делиться с вами своим опытом верстальщика, рассказывать о нюансах этого дела, сопутствующих технологиях и конечно верстать верстать и еще раз верстать.
Стрим. Верстаем макет и общаемся. Ответы на вопросы
Перезалив стрима с версткой макета. Часть 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
Стили для селекта
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 ปีที่แล้ว
☠ Скелетон на сайте. Индикатор загрузки в форме контента. Анонс нового формата
Анимация перехода между страницами. 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.
Псевдоклассы :is и :where в CSS. Как работают и в чем разница?
มุมมอง 1.7K3 ปีที่แล้ว
Псевдоклассы :is и :where в CSS. Как работают и в чем разница?
Спасибо! Видео очень помогло! 👍 Лайк поставил))
😊
Капец ты мастер css анимаций!💪💪💪💪💪
Ваще красава💪💪💪💪💪
Моё почтение автору. Коротко и понятно.
я не новичок, но видео был полезным
привет Тима
Наверное, поддержка браузерами ещё не полная... Видимо, js будет надёжнее для данного эффекта. За видео спасибо!😊
Чел, вот от всей души спасибо! Три дня мучался не врубался как сделать именно с прокруткой от 200рх
Вы забыли про третий элемент. Маленький зеленый кружочек внизу первой секции.
Здравствуйте. При вёрстке кнопок левая кнопка почему-то стала меньше по ширине чем правая . Всю верстку в точности повторил за Вами. Почему так произошло и как исправить? Заранее спасибо.
тоесть я дурак что сам написал на js
Жаль канал умер..
У меня почему-то картинка не меняется при изменении экрана, всегда стоит последняя.. С чем это связано?
как сделать что бы было два разных цвета например чередования? например: одна красная другая синяя
За кликбейт осуждаю! Пришлось смотреть полчаса)) 26:27 - братан, ты серьезно приводишь как аргумент про скрытие инпута «название файла»?) согласился, еслиб ты что то про доступность сказал, тут подводные камни рил есть. Но название файла 😂😂 Неужели ты серьезно считаешь, что кто то будет в здравом уме загружать файлы без js и не обрабатывать никак загрузку файла? И не отображать его в интерфейсе? Ну это очень странный наброс, имхо 31:40 - что значит нельзя?) аргумент с инструмент сразу мимо. Тебе спецификация позволяет одни и те же вещи делать иногда разными способами В чем действительно отличие (из спецификации): «CSS псевдокласс :disabled находит любой отключённый элемент. Элемент отключён, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включённое состояние, когда его можно активировать или сфокусировать.» Т.е атрибут disabled необязательно указывать. Но это точно то поведение, которое мы хотим?) 46:50 - тут согласен, механическая ошибка. Речь конечно шла не про длительность анимации, а про кол-во итераций. Тут по факту, можно набросить на вентилятор P.S ролик приятный, писал коммент без негатива, осуждаю только кликбейт!
Как менять модельное окно? Сделать его типо другого дизайна, фигуры
Благодарю. Помог
Я так долго искал функцию, которая не позволит прокручивать больше одного контейнера. Спасибо большое, очень выручил
Класс, помогло сделать заказ
отличная штука, минималистично
Молодец пацан респект
Come back with Gsap animate websites.
Добрый день! Очень хорошее видео! Ещё предложение снять видео (если не сняли ранее) об использовании Фотошопа для вёрстки, как вы в этом видео делали. Какие инструменты для чего использовать, где находятся, где, например, посмотреть свойства css и прочее (лайфхаки, клавиатурные комбинации и т.д)
07:30 Так я и попал на это видео =) Спасибо тебе, добрый человек !
Тег удобный, но он поддерживает только очень современные браузеры к сожалению
А где тг канал??? Поч он недоступен
Прикольно, хорошее видео. Доходчивое объяснение, приятно смотреть. Спасибо
Спасибо! суперполезно и понятно
Спасибо, было доходчиво и познавательно!)
Огромное спасибо за полезный видос с суперской подачей!
Не забрасывай.
На гитхабе кода анимации нет(
Спасибо, очень поучительно!
А как такое сделать с помощью js, нужно чтоб при прокрутке колеса мыши такой эффект был, подскажите примеры и библиотеки
Блин всю голову сломал. Такие велосипеды на велосипеде наделал . Оказывается готовый псевдокласс есть
Огонь 🔥
Работает пока только в Chrome Canary. Рано радоваться
Столько бесполезный лишних телодвижений? Очень глупая и непродуманная система, да ещё и не поддерживаемая сколь-нибудь адекватно.
скажите пожалуйста а возможно ли таким же методом анимировать прорисовку решетки для игры крестики-нолики? ну и в идеале сами символы тоже
Супер! Очень помогло! Благодарю!
Вау, очень круто
Спасибо посмеялся)) Особенно с "неменее значимого"
Очень крутой мастер-класс, спасибо огромнейшее! Очень понятно всё!
По какой причине может не сработать переменная, объявленная 3мя строчками выше?) А вообще смотреть интересно - хорошо рассказываешь и профессионально показываешь
как упражнение норм. Но на практике данных подход бесполезен - зачем заменять fr на проценты? Если у вас есть гриди, то и fr к ним автоматом идёт
Совсем забыл про вставку через <svg>. Спасибо
Большое человеческое спасибо за урок Пришлось перелопатить немало видео чтобы наткнуться на нужное
А правда, почему сделал все то же самое, но ничего не работает? :(
А как сделать чтобы оно вылазило при загрузки страницы?