Як створити таби тільки на HTML та CSS: Покрокова інструкція
ฝัง
- เผยแพร่เมื่อ 4 ก.พ. 2023
- Як зробити таби на HTML та CSS? Саме про це ви і дізнаєтеся разом з Сергієм в цьому відео, де застосується CSS flex-layout, селектор :has та input[type=radio] для того, аби не тільки отримати таби, що не лише працюють без javascript, а й уміють перетворюватися на акордеон. Як? Подивіться цей відеоурок та обов'язково дізнаєтесь!
Посилання на репозиторій: github.com/sergiybabich/video...
Мій особистий телеграм-канал: t.me/toisamyibabich
Закинути копійку на розвиток каналу можна тут:
🔗 send.monobank.ua/jar/9LUqtFvZXp
💳 5375411204412287 - แนวปฏิบัติและการใช้ชีวิต
Дуже не вистачало віконця в браузері під час відосу, а так було більш-менш цікаво. Варто ще сказати що, на мою особистку думку, забагато зупинок для пояснень різних css властивостей чи термінів. Варто старатися зробити відео як можна коротшим і інформативним. Проте хто я такий, щоб критикувати. Було цікаво дякую!
Візьму до уваги
Дуже круто, пане Сергіє. І монтаж - вогєнь.
Ой, дякую! Я від того монтажу буду тиждень відходити, бггг.
Завжди дуже цікаво дивитись контент українською. Респект за Ваші прагнення
Дякую)
Ох цей перехід на «вйо до коду», лайк
Дякую за роботу!
Дякую, що подивились!
Дякую за круте відео! Побільше би такого контенту. Чекаю коли ти станеш топ блогером і я буду всім казати "Я ж вам казала)))"
Дякую )
Кайф - люто плюсую, та підписуюсь з усіх акаунтів
даю знати - сподобалося. дуже )
дякую)
ще одне дякую - за ваше дякую ЗСУ )
Дякую за відгук!
Нарешті. Туторіал від Бабіча🎉 13:27 😂
все добре, все ясно, нормальний темп для сприйняття. Вітаю з дебютом!
Дякую!
Гарне відео! Я не знав, що таке можливо зробити без JS. 🙌
Цікавий спосіб заюзати радіобатони для табів, винахідливо) просто, лаконічно і працює!)) окрема вдячність за українську мову 🥰
Чудовий початок на TH-cam!
В офісі не знайшов, де шукати далі) ?
Nice контент, чекаю на нові відео.
Круте відео, дякую за контент)
Після перегляду аж захотілося в розробники піти)
Хто ж заважає?)
Дякую! Ви красава!
Пане Сергію, додайте ще, будь ласка, в самому початку, як воно буде виглядати, те що робимо, бо одних слів замало, візуал завжди краще😉
Окей )
Дякую, цікавий контент
Дякую, приходьте за новими відео )
Чарівно 🥰
Це шедевр)))🔥🔥🔥
Дякую )
Класно, дякую
Дякую за відгук ) Вже готуюся до запису наступного відео!
Круто 🔥 От такого контенту мені й не вистачає в україномовному ютубі 😁 Ще б непогано було в перші пару хвилин нагадувати про лайк, а то ледь не забув😅
Бо треба додивлятися до кінця, нє?)
@@babichweb Так я й додивився )) Кінець бімба. Але якось про лайк пригадав на середині перегляду. Буває що в кінці вже не ставлю - тому й така "рекомендація"
Звучить якто обідно, бггг
Вогінь 🔥🔥🔥 Круто, пане Сергію, що Ви тепер і на ютубі!
Дякую! Та, тепер я ще й тут буду нічного не встигати )))
дякую за відео!
кінець ТОП 🔥
Дякую за відгук!
Круто))Натхнення Вам)Щиро дякую за крутий контент)
Дякую )
Пане, Сергій!!! Все 👍👍👍
Дякую )
Топ-контент)
Невдалі дублі🔥
Дякую)
Класний контент!👏 Сергію, keep up the good work!👍
Дякую, буду старатися)
Вогонь)
Дякую )
Клас!!!! Дякую!!!
Прошу дуже ) Приходьте ще)
Вогінь💥💥💥
Вогняний!
файно
Відео 🔥. Вважаю знято якісно. Побажання для наступних відео, це щось пов'язане з grid. Вчив тільки flex. Вважаю це пробіл в моїх знаннях. Хочу вивчити grid та використати у власному пет-проєкті. Якась особливість використання grid з вашими поясненнями могли би в цьому допомогти.
Так, теж хочу зробити про грід та флекс
Йо...Коментар підтримки.))
Відео прикольне, але звук то думаю варто підтягнути.))
З величезним задоволенням прийму в подарунок мікрофон))))
🔥
Підписався) Дякую за україномовний контент! Було б взагалі круто застосувати для обробки звуку компресор, а якщо він є, то накрутити його більш жорсткіше)
Ромка, рада тебе тут бачити;)
@@user-le6fs7tp2l Приємна зустріч, Маринко)
я подивився в інтернеті, мені кажеця компресори дуже шумні
@@babichweb якщо це ті, що з двигунами, то погоджуюсь, дуже шумні))
Ждемо коли :has завезуть у Файрфокс по замовчуванню, без прапорців
А можна не ждать і почати користуватися Edge
вогінь ))))
Вирішив почати з самого початку, майже з самих азів(я про HTML та CSS), я так розумію на ютубі стало на одного "вчителя" frondEnd більше?!😁
Як на мене такі невеликі роботи краще сприймаєтюся на codepen(і код і результат відразу видно), хоча для початківця які можуть просто все скопіпастити звідти може то і не дуже добре.
Тем для початківців верстки може бути багато: "як зробити фіксований хедер при скролі", "як зробити мобульне меню", "як зробити прелоад", "як зробити Smooth Scroll на лінки", ще глибше можна "як зробити мобільне вікно з формою, валідацію введених даних та відправкою данних(наприклад на пошту або телеграм) і тд. Пам'ятаю наче вчора як сам вчив усе це і розумію як воно потрібне для початківця
Сподіваюсь, дякуючи ЗСУ, випаде удача те все встигнути )
туторіал крутий, але пару особистих зауважень, склейка відео на 10 секунді сильно кидається в очі, як на мене, вона там не потрібна взагалі, також хочеться більше бачити лице автора, відчуття "живого майстер классу", можна або вставки з додатковими поясненнями, або, внизу екрану в маленькому вікні лице Бабіче де видно як він говорить коли описує свої дії. більше нарікань немає, невдалі дублі топ!!
Нажаль «has» досі не дефолтна фіча файрфокса і потрібно вмикати окремо опцію.
Тому краще поки що юзати конструкцію - input поза лейбою(краще перед лейбою, щоб можна було стиль активної таби зробити) і стиль input:checked ~ .tab-panel
Дякую за відео! Підкажіть, будь ласка, що за тема у вас для VS Code?
FireFly Pro
А чим провинився джс, що це без нього зроблено? Чи з ним просто нецікаво?
А навіщо робити з ним, якщо можна без нього?
@@babichweb ну, а навіщо копати котлован екскаватором, якщо можна і лопатою?
У відео є маленький дисклеймер про те, в чому суть цього самого відео
Мабуть краще було б, якби десь було віконце з самою сторінкою, яка б перезавантажувалась на CTRL+S. Щоб поступово спостерігати як твориться резлуьтат. А то початківцю легко загубитись
Взято до уваги
Класне відео. Я не знаю чи це тільки в мене чи ні але лінки неклікабельні(
Поки що неклікабельні, це обмеження ютубу. Сподіваюсь, скоро вони повірять, що я справжній і лінки стануть клікабельні.
@@babichweb не знав про такі обмеження.
Я теж )))
Де Реакт!!!???? Ти зараз нам всім кар'єру обнулиш. Ми тим менеджерам роками казали що таке не робиться, шо то на два спрінта роботи.
React is a lie