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