Верстка сайта на гридах с нуля, css grid верстка
Vložit
- čas přidán 15. 01. 2023
- Друзья, в этом видосе я верстаю интересный сайтец, с множеством неочевидных на первый взгляд вещей. По максимум использую 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
Идея с многостраничником огонь! Спасибо за урок, очень нравится вас смотреть и слушать :)
Спасибо за урок! Да, многостраничник было бы супер)
Поддерживаю
поддерживаю!=)
Поддерживаю
@@vadymprokopchuk Вадим попроси Варвару сделать дизайн многостраничника)
подтверждаю )
Благодарю, Вадим, что не забываешь о нас, делишься своей мудростью! Дай Бог тебе и твоим близким счастья, здоровья, процветания и мирного неба над головой!
спасибо
@@vadymprokopchuk присоединяюсь, я верстку не сильно люблю, но чтобы подтянуть свои знания и что то новое узнать захожу и делаю.
Как же вовремя! Как раз нужна была практика с гридами) Спасибо за видео, жирнющий лайк прилагается :D
круть!
Научи настраивать жирность лайков)
Интересно) но хотелось бы что-то посложнее, с gulp и многостраничник и тд)
Огромная благодарность,Ваш канал даёт великое множество возможностей🦾
Для 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;
Это обеспечит её прозрачность и всё будет выглядеть по макету
отличный коммент! бордер сделался, но вот прозрачность не появилась :(
Дядька, спасибо что с нами!
Кто-то тусуется с грибами, а нормальные чуваки с гридами! 😂
точняк
псс.. парень, не много гридов не интересует?)
Долгожданные гриды! С огромным удовольствием посмотрю!
Спасибо за урок! Все объясняешь максимально доходчиво )
Интересная вечеринка с гридами 👍
Крутая подача. Словечки. Концентрация внимания на неочевидных мелочах.
Первое видео смотрю и очень нравится.
VR - классная вещь. Там так красиво, уютно, хорошо))) наша любимая игра - beat siber.
Урок отличный. Каждый раз что-то новое рассказываете. Спасибо!!!
спасибо
Спасибо большое за ваши уроки. Вы меня многому научили.
Спасибо за видос! Всегда круто! Как раз одну штучку для себя подсмотрел )
Есть доступ ко всем курсам скиллбокс, могу бесплатно посмотреть любой курс. Но ты такой крутой рассказчик, что хочется тебя поддержать и пройти именно твой курс, успехов тебе и большое спасибо за контент!
Спасибо Вам большое за уроки!
Вадим, была рада увидеть тебя! Благодарю за видео! Ты шикарный спец и очень хороший, доброжелательный и воспитанный человек! В 2021 приобрела твой курс по вёрстке - и ни разу не пожалела об этом!!!!!Успеха, здоровья и благополучия от всей души!
Благодарю!
за 6-7 видео научился многому благодаря тебе.Спасибо большое.Лучший!!!
круть
Вот кнопку я воо ще оценил, вспомнил же , годный контент. Я уже сколько лет сам верстаю, а твои видео по сей день смотрю. Нужно выпускать треллеры: "Скоро на большых просторах Ютуба смотрите" и туда нарезки, типа: по больнице, кнопка, космическая полицию ну и еще куча. КРАСАВЧИК-ОГОНЬ. Еще когда в спан убирал стили нужно было сказать “Я тебя помножу на ноль”.
Дякую Вадиме за твою працю! Дуже інформативне відео, завжди чекаємо нивих уроків.
Топовый контент. Лучший учитель по верстке. Спасибо Вадим!
Благодарю
Вадим спасибо за видео, ты лучший!
Спасибо за замечательные видео.Очень крутая подача, и учился, и смеешься над шутками!!(за многостраничник)
случайно забрёл на этот канал, но твои объяснения просто топ и слушать приятно и понятно всё!!!
Решение с кнопками - просто 🔥 🔥 🔥
Спасибо!!! Туториал огонь!🔥
спасибо за крутую вечеринку! снова будем кайфовать за версткой!)))))))))............
Спасибо большое за контент! очень рада, что когда-то нашла вас на udemy !)
круто, спасибо и я рад))
Очень нравятся уроки, Вадима. Много кого смотрела, но уроки Вадима прям в сердечко. Подскажите, пожалуйста, как сделать так, что border-bottom выводились сразу эти параметры: 1px solid #000? Как здесь 28:28?
Вадос, работаю фронтом уже 2 года. Сел под пивко насладится твоей компанией. Вспомнить те эмоции которые ты мне дарил в период моего обучения, когда я начинал постигать азы верстки и верстал Кубу повторяя за тобой. Выражаю тебе огромный респектос за твой труд , он бустанул мою карьеру. Ты топ!❤
круто, спасибо!
Ждал что то интересное не совсем для новичком ураа)
Отличный урок, спасибо за труд! С многостраничником отличная идея
уже залил первый многостраничник
Благодарю как всегда круто
Хорошая подача материала!
Просто огонь, пасиба!)
Пасиб!) В каждом видео нахожу что-то новое!
круть
В css на 1:14:01 в селекторе buy-btn два padding одно со значением 0 другое со значением 1. За верстку спасибо!
Меня спросили, верю ли я в бога?
Я ответил - Да
Меня спросили, в какого?
Я ответил - в Вадима Прокопчука
Бог верстки. Я тоже в него верую!
Спасибо Вадим!
прикольный урок )) спасибо
Классно что макет в описании к видео , а не в телеге ))
Спасибо большое!
Лять, зашел на практику по гридам, весь видос по флексам) остался только из-за подачи инфы, заодно повторил флексы. пойду на продолжение, может хоть там гриды найду. Спасибо за инфу)
Спасибо за видео, есть пару недочетов, в хедере элементы должны быть выровнены по центру и что то не представляю как это сделать и на кнопки не применяется данный шрифт.
Хочется увидеть как делать многостаночник, с подключенными одинаковыми блоками.
Большое спасибо!
Вадим, большое спасибо за ваш труд! видео огонь! дизайн топ! также спасибо и вашей супруге за ее роботу!
жду многостраничник)))
круть, спасибо
очень вовремя) биг лойс
Вадим, спасибо за видео!
Думаю, что для задания градиента для border'а можно использовать CSS-свойство "border-image".
Например, для нашего "buy-btn__price" можно было бы применить
border-image: linear-gradient(180deg, #BC10D8 0%, rgba(80, 0, 250, 0.93) 100%);
Возможно, это более универсальный способ, хотя бы на тот случай, если наша фоновая картинка не позволяла бы использовать для фона кнопки сплошной цвет. А то вдруг при отзывчивой верстке какая-нибудь лампа наедет на нашу кнопку... :D
вполне возможно, нужно тестить
я как раз с помощью него и сделал)) CSS написал под видео в комменте
Привет, рад тебя снова видеть на ютубе, здоровья тебе и твоим близким!
благодарю
45:55 проорал с кнопки xD годно
Спасибо Вам
Хочу многостраничник!!! Как всегда ЖИРНЫЙ лайк! Спасибо Вадос за топ контент!
спасибо
Спасибо за труд 🙏🙏
Многостраничный сайт, плагины 🔥
топ топ топ
Спасибо за урок, желаю сверстаный многостраничник
отлично
Вадим, пожалуйста, сними видео про новую Gulp сборку. Очень благодарна за твой труд и прекрасную подачу материала, благодаря тебе я начала шарить в вёрстке))
нужно снять
@@vadymprokopchuk jdem)
Вадим видео отличное и за это конечно ЛАЙК
с многостраничнком идея шикарная !!!
И было бы супер если б этот марафон с многостраничником был со всеми плюшками (JS,WEBPACK и тому прочее)готов за такое задонатить(кто поддерживает ставим лайк этому коменту)и в итоге думаю получилась бы супер мегавселенская вечеринка.
Спасибо, очень круто объясняешь, странно что так мало подписчиков.
Ребят, подскажите как настроить Emmet, чтоб class всегда в начале был, до остальных аттрибутов?
Спасибо! Ждем многостраничник
респект, вадосик, давай курс по базе JS!!!)
согласен, давай js базу, это прям пушка!!)
Комментарий в поддержку канала
огонь!
Спасибо вам, урок очень интересный, ждем видос про плагины для фигмы
спасибо
Вадос, как центрировать лого? ибо сейчас оно сдвинуто вправо - так как justify-content: space-between -> делает одиноковое растояние между лого и нав \ лого и корзиной
оу, оу, оу, потрясающая вечериночка подъехала )))
врываемся )
спасибо!
ОПА, лайк не глядя
Многостраницный сайт уже давно пора было делать, ато в ютубе очень мало таких видосов оооооочень мало
Спасибо за твой труд! Многостраничник было бы круто!!
супер
Завидую (в хорошем смысле) тем ребятам которые пройдут курс Вадима Прокопчука по вёрстке.
Потому что такого подхода к подаче материала есть только у единиц преподавателей.
О чём я? Да вы наверное и сами заметили что Вадим подходит к подаче к материала с позитивом - что вас и ждёт на протяжении всего курса. Поверьте, многие ведут курсы как лекции и интерес к изучению угасает.
P.S. Это не реклама - а крик души) Вы не пожалеете!
привет, Вадим. спасибо за годную вечеринку. подскажи, пожалуйста, стоит ли указывать max-width для title subtitle и text? контент ведь может поменяться
Если может поменяться , то лучше min-width, чтоб был запас по ширине
можно указать но с хорошим запасом
Лучший
Пушка
сижу в ожидании верстки многостраничного сайта)
Вадим, дякую тобі за твої кайфові відео. Дуже приємно та корисно проводити час на твоїх марафонах. Буду дуже радий, якщо в тебе буде можливість зверстати багатосторінковий сайт, так як це повинно бути в сьогоднішніх реаліях. Дякую :)
супер, дякую
Я не совсем понял момент, где ты взял line-height 22.08px. Можешь объяснить пожалуйста ?
Спасибо за практику! Улетный урок, жду продолжения) и многостраничник конечно было бы супер!
Ребят, попробовал сверстать прозрачный фон для правой кнопки и чтоб градиент тоже работал, зацените:
.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;
}
скоро продолжим, красава за практику
ОЧень крутое решение правдо только не совсем понятно как работает border-image-slice: 1;
Насчёт корзины и меняющихся цифр, норм ли практика использовать дата атрибут и застилить через псевдоелемент?
Шикарное видео. Ждём продолжения. Но в макете справа на кнопке фон вроде прозрачный, а не белый. А можно как-то сверстать его прозрачным, или надо просто сделать цвет фона серым как сама картинка?
можно попробовать и насхематозить с прозрачностью, но там реализация уже другая будет
у меня вроде получилось так сверстать, CSS написал под видео в комменте
Дякую, за класні та веселі уроки, Вадим, було б круто зверстати багатосторінковий сайт)
супер, зафіксував, дякую
я бы сказал: не провод важная часть нашей жизни, а поводок 😆
Желаю многостраничный сайт)
Когда вы добавили классу menu дисплей флекс, логотип уехал вправо и перестал быть по центру как в макете.
Как это правильнее всего поправить?
Upd: Поторопился, во второй части все решается)
Спасибо за ролик, ждем многостраничник
отлично)
Чисто для актива коммент )
чисто красава )
Thanks.
Здравствуйте а будет что нибудь про бутстрап?
Vashshe malades
ребятки, подскажите, почему, когда я пытаюсь из фигмы сохранить бэкграунд в топовой секции, то он сохраняется со всеми надписями, которые на картинке в итд, это кривой макет или я что-то не то делаю?
🔥🔥🔥🔥🔥🔥
Вадос ! шикардос ! правда на лайв не успел (
Подскажите, а почему вариант сделать 2 кнопки и соединить их не подошел? и у второй кнопки сделать background-color: transparent; ? + на макете 2 кнопки) тайминг если, что 1:11:48 )
я б ещё добавил второй кнопке backdrop-filter: blur(10px); например, во избежание)
Привет, подскажи плз, как ты настроил еммет, чтобы у ссылок классы создавались перед атрибутом href, а не после? Не могу никак нагуглить.
Привет. В файле settings.json (в настройках VSCode) вставь вот эту строку: "emmet.preferences": {
"output.reverseAttributes": true
}
@@dmitriyzhuykov4244 балдёж, все работает. Спасибо)
Классно, особенно если смотреть хотя бы на x1.5 и есть вопросик...а гриды здесь только в названии видео-ролика?
Там все будет, гриды нужно использовать в нужных местах, а не лепить просто потому что хочется свойство записать )
@@vadymprokopchukУже посмотрел, спасибо 🙏
В мене є питання якщо я правильно замітив то в тебе браузер відкритий на ширині 67% чи щось тип того.Не булоб логічніше робити на 100% більшість користувачів сидять на бо дефолту такій довжині чи правильно буде сказати маштабу?
Желаем свёрстанный многостраничник)))
Огромное Благодарю за ваши уроки! Друзья, поактивнее пожалуйста. Поддержите идею многостраничника. Накидайте комментов.
вот вот!
желаем сверстаный многостраничник!!))
отлично)
🤗
желаю сверстанный многостранничник!