Верстка сайта на гридах с нуля №2 css grid верстка, табы на чистом JS

[@bog-1]

Ждём видосы по js, они точно будут популярны

[@NIReeMK]

есть же на других каналах нормальное объяснение по джсу. тут я вообще удивлен что автор написал это на чистом jse, без jquery :D а то он любитель еще слик юзать вместо свайпера...

[@Denis-u9c]

+

[@roiwen1661]

@@NIReeMK подскажи пожалуйста какие это каналы

[@qwerty8858]

СПАСИБО ЧТО ПРОДОЛЖАЕШЬ ВЕСТИ КАНАЛ НА РУССКОМ!!! ПРИВЕТ ИЗ КЫРГЫЗСТАНА

[@abdulla0607]

Привет, я тоже из Кыргызстана.

[@nikitatisevich7843]

огромное тебе спасибо за твое терпение и объяснения даже для самых зеленое, с нетерпением буду ждать следующих видео❤

[@dmitriykononov1097]

Классная вечеринка! Очень нравятся ваши уроки!

[@upwlqwp]

Спасибо большое за уроки, Вадим без тебя очень грустно учиться

[@dmytrosurdiy3919]

Дякую за крутий та корисний контент!) чекаємо наступних відео)

[@Диана-с3ф2ъ]

Щира вдячність вам за Вашу працю!)) Цікаво і корисно)

[@vadymprokopchuk]

Дякую!

[@ramil7sk898]

Дядька, ты реально крут. Спасибо что ты есть !!! Будешь в наших краях, пиши, устроим вечеринку)))

[@Maxim9575]

про гриды тут можно сказать: "по усам текло, а в рот не попало" - гридов как кот наплакал да и те не особо то и нужны были все решаемо флексбоксами.

[@dimalukashenko4865]

Отличный урок, спасибо за труд!

[@МиронД-э4ш]

Класс! Как всегда лайкос)))

[@MoNa-yq2nw]

Спасибо большое! Помогаете учиться

[@whiteltd5970]

Спасибо за ролик! Жду ваше видео по верстке с использованием препроцвессора SCSS - это ведь упрощает.

[@ИльяСеливанов-п5э]

Гениально, лайк!😘

[@felion111]

Большое спасибо за урок!

[@niakhai3659]

Вадим , ты - прирожденный Учитель !)

[@vgshenshin]

Годный контент, потренировался писать табы на JS, а то подзабыл уже. Сначала сам попробовал, вроде получилось). Кстати для контента табов скачал картинки Oculus чтоб наглядно переключение видно было)

[@Lider_mahinator]

Всё на вайбе как и всегда)

[@romanhassazhyrov5558]

Вадим, ты космос! :DD

[@Life-joy]

Ещё бы всех на курс пускали....было бы от души, а так ждём....

[@croshpin]

Боже,ты и твой канал просто прекрасны😍😍😍

[@vadymprokopchuk]

Благодарю

[@СергейБабанов-г7и]

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

[@vadymprokopchuk]

может какой-то элемент съехал, вообще странно там одинаково все

[@dmitriykarabasov1440]

Вадос! Как всегда отлично. Но! В последней секции рамки у item-ов градиентные. Будь добр, в следующей секции провентилируй этот вопрос. Спасибо!

[@lilnuisance8546]

потусовались классно, вот бы тусоваться так в видосах по js................

[@СергейКрюков-ь7ф]

Ты мой кумир😄 Появился нижний скрол. Я понимаю, что я, где-то, допустил ошибку. Давай искать, не могу найти, перематываю твои видосы, пересматриваю некоторые моменты и найти всё равно не могу, потом, сам замечаю, что у меня есть лишняя строка, я снова перематываю видос на тот момент, где ты писал код и замечаю, что у тебя данной строки нет, я тут же эту зловещую строку удаляю и опа, скрол пропал. Радует то, что я самостоятельно нашёл эту ошибку. Даже жить легче стало🤣 Спасибо тебе, сенсей

[@vadymprokopchuk]

Круть!

[@Aleksandrovich_Pavel]

Лайк 💪💪

[@ДаниярМирюсупов]

Шутка про заголовок Easy to set up and safe to use не жирный, занимается фитнесом залетела. 😆

[@checklifehack]

Features это особенности а future будущее

[@vadymprokopchuk]

точняк)

[@beshenyy_sobaken]

1:29:47 почему фиксированная ширина? Там padding'ами можно же, да и контент может измениться будет как то не очень..

[@olexandrsavelev4458]

Спасибо за контент, как всегда весело и полезно! Какой язык посоветуешь изучить для бека (кроме ноды)?

[@ellington_official3455]

Хорошее видео

[@diktashum15]

С ходу лойс не думаю. этот типуля мутит лютый движ)

[@vadymprokopchuk]

спасибо)

[@BryanskyM]

Бордер тоже вроде градиентом должен быть. Спасибо за контент)

[@AleksanderSheyko]

Спасибо за урок! Тоже обратил внимание, как и в комментариях ниже, что бордер градиентный. Покажи, плиз, в сл уроке, как он делается. У меня не получается(

[@Jazzzzby]

Есть вопрос. Когда мы делаем кнопку game__link там указаны размеры padding: 16px 48px, то есть можно же растянуть ее падингом, но мы деламе ее через padding: 16px 15px 12px; width: 225px; text-align: center; Не будет ли это ошибкой и как это повлияет на адаптив, ведь проще будет уменьшить padding, а тут ещё и размер самой кнопки постоянно придётся менять?

[@Relaxingmusic-lt4yv]

Большое спасибо за урок! Не подскажете в чем может быть проблема? Верстала как в уроке, но перехода не происходит, при этом в DevTools все нормально) .tabs__content-item { display: grid; grid-template-columns: auto 280px; grid-template-rows: auto 150px; gap: 40px; opacity: 0; position: absolute; transition: opacity .3s ease;

[@vadymprokopchuk]

возможно в html не так как у меня, или в классе tabs__content-item в нтмл есть ошибка

[@engeny_1856]

Добрый день . Я навичок и совсем не разбираюсь в тонкостях, но захотел попробывать написать, у меня есть вопрос при написании JS я ставил ('одинарные ковычки') а при сохранении он преобразовует их в двойные. В чем проблема?

[@Arthur-gt3bn]

у этого макета есть уже готовый сайт? хотелось бы увидеть функционал некоторых кнопок и т.п., чтобы сайт полностью интерактивным сделать

[@nJ-xm9jl]

как обычно Вадос входит в куплетик ровно, если пацаны из Харкьова значит вечеринка в норме (((:

[@ozerchanin2808]

Спасибо.

[@5051SQUAGAMING]

У меня где-то ошибка, но найти не могу, в js вроде и в html ошибок нет, но не переключается контент

[@МиланаДжавадзаде]

Вадим, спасибо огромное за видео🤗 это первый мой опыт верстки на гридах, все интересно и доступно! только у меня появился вопрос по такому моменту: в стилях пишу .tabs__content-item{ display: grid; grid-template-columns: auto 280px; grid-template-rows: auto 150px; gap: 40px; opacity: 0; position: absolute; transition: opacity .3s ease; } и вот после команды position: absolute пропадает картинка .tabs__content-img не пойму в чем дело, писала вместе с вами, код вроде как одинаковый

[@Lider_mahinator]

Сложно сказать не видя весь код. Но могу предположить, что у родителя .tabs__content-item (а это .tabs-content) не прописан position: relative;

[@rus24133]

Когда следующая часть?

[@artimity]

почему в гридах auto а не 1fr?

[@vanyaprosyanik4835]

Може марафон для новичков по Жэ Эс? 🥹

[@Alex_Felix_life]

Что сейчас с спросом веб-разработчиков ?

[@MelkoR4111]

для видео есть специальный тег video

[@ШаповалДмитрий-к8я]

Супер - отличный урок! Но у меня возникла проблема с переключением main.js, ''я так думаю". Повторял каждое действие по видео но у меня почему-то не переключаются (features > tabs > button) не работает. Ошибку в (Просмотр кода > Console) не показывает. В main.js проверил каждую точку... Может кто-то может подсказать...

[@lililight-e5f]

у меня тоже не переключались, а потом исправила ошибку в main.js tabContent.forEach(function(item){ item.classList.remove('tabs__content-item--active'); }); там был пробел 'tabs__content-item--active ' между словом active и одинарной кавычкой '.

[@liko8019]

раздели пожалуйста видео по частям с таймингами

[@thatboyondabeat]

ПРивет, 51:55 неужели нельзя сделать не стретчем а другим способом? прсот оздесь картинка еще более менее выглядит и растянулась незаметно, но если будет другая картинка на другом к примеру макете и ее ни при каких обстоятельствах нельзя будет растянгивать, то как так же расставить элементы по гридам, но не растягивая картинку? Просто не везде это смотрится красиво, и мой глаз увидел сразу растянутую картинку, а эт оне круто. Полиция дизайнеров тогда приедет

[@vikatiurne1000]

такой же вопрос. А если текста написать больше - вообще ужас получится. А тут у меня картинка еще переформатирована в webp, так она вообще не тянется.

[@beshenyy_sobaken]

Можно, но тут нужно уточнять у дизайнера, а именно что делать если текста будет больше (мб .video убирать, мб по-другому сделать сетку гридов), максимум, что возможно здесь, так это убрать gap: 40px; хотя будет не совпадать по макету, но все же

[@vetal_0905]

Добрый день. Подскажите пожалуйста, какой шрифт используете в редакторе?

[@VolodkaBobovich]

Comic Sans

[@vetal_0905]

@@VolodkaBobovich спасибо

[@АртёмРуа]

а почему не scss????препроцессор не актуальный уже?

[@СергейСмирнов-ь8у]

👍 Like!

[@9ninennine9]

Привет читающим! может кто-нибудь объяснить мне пошагово, что ж мы всё-таки сделали в скрипте то?) за js особо не шарю, заранее спасибо за ответ!

[@ЯнКоваленко-е8н]

thank

[@Дмитрий-д8о6м]

Думал покажете как сделать border градиентом, жаль

[@djdrey4539]

в первой части есть такое

[@beshenyy_sobaken]

Не будет ошибкой если я создам класс где гридиентный текст, а то слишком много мы спамим, да и border можно вынести классом

[@Дмитрий-д8о6м]

42:22 - padding-top:66px; 😝😁 . 1 строчка кода против 4-х на флексах))))

[@N32-e1g]

1:10:05

[@VikaVesta-b5d]

Хотела увидеть как верстать на грибах, а везде флехбох(((

[@jekakavaltchuk2714]

1:09:15 u

[@Rita0605]

- Сомнительное решение использовать фоновую картинку в превью видео... Наверняка видос будет не один, да и превью наверное должно отображать суть видоса, зачем его в фон засовывать... - ОЧЕНЬ сомнительное решение (очень мягко говоря) растягивать большую картинку в табах по высоте... Т.е. высота этой картинки будет зависеть от текста справа... Больше текста (или меньше ширина экрана) - получаем искажение картинки... Такое себе...

[@beshenyy_sobaken]

1. С этим согласна 2. А что ты предлагаешь? Конечно тут можно как либо изменять саму сетку гридов и расположение текста, но это должен делать дизайнер, по-другому можем только убрать gap: 40px; - и то, это не сильно решает проблему. Решение странное, но и лучше ничего нет

[@vladislavpolshin3667]

Дядь, градиент же присутствует и у контентной части))) я так понял лень было делать)))