Верстка сайта на гридах с нуля, css grid верстка

[@luxarmiger5729]

Благодарю, Вадим, что не забываешь о нас, делишься своей мудростью! Дай Бог тебе и твоим близким счастья, здоровья, процветания и мирного неба над головой!

[@vadymprokopchuk]

спасибо

[@progi99]

@@vadymprokopchuk присоединяюсь, я верстку не сильно люблю, но чтобы подтянуть свои знания и что то новое узнать захожу и делаю.

[@Мелисса-д1с]

Идея с многостраничником огонь! Спасибо за урок, очень нравится вас смотреть и слушать :)

[@sivilrishar2927]

Как же вовремя! Как раз нужна была практика с гридами) Спасибо за видео, жирнющий лайк прилагается :D

[@vadymprokopchuk]

круть!

[@drknss3021]

Научи настраивать жирность лайков)

[@shelestnn]

Спасибо за урок! Да, многостраничник было бы супер)

[@СтаниславГорячев-г1ъ]

Поддерживаю

[@vadymprokopchuk]

поддерживаю!=)

[@pungushe]

Поддерживаю

[@progover24]

@@vadymprokopchuk Вадим попроси Варвару сделать дизайн многостраничника)

[@nJ-xm9jl]

подтверждаю )

[@nodprogson]

за 6-7 видео научился многому благодаря тебе.Спасибо большое.Лучший!!!

[@vadymprokopchuk]

круть

[@romanhassazhyrov5558]

Дядька, спасибо что с нами!

[@djarchdjarch2266]

Дякую Вадиме за твою працю! Дуже інформативне відео, завжди чекаємо нивих уроків.

[@НадеждаГонтарь-е2н]

Вадим, была рада увидеть тебя! Благодарю за видео! Ты шикарный спец и очень хороший, доброжелательный и воспитанный человек! В 2021 приобрела твой курс по вёрстке - и ни разу не пожалела об этом!!!!!Успеха, здоровья и благополучия от всей души!

[@vadymprokopchuk]

Благодарю!

[@0blachkoplay831]

VR - классная вещь. Там так красиво, уютно, хорошо))) наша любимая игра - beat siber. Урок отличный. Каждый раз что-то новое рассказываете. Спасибо!!!

[@vadymprokopchuk]

спасибо

[@drknss3021]

Долгожданные гриды! С огромным удовольствием посмотрю!

[@ВладимирДрагомир-ы7с]

Для buy-btn__price больше подойдёт такой вариант: border: 1px solid; border-image-source: linear-gradient(180deg, #BC10D8 0%, rgba(80, 0, 250, 0.93) 100%); border-image-slice: 1; Это обеспечит её прозрачность и всё будет выглядеть по макету

[@alexdexx21]

отличный коммент! бордер сделался, но вот прозрачность не появилась :(

[@spacekraken67]

Интересная вечеринка с гридами 👍

[@biotexcom5464]

Красавчик, пришел с бека и буквально за два дня разобрался в верстке с твоей помощью. Сижу почти целых два 2 берез перерыва и пишу код. Люблю учиться сам и твои уроки самый топ. Мне на JS легко писать, а вот верстка эта тема сильная!!

[@vadymprokopchuk]

круто, молодцом

[@diggerdog001]

Топовый контент. Лучший учитель по верстке. Спасибо Вадим!

[@vadymprokopchuk]

Благодарю

[@Yaroslav_2003]

Огромная благодарность,Ваш канал даёт великое множество возможностей🦾

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

Хочу многостраничник!!! Как всегда ЖИРНЫЙ лайк! Спасибо Вадос за топ контент!

[@vadymprokopchuk]

спасибо

[@user-frond-end_dev]

спасибо за крутую вечеринку! снова будем кайфовать за версткой!)))))))))............

[@Marina-bh8iw]

Спасибо большое за контент! очень рада, что когда-то нашла вас на udemy !)

[@vadymprokopchuk]

круто, спасибо и я рад))

[@КлимСомов-х6с]

Вадос, работаю фронтом уже 2 года. Сел под пивко насладится твоей компанией. Вспомнить те эмоции которые ты мне дарил в период моего обучения, когда я начинал постигать азы верстки и верстал Кубу повторяя за тобой. Выражаю тебе огромный респектос за твой труд , он бустанул мою карьеру. Ты топ!❤

[@vadymprokopchuk]

круто, спасибо!

[@игорьшапранов]

Вот кнопку я воо ще оценил, вспомнил же , годный контент. Я уже сколько лет сам верстаю, а твои видео по сей день смотрю. Нужно выпускать треллеры: "Скоро на большых просторах Ютуба смотрите" и туда нарезки, типа: по больнице, кнопка, космическая полицию ну и еще куча. КРАСАВЧИК-ОГОНЬ. Еще когда в спан убирал стили нужно было сказать “Я тебя помножу на ноль”.

[@felion111]

Спасибо за урок! Все объясняешь максимально доходчиво )

[@ДмитроКараман-м2м]

Интересно) но хотелось бы что-то посложнее, с gulp и многостраничник и тд)

[@АнастасияКитаева-н1б]

Спасибо большое! Лайк, подписка)) Все супер понятно и даже весело 😃

[@vadymprokopchuk]

благодарю

[@TOROGAR]

случайно забрёл на этот канал, но твои объяснения просто топ и слушать приятно и понятно всё!!!

[@MoNa-yq2nw]

Спасибо большое за ваши уроки. Вы меня многому научили.

[@sergeytimohin953]

Спасибо за видос! Всегда круто! Как раз одну штучку для себя подсмотрел )

[@drknss3021]

Решение с кнопками - просто 🔥 🔥 🔥

[@MPy554]

Есть доступ ко всем курсам скиллбокс, могу бесплатно посмотреть любой курс. Но ты такой крутой рассказчик, что хочется тебя поддержать и пройти именно твой курс, успехов тебе и большое спасибо за контент!

[@СергейСомов-м8ы]

Крутая подача. Словечки. Концентрация внимания на неочевидных мелочах. Первое видео смотрю и очень нравится.

[@SvitlanaDenisova]

Пасиб!) В каждом видео нахожу что-то новое!

[@vadymprokopchuk]

круть

[@Aleksandrovich_Pavel]

Спасибо за труд 🙏🙏 Многостраничный сайт, плагины 🔥

[@vadymprokopchuk]

топ топ топ

[@dmitriyk.2462]

Привет, рад тебя снова видеть на ютубе, здоровья тебе и твоим близким!

[@vadymprokopchuk]

благодарю

[@Білоцерківськийправдоруб]

Спасибо Вам большое за уроки!

[@Ramazannegma]

45:55 проорал с кнопки xD годно

[@andreasshev5748]

Вадим спасибо за видео, ты лучший!

[@vgshenshin]

Спасибо за практику! Улетный урок, жду продолжения) и многостраничник конечно было бы супер! Ребят, попробовал сверстать прозрачный фон для правой кнопки и чтоб градиент тоже работал, зацените: .buy-btn { cursor: pointer; text-transform: uppercase; display: flex; padding: 0; font-family: 'Helvetica', sans-serif; font-weight: 700; font-size: 16px; border: 1px solid #BC10D8; border-image: linear-gradient(180deg, #BC10D8 0%, rgba(80, 0, 250, 0.93) 100%); border-image-slice: 1; background-color: transparent; } .buy-btn__text { color: #f6f4f5; padding: 20px 110px; background: linear-gradient(180deg, #BC10D8 0%, rgba(80, 0, 250, 0.93) 100%); } .buy-btn__price { padding: 20px 105px; background-color: transparent; color: #5C5C5E; }

[@vadymprokopchuk]

скоро продолжим, красава за практику

[@culon4775]

ОЧень крутое решение правдо только не совсем понятно как работает border-image-slice: 1;

[@diktashum15]

очень вовремя) биг лойс

[@Дмитрий-е2ы1е]

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

[@Gazon1155]

Комментарий в поддержку канала

[@vadymprokopchuk]

огонь!

[@ИванСтич-р2ь]

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

[@nJ-xm9jl]

оу, оу, оу, потрясающая вечериночка подъехала )))

[@vadymprokopchuk]

врываемся )

[@dimalukashenko4865]

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

[@vadymprokopchuk]

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

[@Hector_UA]

Вадим, дякую тобі за твої кайфові відео. Дуже приємно та корисно проводити час на твоїх марафонах. Буду дуже радий, якщо в тебе буде можливість зверстати багатосторінковий сайт, так як це повинно бути в сьогоднішніх реаліях. Дякую :)

[@vadymprokopchuk]

супер, дякую

[@Дарья-г6ц2з]

Вадим, пожалуйста, сними видео про новую Gulp сборку. Очень благодарна за твой труд и прекрасную подачу материала, благодаря тебе я начала шарить в вёрстке))

[@vadymprokopchuk]

нужно снять

[@golden_go3673]

@@vadymprokopchuk jdem)

[@RomanKhassazhirov]

Просто огонь, пасиба!)

[@cakeordie8790]

В css на 1:14:01 в селекторе buy-btn два padding одно со значением 0 другое со значением 1. За верстку спасибо!

[@niakhai3659]

Классно что макет в описании к видео , а не в телеге ))

[@МихайлоБондаренко-д6й]

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

[@vadymprokopchuk]

отлично

[@Alla-gu1zt]

Спасибо за твой труд! Многостраничник было бы круто!!

[@vadymprokopchuk]

супер

[@cy66a]

Вадим, спасибо за видео! Думаю, что для задания градиента для border'а можно использовать CSS-свойство "border-image". Например, для нашего "buy-btn__price" можно было бы применить border-image: linear-gradient(180deg, #BC10D8 0%, rgba(80, 0, 250, 0.93) 100%); Возможно, это более универсальный способ, хотя бы на тот случай, если наша фоновая картинка не позволяла бы использовать для фона кнопки сплошной цвет. А то вдруг при отзывчивой верстке какая-нибудь лампа наедет на нашу кнопку... :D

[@vadymprokopchuk]

вполне возможно, нужно тестить

[@vgshenshin]

я как раз с помощью него и сделал)) CSS написал под видео в комменте

[@tun11x11]

респект, вадосик, давай курс по базе JS!!!)

[@Psixooz]

согласен, давай js базу, это прям пушка!!)

[@catsoftheworld]

Спасибо!!! Туториал огонь!🔥

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

Вадим, большое спасибо за ваш труд! видео огонь! дизайн топ! также спасибо и вашей супруге за ее роботу! жду многостраничник)))

[@vadymprokopchuk]

круть, спасибо

[@urooro3027]

ОПА, лайк не глядя

[@НиколайСтепанов-ю3м]

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

[@pungushe]

Благодарю как всегда круто

[@RomanRazvodyashii]

Хорошая подача материала!

[@КуралбекАгубаев-д5с]

прям очень большое спасибо!!!

[@jackpotsloti]

Меня спросили, верю ли я в бога? Я ответил - Да Меня спросили, в какого? Я ответил - в Вадима Прокопчука

[@luxarmiger5729]

Бог верстки. Я тоже в него верую!

[@sprice8246]

прикольный урок )) спасибо

[@1081bad]

Кто-то тусуется с грибами, а нормальные чуваки с гридами! 😂

[@vadymprokopchuk]

точняк

[@Psixooz]

псс.. парень, не много гридов не интересует?)

[@niceman5890]

Спасибо большое!

[@МаринаГаличанская-с4о]

Очень нравятся уроки, Вадима. Много кого смотрела, но уроки Вадима прям в сердечко. Подскажите, пожалуйста, как сделать так, что border-bottom выводились сразу эти параметры: 1px solid #000? Как здесь 28:28?

[@yppi1252]

Спасибо за ролик, ждем многостраничник

[@vadymprokopchuk]

отлично)

[@Lider_mahinator]

Завидую (в хорошем смысле) тем ребятам которые пройдут курс Вадима Прокопчука по вёрстке. Потому что такого подхода к подаче материала есть только у единиц преподавателей. О чём я? Да вы наверное и сами заметили что Вадим подходит к подаче к материала с позитивом - что вас и ждёт на протяжении всего курса. Поверьте, многие ведут курсы как лекции и интерес к изучению угасает. P.S. Это не реклама - а крик души) Вы не пожалеете!

[@AlexanderBogdanov-dw6cw]

Спасибо Вадим!

[@viktor_kobozya]

Огромное Благодарю за ваши уроки! Друзья, поактивнее пожалуйста. Поддержите идею многостраничника. Накидайте комментов.

[@vadymprokopchuk]

вот вот!

[@danilplakhotin5187]

Вадим видео отличное и за это конечно ЛАЙК с многостраничнком идея шикарная !!! И было бы супер если б этот марафон с многостраничником был со всеми плюшками (JS,WEBPACK и тому прочее)готов за такое задонатить(кто поддерживает ставим лайк этому коменту)и в итоге думаю получилась бы супер мегавселенская вечеринка.

[@РоманБогач-и1л]

Дякую, за класні та веселі уроки, Вадим, було б круто зверстати багатосторінковий сайт)

[@vadymprokopchuk]

супер, зафіксував, дякую

[@stopmol]

06:55 Возможно вы уже не увидите этот комментарий, но идея видео с вёрсткой многостраничного сайта это было бы кул

[@IgorBobyrev]

я бы сказал: не провод важная часть нашей жизни, а поводок 😆

[@Bloodravenful]

сижу в ожидании верстки многостраничного сайта)

[@ДмитрийКвирас]

Чисто для актива коммент )

[@vadymprokopchuk]

чисто красава )

[@overshotkuka9347]

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

[@vadymprokopchuk]

спасибо

[@orthodox-chanel]

не, ну чатЖПТ конечно хороший инструмент и он очень сильно помогает в изучении програмирования, но вот заменить програмиста он пока не сможет, потому что за ним нужно еще переделывать и дописывать код)) и если ты в этом коде не шаришь то толку от этого инструмента будет мало) разве что сверстать примитивную страницу Hello World и подключить к какомуто движку, и то не с первой попытки

[@Spellforge]

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

[@jekamokan]

Желаем свёрстанный многостраничник)))

[@dimasnytin]

Спасибо! Ждем многостраничник

[@ЖеняПічка-ф1ъ]

Пушка

[@СашаТюменцев-ш9ь]

Ждём многостраничник и уроки по джс!

[@vadymprokopchuk]

обалденно

[@Konstsin]

желаем сверстаный многостраничник!!))

[@vadymprokopchuk]

отлично)

[@fantomgrivdogs5996]

Желаю многостраничный сайт)

[@FRONTENDWAY]

Привет, подскажи плз, как ты настроил еммет, чтобы у ссылок классы создавались перед атрибутом href, а не после? Не могу никак нагуглить.

[@dmitriyzhuykov4244]

Привет. В файле settings.json (в настройках VSCode) вставь вот эту строку: "emmet.preferences": { "output.reverseAttributes": true }

[@FRONTENDWAY]

@@dmitriyzhuykov4244 балдёж, все работает. Спасибо)

[@serzhserious8816]

Спасибо, очень круто объясняешь, странно что так мало подписчиков. Ребят, подскажите как настроить Emmet, чтоб class всегда в начале был, до остальных аттрибутов?

[@constyak9031]

привет, Вадим. спасибо за годную вечеринку. подскажи, пожалуйста, стоит ли указывать max-width для title subtitle и text? контент ведь может поменяться

[@vlados4449]

Если может поменяться , то лучше min-width, чтоб был запас по ширине

[@vadymprokopchuk]

можно указать но с хорошим запасом

[@АленаБулатова-ф5ж]

Вадим, я еще ламбу не освоил, остановись!))

[@vadymprokopchuk]

нужно больше контента=))

[@Leyman46rus]

Когда вы добавили классу menu дисплей флекс, логотип уехал вправо и перестал быть по центру как в макете. Как это правильнее всего поправить? Upd: Поторопился, во второй части все решается)

[@Даниил-ш5у6ъ]

🔥🔥🔥🔥🔥🔥

[@kirillusmanov3330]

Классно, особенно если смотреть хотя бы на x1.5 и есть вопросик...а гриды здесь только в названии видео-ролика?

[@vadymprokopchuk]

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

[@kirillusmanov3330]

@@vadymprokopchukУже посмотрел, спасибо 🙏

[@jakhongirabdurakhmanov4048]

Вадос ! шикардос ! правда на лайв не успел (

[@bakaDev]

Здравствуйте а будет что нибудь про бутстрап?

[@alexey8178]

опечатка в названии видео - 1ое слово :3

[@vadymprokopchuk]

спасибо=)

[@вупидискуп]

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

[@DailyDeveloperNews]

Вадос, как центрировать лого? ибо сейчас оно сдвинуто вправо - так как justify-content: space-between -> делает одиноковое растояние между лого и нав \ лого и корзиной

[@2day159]

В мене є питання якщо я правильно замітив то в тебе браузер відкритий на ширині 67% чи щось тип того.Не булоб логічніше робити на 100% більшість користувачів сидять на бо дефолту такій довжині чи правильно буде сказати маштабу?

[@sadkate321]

желаю сверстанный многостранничник!

[@timurkurbanov08]

Шикарное видео. Ждём продолжения. Но в макете справа на кнопке фон вроде прозрачный, а не белый. А можно как-то сверстать его прозрачным, или надо просто сделать цвет фона серым как сама картинка?

[@vadymprokopchuk]

можно попробовать и насхематозить с прозрачностью, но там реализация уже другая будет

[@vgshenshin]

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

[@romanpit4you361]

Подскажите, а почему вариант сделать 2 кнопки и соединить их не подошел? и у второй кнопки сделать background-color: transparent; ? + на макете 2 кнопки) тайминг если, что 1:11:48 )

[@alexdexx21]

я б ещё добавил второй кнопке backdrop-filter: blur(10px); например, во избежание)

[@sasha_08170]

Спасибо Вам

[@bogdaryan13]

Я не совсем понял момент, где ты взял line-height 22.08px. Можешь объяснить пожалуйста ?