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

Рет қаралды 41,595

Жыл бұрын

Друзья, в этом видосе я верстаю интересный сайтец, с множеством неочевидных на первый взгляд вещей. По максимум использую 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

Пікірлер: 257

@user-hr6ot1oo9v Жыл бұрын

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

@djarchdjarch2266 11 ай бұрын

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

@user-wx4eg7sf3c Жыл бұрын

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

@drknss3021 Жыл бұрын

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

@romanhassazhyrov5558 Жыл бұрын

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

@user-xu4ob9pg7e Жыл бұрын

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

@felion111 Жыл бұрын

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

@sergeytimohin953 Жыл бұрын

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

@luxarmiger5729 Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

спасибо

@progi99 Жыл бұрын

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

@MoNa-yq2nw Жыл бұрын

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

@andreasshev5748 6 ай бұрын

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

@sivilrishar2927 Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

круть!

@drknss3021 Жыл бұрын

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

@shelestnn Жыл бұрын

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

@user-lm9ee1gn5p Жыл бұрын

Поддерживаю

@vadymprokopchuk Жыл бұрын

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

@pungushe Жыл бұрын

Поддерживаю

@progover24 Жыл бұрын

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

@nJ-xm9jl Жыл бұрын

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

@user-lr5xn7it8r Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

Благодарю!

@diggerdog001 Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

Благодарю

@nodprogson Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

круть

@MPy554 Жыл бұрын

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

@user-nz3hw1jn2y Жыл бұрын

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

@user-frond-end_dev Жыл бұрын

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

@TOROGAR Жыл бұрын

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

@catsoftheworld Жыл бұрын

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

@1081bad Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

точняк

@Psixooz Жыл бұрын

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

@drknss3021 Жыл бұрын

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

@user-zy1dc3gv6r 8 ай бұрын

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

@vadymprokopchuk 8 ай бұрын

круть

@user-np6fq5ir6d Жыл бұрын

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

@user-hn9ns2ug8g Жыл бұрын

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

@Marina-bh8iw Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

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

@RomanKhassazhirov Жыл бұрын

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

@user-th6sy3vk8d Жыл бұрын

Ждал что то интересное не совсем для новичком ураа)

@RomanRazvodyashii Жыл бұрын

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

@0blachkoplay831 Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

спасибо

@pungushe Жыл бұрын

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

@niakhai3659 Жыл бұрын

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

@diktashum15 Жыл бұрын

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

@spacekraken67 Жыл бұрын

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

@AlexanderBogdanov-dw6cw 7 ай бұрын

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

@dimalukashenko4865 Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

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

@user-di3hu5gq2b Жыл бұрын

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

@sprice8246 Жыл бұрын

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

@user-gu4nw1sq9w Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

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

@user-bm5ge3mr9u Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

спасибо

@nikomunikabelen8540 8 ай бұрын

спасибо!

@nJ-xm9jl Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

врываемся )

@user-jo1fd6jz6e 2 ай бұрын

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

@Hector_UA Жыл бұрын

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

@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 написал под видео в комменте

@niceman5890 Жыл бұрын

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

@Aleksandrovich_Pavel Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

топ топ топ

@dmitriyk.2462 Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

благодарю

@user-zc8ex3mv1p Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

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

@user-bl1vf3sn4h Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

отлично

@cakeordie8790 Жыл бұрын

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

@maximdolbeshchenkov5901 Жыл бұрын

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

@user-xg2on8ql7v Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

нужно снять

@golden_go3673 Жыл бұрын

@@vadymprokopchuk jdem)

@urooro3027 Жыл бұрын

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

@danilplakhotin5187 Жыл бұрын

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

@overshotkuka9347 Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

спасибо

@Sward66 Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

огонь!

@user-js9pd7cv6g 3 ай бұрын

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

@vadymprokopchuk 3 ай бұрын

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

@user-us8eo3dz9p 25 күн бұрын

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

@Spellforge Жыл бұрын

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

@icegouse Жыл бұрын

Спасибо Вам

@Mans-Rogers Жыл бұрын

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

@luxarmiger5729 Жыл бұрын

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

@Bloodravenful Жыл бұрын

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

@Lider_mahinator Жыл бұрын

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

@dimasnytin Жыл бұрын

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

@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 ай бұрын

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

@Alla-gu1zt Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

супер

@user-zu4xq6ns1c Жыл бұрын

Лучший

@tun11x11 Жыл бұрын

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

@Psixooz Жыл бұрын

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

@serzhserious8816 Жыл бұрын

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

@user-sm4zy7uc1m 10 ай бұрын

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

@user-xm8gu9ks4k Жыл бұрын

Пушка

@user-gg3pc8us9y Жыл бұрын

🔥🔥🔥🔥🔥🔥

@yppi1252 Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

отлично)

@jakhongirabdurakhmanov4048 Жыл бұрын

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

@IgorBobyrev Ай бұрын

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

@fantomgrivdogs5996 Жыл бұрын

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

@2day159 7 ай бұрын

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

@nic-ori Жыл бұрын

Thanks.

@user-sv7us6sq2f Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

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

@abraham_word Жыл бұрын

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

@romanpit4you361 7 ай бұрын

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

@alexdexx21 3 ай бұрын

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

@jekamokan Жыл бұрын

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

@constyak9031 Жыл бұрын

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

@vlados4449 Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

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

@umid-ed1nr Жыл бұрын

Vashshe malades

@bogdaryan13 Жыл бұрын

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

@alexey8178 Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

спасибо=)

@bakaDev Жыл бұрын

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

@vp1938 Жыл бұрын

Насчёт корзины и меняющихся цифр, норм ли практика использовать дата атрибут и застилить через псевдоелемент?

@user-ls4ep8mk4f Жыл бұрын

дякую

@timurkurbanov08 Жыл бұрын

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

@vadymprokopchuk Жыл бұрын

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

@vgshenshin Жыл бұрын

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