Верстка сайта - HTML, CSS, JS. Адаптив
Vložit
- čas přidán 8. 11. 2023
- Друзья, привет! Это верстка сайта, даже кое-что получше, это верстка первой страницы интернет магазина. поскольку сам сайт о продаже чая, то на первой странице есть элементы интеренет магазина, вам будет очень полезно попрактиковатся в верстке таких блоков. Ну, а использовать мы будем наших братанов HTML, CSS и JS, конечно же мы обязательно сделаем адаптив.
----------------------------------------
макет - drive.google.com/file/d/1MmhE...
файлы (начальный html и css) - drive.google.com/file/d/15xRF...
----------------------------------------
Сайт курса по верстке - from0to1.com.ua/
----------------------------------------
----------------------------------------
Готовая верстка на patreon - / from0to1
Телеграм канал - t.me/from0to1com
----------------------------------------
----------------------------------------
Доп ссылки:
box-sizing: • box sizing border box ...
ХотКей по VScode: • 10 горячих клавиш в VS...
Видео про БЭМ - • БЭМ методология. Практ...
Видос по svg - • SVG, большой гайд
Большой гайд по гридам - • CSS GRID Большое руков...
Все о флексах - • FLEXBOX начало. Флексб...
Продвинутые флексы - • flex-basis, flex-grow,...
----------------------------------------
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
![[2024] Подключение шрифтов. Google Fonts. CSS font-face. Как подключить шрифты. УчимВместе](/img/n.gif)
макет - drive.google.com/file/d/1MmhE-n05AVMBFBTX9xCi4WAykIBZFVN-/view?usp=sharing
файлы (начальный html и css) - drive.google.com/file/d/15xRFhbsCaLgI4nEkmklbbthm5t6D4jPF/view?usp=sharing
----------------------------------------
Сайт курса по верстке - from0to1.com.ua/
----------------------------------------
Отличный урок. Хотелось бы понимание как верстается в бо°льшую сторону под 1440 и выше
Як ти на 1:37:12 зробив так щоб span розкрився в колонку а не вряд?
@@deviant6646 це робиться в налаштуваннях vs code, можеш зайти на мій український канал, там є відео про вс код, там я все показую по цій штуці
Підкажіть буд ласка яка різниця між ви робите сайт visual studio code і робити сайт в visual studio по технології Razor або MVS.
@@vadymprokopchuk Добрий вечір! Скиньте будь ласка посилання на Україномовний канал. Бо від 2014р. московицька страшно ріже вуха:)) Ви дуже файно подаєте інформацію. Зрозуміло і доступно. Дякую.
Просто напишу ,Вадим спасибо что ты есть ,спасибо за те вечеринки которые ты нам устраиваешь ...
благодарю, я рад, что помогаю развиваться
Полностью согласен с тобой. Вадим, реально, огромное тебе спасибо за все что ты делаешь, это огромный труд, который заслуживает уважения, лайка и подписки. Продолжай в том же духе, радовать нас своим контентом! ❤
ты делаешь классный контент, по твоим видосам научился верстать и уже как полтора года работаю фронтом. спасибо тебе за твои труды
это потрясающее, молодцом! рад, что помог
что по зарплате ? в первое время
Такое теплое чувство остается после твоих стримов! огромное спасибо, всегда с радостью и продуктивно учусь на твоих верстках
Круто, благодарю
Вадим, огромное спасибо! Отлично объясняете каждое действие, разжевываете и заправляете это все шутками)) 3 часа прям пролетели! Было очень приятно посмотреть и сверстать, вы - отличный человек)
Вадим все просто великолепно) блин как же кайфово верстать вместе с тобой под твои комментарии. Лучший в своем деле!!!
Спасибо, я очень рад
Спасибо тебе Вадим за твой контент, ты большое дело делаешь!!!
спасибо
Большое спасибо, Вадим! С вами все так легко и весело
круто)
Вышло видео, лайк не глядя ! )
Спасибо что ты есть )
Спасибо!
Спасибо за полезный контент, присоединился к вечеринке, это было амайзинг! жду следующий видос, чтобы закончить начатое
Осенние дождливые деньки идеальное время для верстки
я знад) наслаждаемся)
100%
Спасибо за очередную порцию качественной вечеринки)
Спасибо
Спасибо огромное!!!! Смотрела, смотрю и буду смотреть! Лайк лайк лайк❤❤❤
Благодарю, круто
Вадим, очень приятно смотреть тебя, плзновательно и весело. Были бы деньги, то купил бы твой курс 😂 но денег нет, поэтому сижу и каждый день смотрю твои видео на канале. Спасибо тебе.
спасибо
Единственный канал на который с радостью прихожу на вечеринку
спасибо
Для себя решил по понедельникам практиковать по одному видосу с вёрсткой, дабы подтянуть вёрстку. Ну очень приятная и интересная подача материала у Вас, дякую.
Дякую, отличный план
Ураааа, у нас снова вечеринка! Дякую, Вадос, ты кросавчег! Снова радуешь подарками, а ведь ещё не Рождество! 🤩😍
Супер, дякую )
Хочу оставить комент огромной благодарности, потому что то, что ты делаешь, по уровню преподнесения материала порой на порядок выше супер-раскрученных украинских курсов. Сейчас заканчиваю как раз 10тимесячное обучение и понимаю, что можно было просто работать по твоим видео, по которым, в отличие от курса, получается верстать быстрее, лучше и запоминается 90%. Самый полезный канал, помог заново поверить в свои силы! Скажи пожалуйста, не планируешь ли ты запускать отдельный курс/марафон/цикл видео по JS, React, Angular, Vue.js и подобным штукам? Мне кажется, это был бы 🔥 в любом случае, ещё раз большое спасибо за полезнейший контент 😊
Спасибо, мне очень приятно, я рад что помогаю. Пока нет в ближайших планах, но может в следующем году
Вижу видео Вадима, не глядя ставлю лайк!
Спасибо
Просто наслаждаюсь версткой, да ещё и угораю с твоих мини прикольчиков ахахах, короче кайфую
спасибо)
Как всегда кайфовая верстка! Спасибо, Бро!
спасибо
Спасибо тебе, добрый человечище! =)
Спасибо за коммент
Как всегда , круто! Красавчик!!!👍
благодарю)
Вадим, спасибо огромное за уроки, лучший!
подскажите, пожалуйста, не будет ли это считаться ошибкой, что мы указываем высоту?
везде разная информация и чаще всего я видела, что склоняются к тому, что height задавать неправильно, что лучше сделать паддингами
меня этот вопрос мучает, спать не могу(
или все же можно задавать, но только для каких-то определенных элементов, например хедера?
Вадим сейчас можно использовать jquery на фрилансе или лучше JS? В компаниях понятно от нее отказываются а на фрилансе?
Большое тебе спасибо, мил человек!
В каждом твоем ролике, Вадим, происходит настоящее событие в мире frontenda и стрендапа. Это не просто видео, это мировое событие. Время мчится незаметно: начинается ролик, моргнул - и он уже закончился. Но в этом коротком времени ты превращаешь меня в гуру фронтенда, способного верстать сайты - и это не преувеличение.
Каждая твоя вечеринка становится ярким воспоминанием. Ты, как профессиональный режиссер и конспиролог, умело завершаешь ролик на самом захватывающем моменте, разжигая дикое желание ждать следующей встречи. Итак, когда можно ожидать продолжение этого нового шедевра?
Спасибо большое, Вадим 😊.
Вадим, полезное и интересное видео, лайк однозначно!
Что за тему используете в vs code?
Ваш видос послушал как будто Фильм Однажды в Одессе снова посмотрел!
Спасибо за видео! Всё супер доходчиво!
спасибо за контент, жду когда будет верстка с препроцессорами !
супер!
Спасибо за качественную верстку!
Спасибо
Единственная вечеринка на которую я люблю ходить
Врубаем музон )
Сансэй Вадим👍💪
position: relative просто прописал в html🤷 в инспекторе кода эти отступы (с низу так же) были именно для html😁
Чем ценин тариф "бомж",тем,что надо думать самому и находить выход с ситуации самому.... Вадим красава с ведром чая 💪👍
Продолжаем вечеринку😁
Бомба!!!!!!!!!! Спасибо уважаемый!
Богдан, уважаю тебя, сам понял за что.
Да, Богдану вообще респект
Дякую, цікаво, просто і зрозуміло! Ти класний! )
Дякую
thank u for ur lesson and work for us. Also for a good vibe since we are learning this :)
Однозначно лайк земеля,привет из Салтовки✌ как всегда годный контент,один вопрос почему не mobile first?
Человечище!!! Сразу лайкос👍👍👍👍. Спс.
Спасибо, супер
Классный видос ,скоро начну верстать , харизма автора просто что-то с чем-то, хотелось бы видео о монетизации всей это вечеринки с вёрсткой ,или хотя бы источников инфы
Благодарю
Спасибо за видео ! Братик скажи это видео подойдет для начинающих?
Готово, красота. Жду продолжения этой великой верстки.
уже скоро)
YOU ARE AMAZING, брат!
Мне так нравится как он каждый раз на пиксель перфект забивает)
Спасибо за видео, а можно спросить, какой шрифт Вы используете? Очень понравился
В вс коде у меня comic shanns
Не подскажете почему тег может зачёркиваться?
Почему, когда я скачиваю ваш файл fig с Гугл Диска, то там пусто? Вы их удаляете, или это проблема у меня?
Большое спасибо!
Вадим, планируешь ли делать контент не только по верстке но и курсы по библиотеке реакт например?)
Очень хотел бы услышать твое объяснение в данной области, ты крутой ментор! (если ты конечно компетентен в данной области)
Честно говоря у меня достаточно загружены график, и пока не успеваю, что либо новое создавать, но в будущем как карта ляжет
как всегда топ!
Привет я твой новый подписчик я подписался к тебе когда смотрел видео Когда УМЕРЕТ ВЁРСТА я просто вот вот хотел бросать изучение Фронт энд разработку думал уже эти конструкторы заменяют фронтов но ты меня убедил и очень рад к этому скорее всего я буду смотреть долго твои канал и ты будешь наверное моим любимым блогером про IT
Спасибо) не забрасывай, оно того стоит
Походу только твое объяснение я понимаю !!! Благодарю
Круто, спасибо
Добрый вечер, спасибо за контент ты как всегда на высоте, подскажи не было в планах сделать курс по js ?
привет, может в 2024
Всем привет . Вадим, часто смотрю тебя. Из контента по вёрстке, только за тобой слежу. У меня прям беда... на первой работе разрабатывал 5 мес., затем поменял место работы, щас работаю неделю. Всегда не покидает ощущение, что меня вот вот выпрут за скорость вёрстки. Всегда неудобно спрашивать о таких моментах у коллег, так как это наведёт их на мысль , что я вообще не секу. Делаю +/- 2 пикселя пиксель перфект(текста и тд), остальное 100%. Но скорость вёрстки капец медленная. Либо мне кажется что медленная. Щас вообще пишу фронтенд на новом для меня стеке Nextjs Typescript+Shadcn+tailwind. Мы можем как то связаться, чтобы я показал тебе просто то, над чем я пахал три рабочих дня, а ты бы оценил вообще это нормально или нет ? Пожалуйста
Напиши мне в телеграмм, и пришли все, скажи что тут писал
Скажи пожалуйста какой шрифт используется с VSCode?
Залетел, заверстал mobile-first подходом на галп сборке. Спасибо за чай 😊
Крутяк
Очень круто, спасибо большое. Благодаря тебе мои знания увеличиваются. Если не трудно можешь, пожалуйста, сделать верстку с SASS, GUIP.
Здравствуйте! Спасибо.
Добрый день,
спасибо большое за контент,
лайк занес,
скажите, а когда будут проекты с применением GULP?
спасибо, та вот надо сделать, я надеюсь, что вскоре запишу, нужно время
@@vadymprokopchuk , спасибо большое за ответ, думаю. что этого жду не я один
Не верстал с вами со времен лэнда про сёрфы) Вадим, а почему не делаешь видосы сайтов с заливкой на сервер сразу же?
Вадим, было бы круто если бы ты показал вёрстку какого-нибудь сайта с параллакс эффектом, что-то более необычное, не хочу показаться зажравшимся, но просто интересно глянуть было бы от тебя какие-то такие креативы.
Добрый вечер.Подскажите, из за чего может не открываться макет? Скачиваеться,но не открываеться.
top сделал,а вот еще вопрос в мой тариф, если в body пишу position: relative -отступ еще и с верху вылазит в menu--open😵💫
спасибо дружище ты сделал дизайн сайта живым, не хочешь продолжить этот сайт? сделать следующие страницы ?
Вадим давно за тобой наблюдаю ))). Как всегда спасибо за контент. Но хочу немного бросить в вашу песочницу ))). display не является анимируемым свойством, поэтому в конце ролика 2:58:15 где ты вешаешь transition: background-color 0.3s ease. На класс .menu--close - transition работать не будет
да, ты прав, он не анимируется
Завтра начну верстать эту вечеринку )
Топ
Коммент в поддержку🎉
Чувак, лайк тебе! Ты крут!
Спасибо )
Привет! Спасибо за уроки! Подскажи пожалуйста, как у тебя раскрываются каждый тег с классом на новой строчке когда ты например записываешь li*5 да и вообще в целом раскрытие тегов у тебя происходит не линейно как например у меня.Это не то чтобы alt z,а какая то другая настройка
Попробуй расширение prettier для vs code
Спасибо! То что нужно @@flowcsgo804
Очень люблю пить чай с вами
Вадос!!! Красава!
Вадос. Как ти размножаешь* курсоры вверх или в низ ?) Ибо например у меня только с зажатым альтом и мышкой нужно их ставить.. а ты как-то раз раз раз и в продакшн
ctrl+alt и стрелочка вниз или вверх, но у меня стоит плагин который копирует комбинации кнопок из старого саблайм, в вс коде без этого плагина скорее всего комбинация другая, в настройки, там есть инфа
@@vadymprokopchuk Благодарствую )
Здравствуйте! А у вас на курсе проходят gulp-сборку, scss и создание слайдера?
Привет, конечно
профессионально подвинуть на глаз, чет орнул)))))))))))))))))))
так и есть )
Только сегодня js часть последнего сайта закончил делать и подумал, давненько видео не было)
Хух) я успел )
Слова Супер придумали только ради тебя 😊😊
))))
Новая вечеринка!! Супер
Огонь )
а transition не работает с display:none, нам тогда эту тень лучше через какойнибудь min-height лучше записать чтоб была плавность или в принципе без плавности тогда?
та по тени там особо плавность и не нужна, но все верно если нужно, то нужно дисплей на что-то другое заменить
Качество вебки - вечеринка🎉
Видео - ОГОНЬ!!!!!
спасибо)
Меню в мобильной версии скроллится вместе со страницей, но нет скролла в меню при уменьшении размера окна. Также меню не исчезает при нажатии на раздел меню. Как решить эту проблему?
Мне уже нравится ❤
Спасибо за такие видео, но не могу понять почему я пишу все точь в точь как у вас, но результат получается другой, особенно начиная с адаптива. В чем может быть проблема? Пишу на VSC на маке, браузер хром
значит, что-то не так как у меня, где-то пропущена буква или скобка, или что-то не написано, мб сборка начальная другая
спасибо Вадос. удачи тебе
Спасибо, удачи
Рад видеть!))
Взаимно )
Круто!
Вадим спасибо тебе огромное ты самый лучший потому что объяснишь очень четко все как надо.
Просьба сделай видео как сделать админка сайта объясни пожалуйста конкретно как это делается
❤ за мятную зелёную футболку и фон
Спасибо, это очень ценно) я так старался )
Вадим , я начинающий фронтенд разработчик. Где можно получать заказы начинающим? можно даже бесплатные задания
Лучший на всё, СНГ!!!
спасибо)
нежнейшим образом СПАСИБО
Король Вечеринок 😎
спасибо)
почему , в div.menu--close , удалили класс menu--open ? как тогда будет затемняться задний фон при нажатии на бургер-меню ( если класс нигде не прописан в html )? я не знаю , почему работает на видео , но после удаления div class="menu--open" , у меня полностью пропала затемнение , даже при нажатии на меню
Все верно, мы добавляем этот класс в нужный момент времени, за это отвечает js
За сколько времени фул сайт такой джун должен верстать? И сколько в среднем стоит похожая верстка на FL?
Вадиму гигантское спасибо, уже не одну вечеринку за чашечкой зеленого нефильтрованного провожу в твоей компании!
Лайк не за Вашу экспертность Маэстро, а только за мятую зеленую футболку и фон :3:3:3
Вот, я знал что это сработает ))
Маэстро вадим только благодаря вам я делаю курсовую
на Яве у меня все сломалось.. кнопка почему-то не зажималась... 😭
Спасибо)