Верстка сайта на гридах с нуля, css grid верстка
Переглядів 41,221
Рік томуДрузья, в этом видосе я верстаю интересный сайтец, с множеством неочевидных на первый взгляд вещей. По максимум использую css grid потому что этот сайт предусматревает такую вечеринку.
Макет + шрифты: drive.google.com/drive/folder...
Мой курс по верстке - from0to1.com.ua/
Телеграм канал - t.me/from0to1com
Большой гайд по гридам - • CSS GRID Большое руков...
О box-sizing - • box sizing border box ...
Видос по svg - • SVG, большой гайд
Плейлист по Figma:
• Бесплатный курс по Fig...
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
@luxarmiger5729 Рік тому
Благодарю, Вадим, что не забываешь о нас, делишься своей мудростью! Дай Бог тебе и твоим близким счастья, здоровья, процветания и мирного неба над головой!
@vadymprokopchuk Рік тому
спасибо
@progi99 Рік тому
@@vadymprokopchuk присоединяюсь, я верстку не сильно люблю, но чтобы подтянуть свои знания и что то новое узнать захожу и делаю.
@user-hr6ot1oo9v Рік тому
Идея с многостраничником огонь! Спасибо за урок, очень нравится вас смотреть и слушать :)
@shelestnn Рік тому
Спасибо за урок! Да, многостраничник было бы супер)
@user-lm9ee1gn5p Рік тому
Поддерживаю
@vadymprokopchuk Рік тому
поддерживаю!=)
@pungushe Рік тому
Поддерживаю
@progover24 Рік тому
@@vadymprokopchuk Вадим попроси Варвару сделать дизайн многостраничника)
@nJ-xm9jl Рік тому
подтверждаю )
@sivilrishar2927 Рік тому
Как же вовремя! Как раз нужна была практика с гридами) Спасибо за видео, жирнющий лайк прилагается :D
@vadymprokopchuk Рік тому
круть!
@drknss3021 Рік тому
Научи настраивать жирность лайков)
@djarchdjarch2266 11 місяців тому
Дякую Вадиме за твою працю! Дуже інформативне відео, завжди чекаємо нивих уроків.
@user-wx4eg7sf3c Рік тому
Огромная благодарность,Ваш канал даёт великое множество возможностей🦾
@1081bad Рік тому
Кто-то тусуется с грибами, а нормальные чуваки с гридами! 😂
@vadymprokopchuk Рік тому
точняк
@tothegame3546 Рік тому
псс.. парень, не много гридов не интересует?)
@romanhassazhyrov5558 Рік тому
Дядька, спасибо что с нами!
@drknss3021 Рік тому
Долгожданные гриды! С огромным удовольствием посмотрю!
@user-xu4ob9pg7e Рік тому
Крутая подача. Словечки. Концентрация внимания на неочевидных мелочах. Первое видео смотрю и очень нравится.
@sergeytimohin953 Рік тому
Спасибо за видос! Всегда круто! Как раз одну штучку для себя подсмотрел )
@felion111 Рік тому
Спасибо за урок! Все объясняешь максимально доходчиво )
@MoNa-yq2nw Рік тому
Спасибо большое за ваши уроки. Вы меня многому научили.
@diggerdog001 Рік тому
Топовый контент. Лучший учитель по верстке. Спасибо Вадим!
@vadymprokopchuk Рік тому
Благодарю
@user-nz3hw1jn2y Рік тому
Спасибо Вам большое за уроки!
@nodprogson Рік тому
за 6-7 видео научился многому благодаря тебе.Спасибо большое.Лучший!!!
@vadymprokopchuk Рік тому
круть
@user-frond-end_dev Рік тому
спасибо за крутую вечеринку! снова будем кайфовать за версткой!)))))))))............
@spacekraken67 Рік тому
Интересная вечеринка с гридами 👍
@drknss3021 Рік тому
Решение с кнопками - просто 🔥 🔥 🔥
@catsoftheworld Рік тому
Спасибо!!! Туториал огонь!🔥
@Marina-bh8iw Рік тому
Спасибо большое за контент! очень рада, что когда-то нашла вас на udemy !)
@vadymprokopchuk Рік тому
круто, спасибо и я рад))
@TOROGAR Рік тому
случайно забрёл на этот канал, но твои объяснения просто топ и слушать приятно и понятно всё!!!
@user-hn9ns2ug8g Рік тому
Спасибо за замечательные видео.Очень крутая подача, и учился, и смеешься над шутками!!(за многостраничник)
@user-th6sy3vk8d Рік тому
Ждал что то интересное не совсем для новичком ураа)
@andreasshev5748 5 місяців тому
Вадим спасибо за видео, ты лучший!
@MPy554 Рік тому
Есть доступ ко всем курсам скиллбокс, могу бесплатно посмотреть любой курс. Но ты такой крутой рассказчик, что хочется тебя поддержать и пройти именно твой курс, успехов тебе и большое спасибо за контент!
@user-zy1dc3gv6r 7 місяців тому
Пасиб!) В каждом видео нахожу что-то новое!
@vadymprokopchuk 7 місяців тому
круть
@user-us8eo3dz9p 12 днів тому
45:55 проорал с кнопки xD годно
@0blachkoplay831 Рік тому
VR - классная вещь. Там так красиво, уютно, хорошо))) наша любимая игра - beat siber. Урок отличный. Каждый раз что-то новое рассказываете. Спасибо!!!
@vadymprokopchuk Рік тому
спасибо
@user-di3hu5gq2b Рік тому
Интересно) но хотелось бы что-то посложнее, с gulp и многостраничник и тд)
@pungushe Рік тому
Благодарю как всегда круто
@RomanRazvodyashii Рік тому
Хорошая подача материала!
@user-np6fq5ir6d Рік тому
Вот кнопку я воо ще оценил, вспомнил же , годный контент. Я уже сколько лет сам верстаю, а твои видео по сей день смотрю. Нужно выпускать треллеры: "Скоро на большых просторах Ютуба смотрите" и туда нарезки, типа: по больнице, кнопка, космическая полицию ну и еще куча. КРАСАВЧИК-ОГОНЬ. Еще когда в спан убирал стили нужно было сказать “Я тебя помножу на ноль”.
@user-lr5xn7it8r Рік тому
Вадим, была рада увидеть тебя! Благодарю за видео! Ты шикарный спец и очень хороший, доброжелательный и воспитанный человек! В 2021 приобрела твой курс по вёрстке - и ни разу не пожалела об этом!!!!!Успеха, здоровья и благополучия от всей души!
@vadymprokopchuk Рік тому
Благодарю!
@RomanKhassazhirov 11 місяців тому
Просто огонь, пасиба!)
@dimalukashenko4865 Рік тому
Отличный урок, спасибо за труд! С многостраничником отличная идея
@vadymprokopchuk Рік тому
уже залил первый многостраничник
@user-gu4nw1sq9w Рік тому
Вадим, большое спасибо за ваш труд! видео огонь! дизайн топ! также спасибо и вашей супруге за ее роботу! жду многостраничник)))
@vadymprokopchuk Рік тому
круть, спасибо
@Mans-Rogers Рік тому
Меня спросили, верю ли я в бога? Я ответил - Да Меня спросили, в какого? Я ответил - в Вадима Прокопчука
@luxarmiger5729 Рік тому
Бог верстки. Я тоже в него верую!
@niakhai3659 Рік тому
Классно что макет в описании к видео , а не в телеге ))
@diktashum15 Рік тому
очень вовремя) биг лойс
@AlexanderBogdanov-dw6cw 6 місяців тому
Спасибо Вадим!
@user-bm5ge3mr9u Рік тому
Хочу многостраничник!!! Как всегда ЖИРНЫЙ лайк! Спасибо Вадос за топ контент!
@vadymprokopchuk Рік тому
спасибо
@user-sd9yo9cb5v Рік тому
Для 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 3 місяці тому
отличный коммент! бордер сделался, но вот прозрачность не появилась :(
@sprice8246 11 місяців тому
прикольный урок )) спасибо
@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 написал под видео в комменте
@cakeordie8790 Рік тому
В css на 1:14:01 в селекторе buy-btn два padding одно со значением 0 другое со значением 1. За верстку спасибо!
@Aleksandrovich_Pavel Рік тому
Спасибо за труд 🙏🙏 Многостраничный сайт, плагины 🔥
@vadymprokopchuk Рік тому
топ топ топ
@user-jo1fd6jz6e 2 місяці тому
Лять, зашел на практику по гридам, весь видос по флексам) остался только из-за подачи инфы, заодно повторил флексы. пойду на продолжение, может хоть там гриды найду. Спасибо за инфу)
@user-js9pd7cv6g 3 місяці тому
Вадос, работаю фронтом уже 2 года. Сел под пивко насладится твоей компанией. Вспомнить те эмоции которые ты мне дарил в период моего обучения, когда я начинал постигать азы верстки и верстал Кубу повторяя за тобой. Выражаю тебе огромный респектос за твой труд , он бустанул мою карьеру. Ты топ!❤
@vadymprokopchuk 3 місяці тому
круто, спасибо!
@dmitriyk.2462 Рік тому
Привет, рад тебя снова видеть на ютубе, здоровья тебе и твоим близким!
@vadymprokopchuk Рік тому
благодарю
@niceman5890 Рік тому
Спасибо большое!
@user-xg2on8ql7v Рік тому
Вадим, пожалуйста, сними видео про новую Gulp сборку. Очень благодарна за твой труд и прекрасную подачу материала, благодаря тебе я начала шарить в вёрстке))
@vadymprokopchuk Рік тому
нужно снять
@golden_go3673 Рік тому
@@vadymprokopchuk jdem)
@maximdolbeshchenkov5901 Рік тому
Большое спасибо!
@tun11x11 Рік тому
респект, вадосик, давай курс по базе JS!!!)
@tothegame3546 Рік тому
согласен, давай js базу, это прям пушка!!)
@nJ-xm9jl Рік тому
оу, оу, оу, потрясающая вечериночка подъехала )))
@vadymprokopchuk Рік тому
врываемся )
@nikomunikabelen8540 8 місяців тому
спасибо!
@icegouse Рік тому
Спасибо Вам
@danilplakhotin5187 Рік тому
Вадим видео отличное и за это конечно ЛАЙК с многостраничнком идея шикарная !!! И было бы супер если б этот марафон с многостраничником был со всеми плюшками (JS,WEBPACK и тому прочее)готов за такое задонатить(кто поддерживает ставим лайк этому коменту)и в итоге думаю получилась бы супер мегавселенская вечеринка.
@overshotkuka9347 Рік тому
Спасибо вам, урок очень интересный, ждем видос про плагины для фигмы
@vadymprokopchuk Рік тому
спасибо
@Alla-gu1zt Рік тому
Спасибо за твой труд! Многостраничник было бы круто!!
@vadymprokopchuk Рік тому
супер
@Bloodravenful Рік тому
сижу в ожидании верстки многостраничного сайта)
@Hector_UA Рік тому
Вадим, дякую тобі за твої кайфові відео. Дуже приємно та корисно проводити час на твоїх марафонах. Буду дуже радий, якщо в тебе буде можливість зверстати багатосторінковий сайт, так як це повинно бути в сьогоднішніх реаліях. Дякую :)
@vadymprokopchuk Рік тому
супер, дякую
@user-bl1vf3sn4h Рік тому
Спасибо за урок, желаю сверстаный многостраничник
@vadymprokopchuk Рік тому
отлично
@user-zc8ex3mv1p Рік тому
Дякую, за класні та веселі уроки, Вадим, було б круто зверстати багатосторінковий сайт)
@vadymprokopchuk Рік тому
супер, зафіксував, дякую
@user-gg3pc8us9y Рік тому
🔥🔥🔥🔥🔥🔥
@IgorBobyrev Місяць тому
я бы сказал: не провод важная часть нашей жизни, а поводок 😆
@dimasnytin Рік тому
Спасибо! Ждем многостраничник
@Sward66 Рік тому
Комментарий в поддержку канала
@vadymprokopchuk Рік тому
огонь!
@Lider_mahinator Рік тому
Завидую (в хорошем смысле) тем ребятам которые пройдут курс Вадима Прокопчука по вёрстке. Потому что такого подхода к подаче материала есть только у единиц преподавателей. О чём я? Да вы наверное и сами заметили что Вадим подходит к подаче к материала с позитивом - что вас и ждёт на протяжении всего курса. Поверьте, многие ведут курсы как лекции и интерес к изучению угасает. P.S. Это не реклама - а крик души) Вы не пожалеете!
@urooro3027 Рік тому
ОПА, лайк не глядя
@user-zu4xq6ns1c Рік тому
Лучший
@Spellforge Рік тому
Спасибо за видео, есть пару недочетов, в хедере элементы должны быть выровнены по центру и что то не представляю как это сделать и на кнопки не применяется данный шрифт. Хочется увидеть как делать многостаночник, с подключенными одинаковыми блоками.
@user-xm8gu9ks4k Рік тому
Пушка
@abraham_word Рік тому
Вадос, как центрировать лого? ибо сейчас оно сдвинуто вправо - так как justify-content: space-between -> делает одиноковое растояние между лого и нав \ лого и корзиной
@user-sm4zy7uc1m 9 місяців тому
Многостраницный сайт уже давно пора было делать, ато в ютубе очень мало таких видосов оооооочень мало
@nic-ori Рік тому
Thanks.
@serzhserious8816 Рік тому
Спасибо, очень круто объясняешь, странно что так мало подписчиков. Ребят, подскажите как настроить Emmet, чтоб class всегда в начале был, до остальных аттрибутов?
@bogdaryan13 Рік тому
Я не совсем понял момент, где ты взял line-height 22.08px. Можешь объяснить пожалуйста ?
@vp1938 Рік тому
Насчёт корзины и меняющихся цифр, норм ли практика использовать дата атрибут и застилить через псевдоелемент?
@yppi1252 Рік тому
Спасибо за ролик, ждем многостраничник
@vadymprokopchuk Рік тому
отлично)
@viktor_kobozya Рік тому
Огромное Благодарю за ваши уроки! Друзья, поактивнее пожалуйста. Поддержите идею многостраничника. Накидайте комментов.
@vadymprokopchuk Рік тому
вот вот!
@fantomgrivdogs5996 Рік тому
Желаю многостраничный сайт)
@constyak9031 Рік тому
привет, Вадим. спасибо за годную вечеринку. подскажи, пожалуйста, стоит ли указывать max-width для title subtitle и text? контент ведь может поменяться
@vlados4449 Рік тому
Если может поменяться , то лучше min-width, чтоб был запас по ширине
@vadymprokopchuk Рік тому
можно указать но с хорошим запасом
@romanpit4you361 7 місяців тому
Подскажите, а почему вариант сделать 2 кнопки и соединить их не подошел? и у второй кнопки сделать background-color: transparent; ? + на макете 2 кнопки) тайминг если, что 1:11:48 )
@alexdexx21 3 місяці тому
я б ещё добавил второй кнопке backdrop-filter: blur(10px); например, во избежание)
@jakhongirabdurakhmanov4048 Рік тому
Вадос ! шикардос ! правда на лайв не успел (
@user-sv7us6sq2f Рік тому
Чисто для актива коммент )
@vadymprokopchuk Рік тому
чисто красава )
@umid-ed1nr Рік тому
Vashshe malades
@2day159 7 місяців тому
В мене є питання якщо я правильно замітив то в тебе браузер відкритий на ширині 67% чи щось тип того.Не булоб логічніше робити на 100% більшість користувачів сидять на бо дефолту такій довжині чи правильно буде сказати маштабу?
@stanislaff5578 Рік тому
🤗
@FRONTENDWAY Рік тому
Привет, подскажи плз, как ты настроил еммет, чтобы у ссылок классы создавались перед атрибутом href, а не после? Не могу никак нагуглить.
@dmitriyzhuykov4244 Рік тому
Привет. В файле settings.json (в настройках VSCode) вставь вот эту строку: "emmet.preferences": { "output.reverseAttributes": true }
@FRONTENDWAY Рік тому
@@dmitriyzhuykov4244 балдёж, все работает. Спасибо)
@5051SQUAGAMING 6 місяців тому
У меня картинка на экран не стала, чисто по блоку? 100vh норм работает, только задаю минус сразу же уменьшается и появляется где есть контент
@whyquiZso2 8 місяців тому
Вадим,почему когда я хочу посмотреть что получается то у меня просто белый экран в браузере????
@vadymprokopchuk 8 місяців тому
не сохранили, не обновили, смотрите не ту страницу в которой пишите, всякое может быть
@whyquiZso2 8 місяців тому
да,дело в том что не обновил,спасибо большое)делаю сайты по вашим роликам,очень хорошо обьясняете все понятно) @@vadymprokopchuk
@jekamokan Рік тому
Желаем свёрстанный многостраничник)))
@bakaDev Рік тому
Здравствуйте а будет что нибудь про бутстрап?
@user-tb2tj6ey8p 10 місяців тому
ребятки, подскажите, почему, когда я пытаюсь из фигмы сохранить бэкграунд в топовой секции, то он сохраняется со всеми надписями, которые на картинке в итд, это кривой макет или я что-то не то делаю?
@alexey8178 Рік тому
опечатка в названии видео - 1ое слово :3
@vadymprokopchuk Рік тому
спасибо=)
@Blondguy12 Рік тому
многостраничник топ!
@Konstsin Рік тому
желаем сверстаный многостраничник!!))
@vadymprokopchuk Рік тому
отлично)
@user-ls4ep8mk4f Рік тому
дякую
@sadkate321 Рік тому
желаю сверстанный многостранничник!
От 0 до 1
Переглядів 12 тис.
Суспільне Львів
Переглядів 616 тис.
Суспільне Вінниця
Переглядів 527 тис.
Алексей Навальный
Переглядів 3,2 млн
ExileShow
Переглядів 4,8 млн
Фрілансер по життю
Переглядів 1 млн
Pro Web
Переглядів 14 тис.
Суспільне Львів
Переглядів 616 тис.