Верстка сайта на гридах с нуля, css grid верстка
Друзья, в этом видосе я верстаю интересный сайтец, с множеством неочевидных на первый взгляд вещей. По максимум использую 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
Пікірлер: 260
Идея с многостраничником огонь! Спасибо за урок, очень нравится вас смотреть и слушать :)
Благодарю, Вадим, что не забываешь о нас, делишься своей мудростью! Дай Бог тебе и твоим близким счастья, здоровья, процветания и мирного неба над головой!
@vadymprokopchuk
Жыл бұрын
спасибо
@progi99
Жыл бұрын
@@vadymprokopchuk присоединяюсь, я верстку не сильно люблю, но чтобы подтянуть свои знания и что то новое узнать захожу и делаю.
Спасибо за урок! Да, многостраничник было бы супер)
@user-lm9ee1gn5p
Жыл бұрын
Поддерживаю
@vadymprokopchuk
Жыл бұрын
поддерживаю!=)
@pungushe
Жыл бұрын
Поддерживаю
@progover24
Жыл бұрын
@@vadymprokopchuk Вадим попроси Варвару сделать дизайн многостраничника)
@nJ-xm9jl
Жыл бұрын
подтверждаю )
Как же вовремя! Как раз нужна была практика с гридами) Спасибо за видео, жирнющий лайк прилагается :D
@vadymprokopchuk
Жыл бұрын
круть!
@drknss3021
Жыл бұрын
Научи настраивать жирность лайков)
Дядька, спасибо что с нами!
Долгожданные гриды! С огромным удовольствием посмотрю!
Огромная благодарность,Ваш канал даёт великое множество возможностей🦾
Дякую Вадиме за твою працю! Дуже інформативне відео, завжди чекаємо нивих уроків.
за 6-7 видео научился многому благодаря тебе.Спасибо большое.Лучший!!!
@vadymprokopchuk
Жыл бұрын
круть
Вадим, была рада увидеть тебя! Благодарю за видео! Ты шикарный спец и очень хороший, доброжелательный и воспитанный человек! В 2021 приобрела твой курс по вёрстке - и ни разу не пожалела об этом!!!!!Успеха, здоровья и благополучия от всей души!
@vadymprokopchuk
Жыл бұрын
Благодарю!
Спасибо за урок! Все объясняешь максимально доходчиво )
Крутая подача. Словечки. Концентрация внимания на неочевидных мелочах. Первое видео смотрю и очень нравится.
Топовый контент. Лучший учитель по верстке. Спасибо Вадим!
@vadymprokopchuk
Жыл бұрын
Благодарю
Спасибо за видос! Всегда круто! Как раз одну штучку для себя подсмотрел )
Спасибо большое за ваши уроки. Вы меня многому научили.
Интересная вечеринка с гридами 👍
VR - классная вещь. Там так красиво, уютно, хорошо))) наша любимая игра - beat siber. Урок отличный. Каждый раз что-то новое рассказываете. Спасибо!!!
@vadymprokopchuk
Жыл бұрын
спасибо
Есть доступ ко всем курсам скиллбокс, могу бесплатно посмотреть любой курс. Но ты такой крутой рассказчик, что хочется тебя поддержать и пройти именно твой курс, успехов тебе и большое спасибо за контент!
Спасибо Вам большое за уроки!
Спасибо большое за контент! очень рада, что когда-то нашла вас на udemy !)
@vadymprokopchuk
Жыл бұрын
круто, спасибо и я рад))
Интересно) но хотелось бы что-то посложнее, с gulp и многостраничник и тд)
спасибо за крутую вечеринку! снова будем кайфовать за версткой!)))))))))............
Решение с кнопками - просто 🔥 🔥 🔥
Ждал что то интересное не совсем для новичком ураа)
Вот кнопку я воо ще оценил, вспомнил же , годный контент. Я уже сколько лет сам верстаю, а твои видео по сей день смотрю. Нужно выпускать треллеры: "Скоро на большых просторах Ютуба смотрите" и туда нарезки, типа: по больнице, кнопка, космическая полицию ну и еще куча. КРАСАВЧИК-ОГОНЬ. Еще когда в спан убирал стили нужно было сказать “Я тебя помножу на ноль”.
Спасибо за замечательные видео.Очень крутая подача, и учился, и смеешься над шутками!!(за многостраничник)
Вадим спасибо за видео, ты лучший!
случайно забрёл на этот канал, но твои объяснения просто топ и слушать приятно и понятно всё!!!
Пасиб!) В каждом видео нахожу что-то новое!
@vadymprokopchuk
9 ай бұрын
круть
Отличный урок, спасибо за труд! С многостраничником отличная идея
@vadymprokopchuk
Жыл бұрын
уже залил первый многостраничник
Кто-то тусуется с грибами, а нормальные чуваки с гридами! 😂
@vadymprokopchuk
Жыл бұрын
точняк
@Psixooz
Жыл бұрын
псс.. парень, не много гридов не интересует?)
очень вовремя) биг лойс
Спасибо!!! Туториал огонь!🔥
Хорошая подача материала!
Просто огонь, пасиба!)
Хочу многостраничник!!! Как всегда ЖИРНЫЙ лайк! Спасибо Вадос за топ контент!
@vadymprokopchuk
Жыл бұрын
спасибо
Благодарю как всегда круто
Вадим, большое спасибо за ваш труд! видео огонь! дизайн топ! также спасибо и вашей супруге за ее роботу! жду многостраничник)))
@vadymprokopchuk
Жыл бұрын
круть, спасибо
Привет, рад тебя снова видеть на ютубе, здоровья тебе и твоим близким!
@vadymprokopchuk
Жыл бұрын
благодарю
Классно что макет в описании к видео , а не в телеге ))
Спасибо за труд 🙏🙏 Многостраничный сайт, плагины 🔥
@vadymprokopchuk
Жыл бұрын
топ топ топ
прикольный урок )) спасибо
Спасибо Вадим!
Для 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
4 ай бұрын
отличный коммент! бордер сделался, но вот прозрачность не появилась :(
Вадим, спасибо за видео! Думаю, что для задания градиента для 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 написал под видео в комменте
оу, оу, оу, потрясающая вечериночка подъехала )))
@vadymprokopchuk
Жыл бұрын
врываемся )
Лять, зашел на практику по гридам, весь видос по флексам) остался только из-за подачи инфы, заодно повторил флексы. пойду на продолжение, может хоть там гриды найду. Спасибо за инфу)
Спасибо за урок, желаю сверстаный многостраничник
@vadymprokopchuk
Жыл бұрын
отлично
Спасибо, очень круто объясняешь, странно что так мало подписчиков. Ребят, подскажите как настроить Emmet, чтоб class всегда в начале был, до остальных аттрибутов?
Очень нравятся уроки, Вадима. Много кого смотрела, но уроки Вадима прям в сердечко. Подскажите, пожалуйста, как сделать так, что border-bottom выводились сразу эти параметры: 1px solid #000? Как здесь 28:28?
Вадим, пожалуйста, сними видео про новую Gulp сборку. Очень благодарна за твой труд и прекрасную подачу материала, благодаря тебе я начала шарить в вёрстке))
@vadymprokopchuk
Жыл бұрын
нужно снять
@golden_go3673
Жыл бұрын
@@vadymprokopchuk jdem)
Вадос, работаю фронтом уже 2 года. Сел под пивко насладится твоей компанией. Вспомнить те эмоции которые ты мне дарил в период моего обучения, когда я начинал постигать азы верстки и верстал Кубу повторяя за тобой. Выражаю тебе огромный респектос за твой труд , он бустанул мою карьеру. Ты топ!❤
@vadymprokopchuk
4 ай бұрын
круто, спасибо!
В css на 1:14:01 в селекторе buy-btn два padding одно со значением 0 другое со значением 1. За верстку спасибо!
прям очень большое спасибо!!!
Спасибо большое!
привет, Вадим. спасибо за годную вечеринку. подскажи, пожалуйста, стоит ли указывать max-width для title subtitle и text? контент ведь может поменяться
@vlados4449
Жыл бұрын
Если может поменяться , то лучше min-width, чтоб был запас по ширине
@vadymprokopchuk
Жыл бұрын
можно указать но с хорошим запасом
Вадим, дякую тобі за твої кайфові відео. Дуже приємно та корисно проводити час на твоїх марафонах. Буду дуже радий, якщо в тебе буде можливість зверстати багатосторінковий сайт, так як це повинно бути в сьогоднішніх реаліях. Дякую :)
@vadymprokopchuk
Жыл бұрын
супер, дякую
Комментарий в поддержку канала
@vadymprokopchuk
Жыл бұрын
огонь!
Меня спросили, верю ли я в бога? Я ответил - Да Меня спросили, в какого? Я ответил - в Вадима Прокопчука
@luxarmiger5729
Жыл бұрын
Бог верстки. Я тоже в него верую!
Спасибо за твой труд! Многостраничник было бы круто!!
@vadymprokopchuk
Жыл бұрын
супер
респект, вадосик, давай курс по базе JS!!!)
@Psixooz
Жыл бұрын
согласен, давай js базу, это прям пушка!!)
ОПА, лайк не глядя
Спасибо за видео, есть пару недочетов, в хедере элементы должны быть выровнены по центру и что то не представляю как это сделать и на кнопки не применяется данный шрифт. Хочется увидеть как делать многостаночник, с подключенными одинаковыми блоками.
45:55 проорал с кнопки xD годно
Дякую, за класні та веселі уроки, Вадим, було б круто зверстати багатосторінковий сайт)
@vadymprokopchuk
Жыл бұрын
супер, зафіксував, дякую
Большое спасибо!
Вадим видео отличное и за это конечно ЛАЙК с многостраничнком идея шикарная !!! И было бы супер если б этот марафон с многостраничником был со всеми плюшками (JS,WEBPACK и тому прочее)готов за такое задонатить(кто поддерживает ставим лайк этому коменту)и в итоге думаю получилась бы супер мегавселенская вечеринка.
Спасибо вам, урок очень интересный, ждем видос про плагины для фигмы
@vadymprokopchuk
Жыл бұрын
спасибо
сижу в ожидании верстки многостраничного сайта)
Здравствуйте а будет что нибудь про бутстрап?
Пушка
Спасибо! Ждем многостраничник
Вадос, как центрировать лого? ибо сейчас оно сдвинуто вправо - так как justify-content: space-between -> делает одиноковое растояние между лого и нав \ лого и корзиной
Насчёт корзины и меняющихся цифр, норм ли практика использовать дата атрибут и застилить через псевдоелемент?
Спасибо Вам
Я не совсем понял момент, где ты взял line-height 22.08px. Можешь объяснить пожалуйста ?
Многостраницный сайт уже давно пора было делать, ато в ютубе очень мало таких видосов оооооочень мало
Привет, подскажи плз, как ты настроил еммет, чтобы у ссылок классы создавались перед атрибутом href, а не после? Не могу никак нагуглить.
@dmitriyzhuykov4244
Жыл бұрын
Привет. В файле settings.json (в настройках VSCode) вставь вот эту строку: "emmet.preferences": { "output.reverseAttributes": true }
@FRONTENDWAY
Жыл бұрын
@@dmitriyzhuykov4244 балдёж, все работает. Спасибо)
В мене є питання якщо я правильно замітив то в тебе браузер відкритий на ширині 67% чи щось тип того.Не булоб логічніше робити на 100% більшість користувачів сидять на бо дефолту такій довжині чи правильно буде сказати маштабу?
🔥🔥🔥🔥🔥🔥
Спасибо за ролик, ждем многостраничник
@vadymprokopchuk
Жыл бұрын
отлично)
Шикарное видео. Ждём продолжения. Но в макете справа на кнопке фон вроде прозрачный, а не белый. А можно как-то сверстать его прозрачным, или надо просто сделать цвет фона серым как сама картинка?
@vadymprokopchuk
Жыл бұрын
можно попробовать и насхематозить с прозрачностью, но там реализация уже другая будет
@vgshenshin
Жыл бұрын
у меня вроде получилось так сверстать, CSS написал под видео в комменте
Лучший
я бы сказал: не провод важная часть нашей жизни, а поводок 😆
Завидую (в хорошем смысле) тем ребятам которые пройдут курс Вадима Прокопчука по вёрстке. Потому что такого подхода к подаче материала есть только у единиц преподавателей. О чём я? Да вы наверное и сами заметили что Вадим подходит к подаче к материала с позитивом - что вас и ждёт на протяжении всего курса. Поверьте, многие ведут курсы как лекции и интерес к изучению угасает. P.S. Это не реклама - а крик души) Вы не пожалеете!
Желаю многостраничный сайт)
спасибо!
ребятки, подскажите, почему, когда я пытаюсь из фигмы сохранить бэкграунд в топовой секции, то он сохраняется со всеми надписями, которые на картинке в итд, это кривой макет или я что-то не то делаю?
У меня картинка на экран не стала, чисто по блоку? 100vh норм работает, только задаю минус сразу же уменьшается и появляется где есть контент
Thanks.
Когда вы добавили классу menu дисплей флекс, логотип уехал вправо и перестал быть по центру как в макете. Как это правильнее всего поправить? Upd: Поторопился, во второй части все решается)
Желаем свёрстанный многостраничник)))
Vashshe malades
Классно, особенно если смотреть хотя бы на x1.5 и есть вопросик...а гриды здесь только в названии видео-ролика?
@vadymprokopchuk
4 ай бұрын
Там все будет, гриды нужно использовать в нужных местах, а не лепить просто потому что хочется свойство записать )
@kirillusmanov3330
4 ай бұрын
@@vadymprokopchukУже посмотрел, спасибо 🙏
Подскажите, а почему вариант сделать 2 кнопки и соединить их не подошел? и у второй кнопки сделать background-color: transparent; ? + на макете 2 кнопки) тайминг если, что 1:11:48 )
@alexdexx21
4 ай бұрын
я б ещё добавил второй кнопке backdrop-filter: blur(10px); например, во избежание)
Вадос ! шикардос ! правда на лайв не успел (
Огромное Благодарю за ваши уроки! Друзья, поактивнее пожалуйста. Поддержите идею многостраничника. Накидайте комментов.
@vadymprokopchuk
Жыл бұрын
вот вот!
Чисто для актива коммент )
@vadymprokopchuk
Жыл бұрын
чисто красава )
А точно ли тут есть адаптив, если ты используешь постоянно padding top margin bottom и тд?
у меня почему то лого вправо сместилась. вроде код такой же...