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

Подписаться 84 тыс.

Просмотров 21 тыс.

50% 1

Друзья, в этом видосе я по максимум использую css grid потому что этот сайт предусматревает такую вечеринку. Также напишем табы на чистом JS
Мой курс по верстке - from0to1.com.ua/
Телеграм канал - t.me/from0to1com
Большой гайд по гридам - • CSS GRID Большое руков...
О box-sizing - • box sizing border box ...
Видос по svg - • SVG, большой гайд
Плейлист по Figma:
• Бесплатный курс по Fig...
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

Опубликовано:

1 фев 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 78

@qwerty8858 Год назад

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

@abdulla0607 Год назад

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

@bog-1 Год назад

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

@NIReeMK Год назад

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

@user-ux8jq7uf4u Год назад

@roiwen1661 Год назад

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

@nikitatisevich7843 Год назад

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

@dmitriykononov1097 Год назад

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

@upwlqwp Год назад

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

@dimalukashenko4865 Год назад

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

@user-gj8wd1qm6h 8 месяцев назад

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

@vadymprokopchuk 8 месяцев назад

Круть!

@whiteltd5970 Год назад

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

@dmytrosurdiy3919 Год назад

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

@ramil7sk898 Год назад

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

@MoNa-yq2nw Год назад

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

@user-bm5ge3mr9u Год назад

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

@felion111 Год назад

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

@vgshenshin Год назад

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

@olexandrsavelev4458 Год назад

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

@dmitriykarabasov1440 Год назад

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

@Life-joy Год назад

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

@user-zd4ui1bs9m Год назад

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

@user-tu7km2sj9i Год назад

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

@vadymprokopchuk Год назад

Дякую!

@croshpin Год назад

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

@vadymprokopchuk Год назад

Благодарю

@niakhai3659 Год назад

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

@romanhassazhyrov5558 Год назад

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

@user-be9vd1jm7e Год назад

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

@Lider_mahinator Год назад

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

@BryanskyM Год назад

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

@Jazzzzby Год назад

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

@user-qk3qi6eh6g 3 месяца назад

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

@vadymprokopchuk 3 месяца назад

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

@ellington_official3455 Год назад

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

@Arthur-gt3bn Год назад

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

@lilnuisance8546 Год назад

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

@Aleksandrovich_Pavel Год назад

Лайк 💪💪

@ozerchanin2808 Год назад

Спасибо.

@user-ru8td6yd6f Год назад

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

@beshenyy_sobaken Год назад

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

@diktashum15 Год назад

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

@vadymprokopchuk Год назад

спасибо)

@rus24133 Год назад

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

@nJ-xm9jl Год назад

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

@user-gu4nw1sq9w Год назад

Вадим, спасибо огромное за видео🤗 это первый мой опыт верстки на гридах, все интересно и доступно! только у меня появился вопрос по такому моменту: в стилях пишу .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;

@5051SQUAGAMING 7 месяцев назад

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

@vanyaprosyanik4835 Год назад

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

@checklifehack Год назад

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

@vadymprokopchuk Год назад

точняк)

@MelkoR4111 Год назад

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

@liko8019 Год назад

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

@Relaxingmusic-lt4yv 2 месяца назад

Большое спасибо за урок! Не подскажете в чем может быть проблема? Верстала как в уроке, но перехода не происходит, при этом в 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 2 месяца назад

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

@alekseyfelk9137 9 месяцев назад

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

@vetal_0905 Год назад

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

@user-ds4ik5zu9n Год назад

Comic Sans

@vetal_0905 Год назад

@@user-ds4ik5zu9n спасибо

@user-xv7sh6lp7o Год назад

👍 Like!

@user-ei8ib3mq2q Год назад

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

@user-mu6gt5xx8f Год назад

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

@user-jx4zj6ds7h 10 месяцев назад

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

@9ninennine9 Год назад

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

@user-ls4ep8mk4f Год назад

thank

@thatboyondabeat Год назад

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

@vikatiurne1000 Год назад

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

@beshenyy_sobaken Год назад

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

@beshenyy_sobaken Год назад

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

@user-dh7dp1zc3n 7 месяцев назад

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

@djdrey4539 Месяц назад

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

@user-zm6pf4fr2u Год назад

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

@user-dh7dp1zc3n 7 месяцев назад

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

@user-vj3cu3wv9l Год назад

1:10:05

@Rita0605 Год назад

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

@beshenyy_sobaken Год назад

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