Верстка сайта - HTML, CSS, JS. Адаптив
Вставка
- Опубліковано 8 лис 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
макет - 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р. московицька страшно ріже вуха:)) Ви дуже файно подаєте інформацію. Зрозуміло і доступно. Дякую.
Просто напишу ,Вадим спасибо что ты есть ,спасибо за те вечеринки которые ты нам устраиваешь ...
благодарю, я рад, что помогаю развиваться
Полностью согласен с тобой. Вадим, реально, огромное тебе спасибо за все что ты делаешь, это огромный труд, который заслуживает уважения, лайка и подписки. Продолжай в том же духе, радовать нас своим контентом! ❤
ты делаешь классный контент, по твоим видосам научился верстать и уже как полтора года работаю фронтом. спасибо тебе за твои труды
это потрясающее, молодцом! рад, что помог
что по зарплате ? в первое время
Такое теплое чувство остается после твоих стримов! огромное спасибо, всегда с радостью и продуктивно учусь на твоих верстках
Круто, благодарю
Вадим все просто великолепно) блин как же кайфово верстать вместе с тобой под твои комментарии. Лучший в своем деле!!!
Спасибо, я очень рад
Спасибо за полезный контент, присоединился к вечеринке, это было амайзинг! жду следующий видос, чтобы закончить начатое
Большое спасибо, Вадим! С вами все так легко и весело
круто)
Спасибо тебе Вадим за твой контент, ты большое дело делаешь!!!
спасибо
Вышло видео, лайк не глядя ! )
Спасибо что ты есть )
Спасибо!
Осенние дождливые деньки идеальное время для верстки
я знад) наслаждаемся)
100%
Ураааа, у нас снова вечеринка! Дякую, Вадос, ты кросавчег! Снова радуешь подарками, а ведь ещё не Рождество! 🤩😍
Супер, дякую )
Спасибо огромное!!!! Смотрела, смотрю и буду смотреть! Лайк лайк лайк❤❤❤
Благодарю, круто
Для себя решил по понедельникам практиковать по одному видосу с вёрсткой, дабы подтянуть вёрстку. Ну очень приятная и интересная подача материала у Вас, дякую.
Дякую, отличный план
Спасибо большое, Вадим 😊.
Вадим, очень приятно смотреть тебя, плзновательно и весело. Были бы деньги, то купил бы твой курс 😂 но денег нет, поэтому сижу и каждый день смотрю твои видео на канале. Спасибо тебе.
спасибо
Спасибо за очередную порцию качественной вечеринки)
Спасибо
Просто наслаждаюсь версткой, да ещё и угораю с твоих мини прикольчиков ахахах, короче кайфую
спасибо)
Единственный канал на который с радостью прихожу на вечеринку
спасибо
В каждом твоем ролике, Вадим, происходит настоящее событие в мире frontenda и стрендапа. Это не просто видео, это мировое событие. Время мчится незаметно: начинается ролик, моргнул - и он уже закончился. Но в этом коротком времени ты превращаешь меня в гуру фронтенда, способного верстать сайты - и это не преувеличение.
Каждая твоя вечеринка становится ярким воспоминанием. Ты, как профессиональный режиссер и конспиролог, умело завершаешь ролик на самом захватывающем моменте, разжигая дикое желание ждать следующей встречи. Итак, когда можно ожидать продолжение этого нового шедевра?
Спасибо за видео! Всё супер доходчиво!
Большое тебе спасибо, мил человек!
Как всегда кайфовая верстка! Спасибо, Бро!
спасибо
Как всегда , круто! Красавчик!!!👍
благодарю)
thank u for ur lesson and work for us. Also for a good vibe since we are learning this :)
Вижу видео Вадима, не глядя ставлю лайк!
Спасибо
Ваш видос послушал как будто Фильм Однажды в Одессе снова посмотрел!
Сансэй Вадим👍💪
position: relative просто прописал в html🤷 в инспекторе кода эти отступы (с низу так же) были именно для html😁
Чем ценин тариф "бомж",тем,что надо думать самому и находить выход с ситуации самому.... Вадим красава с ведром чая 💪👍
Продолжаем вечеринку😁
Спасибо тебе, добрый человечище! =)
Спасибо за коммент
Дякую, цікаво, просто і зрозуміло! Ти класний! )
Дякую
Спасибо за качественную верстку!
Спасибо
спасибо за контент, жду когда будет верстка с препроцессорами !
супер!
Хочу оставить комент огромной благодарности, потому что то, что ты делаешь, по уровню преподнесения материала порой на порядок выше супер-раскрученных украинских курсов. Сейчас заканчиваю как раз 10тимесячное обучение и понимаю, что можно было просто работать по твоим видео, по которым, в отличие от курса, получается верстать быстрее, лучше и запоминается 90%. Самый полезный канал, помог заново поверить в свои силы! Скажи пожалуйста, не планируешь ли ты запускать отдельный курс/марафон/цикл видео по JS, React, Angular, Vue.js и подобным штукам? Мне кажется, это был бы 🔥 в любом случае, ещё раз большое спасибо за полезнейший контент 😊
Спасибо, мне очень приятно, я рад что помогаю. Пока нет в ближайших планах, но может в следующем году
Бомба!!!!!!!!!! Спасибо уважаемый!
Готово, красота. Жду продолжения этой великой верстки.
уже скоро)
Человечище!!! Сразу лайкос👍👍👍👍. Спс.
Спасибо, супер
Классный видос ,скоро начну верстать , харизма автора просто что-то с чем-то, хотелось бы видео о монетизации всей это вечеринки с вёрсткой ,или хотя бы источников инфы
Благодарю
Единственная вечеринка на которую я люблю ходить
Врубаем музон )
Большое спасибо!
Здравствуйте! Спасибо.
Походу только твое объяснение я понимаю !!! Благодарю
Круто, спасибо
Очень круто, спасибо большое. Благодаря тебе мои знания увеличиваются. Если не трудно можешь, пожалуйста, сделать верстку с SASS, GUIP.
Вадим, полезное и интересное видео, лайк однозначно!
Что за тему используете в vs code?
Залетел, заверстал mobile-first подходом на галп сборке. Спасибо за чай 😊
Крутяк
Однозначно лайк земеля,привет из Салтовки✌ как всегда годный контент,один вопрос почему не mobile first?
Коммент в поддержку🎉
как всегда топ!
Богдан, уважаю тебя, сам понял за что.
Да, Богдану вообще респект
Вадим, спасибо огромное за уроки, лучший!
подскажите, пожалуйста, не будет ли это считаться ошибкой, что мы указываем высоту?
везде разная информация и чаще всего я видела, что склоняются к тому, что height задавать неправильно, что лучше сделать паддингами
меня этот вопрос мучает, спать не могу(
или все же можно задавать, но только для каких-то определенных элементов, например хедера?
профессионально подвинуть на глаз, чет орнул)))))))))))))))))))
так и есть )
Привет я твой новый подписчик я подписался к тебе когда смотрел видео Когда УМЕРЕТ ВЁРСТА я просто вот вот хотел бросать изучение Фронт энд разработку думал уже эти конструкторы заменяют фронтов но ты меня убедил и очень рад к этому скорее всего я буду смотреть долго твои канал и ты будешь наверное моим любимым блогером про IT
Спасибо) не забрасывай, оно того стоит
YOU ARE AMAZING, брат!
Вадим, было бы круто если бы ты показал вёрстку какого-нибудь сайта с параллакс эффектом, что-то более необычное, не хочу показаться зажравшимся, но просто интересно глянуть было бы от тебя какие-то такие креативы.
Слова Супер придумали только ради тебя 😊😊
))))
Мне так нравится как он каждый раз на пиксель перфект забивает)
спасибо Вадос. удачи тебе
Спасибо, удачи
Спасибо за видео ! Братик скажи это видео подойдет для начинающих?
Чувак, лайк тебе! Ты крут!
Спасибо )
Вадим давно за тобой наблюдаю ))). Как всегда спасибо за контент. Но хочу немного бросить в вашу песочницу ))). display не является анимируемым свойством, поэтому в конце ролика 2:58:15 где ты вешаешь transition: background-color 0.3s ease. На класс .menu--close - transition работать не будет
да, ты прав, он не анимируется
Завтра начну верстать эту вечеринку )
Топ
Спасибо)
Вадим спасибо тебе огромное ты самый лучший потому что объяснишь очень четко все как надо.
Просьба сделай видео как сделать админка сайта объясни пожалуйста конкретно как это делается
Видео - ОГОНЬ!!!!!
спасибо)
Лучший на всё, СНГ!!!
спасибо)
Очень люблю пить чай с вами
Только сегодня js часть последнего сайта закончил делать и подумал, давненько видео не было)
Хух) я успел )
нежнейшим образом СПАСИБО
Вадим сейчас можно использовать jquery на фрилансе или лучше JS? В компаниях понятно от нее отказываются а на фрилансе?
Вадос!!! Красава!
Мне уже нравится ❤
Рад видеть!))
Взаимно )
Новая вечеринка!! Супер
Огонь )
Вадим, планируешь ли делать контент не только по верстке но и курсы по библиотеке реакт например?)
Очень хотел бы услышать твое объяснение в данной области, ты крутой ментор! (если ты конечно компетентен в данной области)
Честно говоря у меня достаточно загружены график, и пока не успеваю, что либо новое создавать, но в будущем как карта ляжет
Круто!
спасибо дружище ты сделал дизайн сайта живым, не хочешь продолжить этот сайт? сделать следующие страницы ?
❤ за мятную зелёную футболку и фон
Спасибо, это очень ценно) я так старался )
Маэстро вадим только благодаря вам я делаю курсовую
Добрый вечер, спасибо за контент ты как всегда на высоте, подскажи не было в планах сделать курс по js ?
привет, может в 2024
СПАСИБО
Не верстал с вами со времен лэнда про сёрфы) Вадим, а почему не делаешь видосы сайтов с заливкой на сервер сразу же?
Король Вечеринок 😎
спасибо)
top
Качество вебки - вечеринка🎉
Добрый день,
спасибо большое за контент,
лайк занес,
скажите, а когда будут проекты с применением GULP?
спасибо, та вот надо сделать, я надеюсь, что вскоре запишу, нужно время
@@vadymprokopchuk , спасибо большое за ответ, думаю. что этого жду не я один
top сделал,а вот еще вопрос в мой тариф, если в body пишу position: relative -отступ еще и с верху вылазит в menu--open😵💫
Лайк не за Вашу экспертность Маэстро, а только за мятую зеленую футболку и фон :3:3:3
Вот, я знал что это сработает ))
мужик благодарю ты помог мне байрона на 30 ранг апнуть
Бомба, так держать )
Спасибо за видео, а можно спросить, какой шрифт Вы используете? Очень понравился
В вс коде у меня comic shanns
Дуже дякую за роботу. З кожним новим "повторенням" за тобою в голові вже щось починає складатися в певну картину. Навіть помітив один момент в адаптиві - можливо я неправий, то виправ, будь ласка:
@media (max-width: 768px) {
.header__inner{
padding-left: 64px;
padding-right: 64px;
}
}
Ти вказуєш по 64px, як в макеті, проте, якщо подивитися через інспектор, то .container має padding-left та padding-right по 20px. І також ще .user-actions має gap: 20px;
Тобто я зробив ось так, щоб все було рівненько)
@media (max-width: 768px) {
.header__inner{
padding-left: 44px;
padding-right: 24px;
}
}
Не подскажете почему тег может зачёркиваться?
Скажи пожалуйста какой шрифт используется с VSCode?
мен, ти дуже крутий!! Дякую тобі за твою працю. Давай якось, якщо тобі не дуже буде впадлу) натягнути його на ВП?
Та тут тільки 1 сторінка, то немає що натягувати
"Белый чай и черный кофе, чтобы не было расизма."
Через пару минут:
"Черный он и в Африке чёрный"
Сделай много верстки. Я переобновляю знания по Html Css и твой верстки заходит как масла
Привет! Спасибо за уроки! Подскажи пожалуйста, как у тебя раскрываются каждый тег с классом на новой строчке когда ты например записываешь li*5 да и вообще в целом раскрытие тегов у тебя происходит не линейно как например у меня.Это не то чтобы alt z,а какая то другая настройка
Попробуй расширение prettier для vs code
Спасибо! То что нужно @@flowcsgo804
Чай "Оolong" це китайський чай, з листя. Він дуже ароматний та смачний. Має світло-жовтий або червоний колір. Вимовляється як "Улун". Рекомендую!
Супер, дякую, тепер точно потрібно спробувати
Вадим привет!
Плохо,что нет консультации в тарифе " бомж" 😂
Доверстал и перекинул верстку в планшет и.... Получилось,что в теги container есть падинг и топ фото имеет отступ от краев на 20px🙄
Коментирую его и выходит,что top__title и top__text прилепает к краю😱
Выходит,что надо делать отделный контейнер-топ,что б тайтлу и тексту было от чего отталкнуться?
Перехожу во вторую часть,может там найду ответ.
Если кто подскажет что делать в тарифе "бомж"?😂
Спасибо за такие видосы. Хочется повторять,но выходит так,что не выходит повторить и надо подумать самому🙄💪👍
Пиши в чат по таким вопросам, это решается легко, второй контейнер не нужен
@@vadymprokopchuk ок👍 легко для меня провести диагностику и ремонт допустим ноута🤫😁 а это второй сайт и еще не все схватил. Спасибо,что ответил👍💪
Всем привет . Вадим, часто смотрю тебя. Из контента по вёрстке, только за тобой слежу. У меня прям беда... на первой работе разрабатывал 5 мес., затем поменял место работы, щас работаю неделю. Всегда не покидает ощущение, что меня вот вот выпрут за скорость вёрстки. Всегда неудобно спрашивать о таких моментах у коллег, так как это наведёт их на мысль , что я вообще не секу. Делаю +/- 2 пикселя пиксель перфект(текста и тд), остальное 100%. Но скорость вёрстки капец медленная. Либо мне кажется что медленная. Щас вообще пишу фронтенд на новом для меня стеке Nextjs Typescript+Shadcn+tailwind. Мы можем как то связаться, чтобы я показал тебе просто то, над чем я пахал три рабочих дня, а ты бы оценил вообще это нормально или нет ? Пожалуйста
Напиши мне в телеграмм, и пришли все, скажи что тут писал
Почему, когда я скачиваю ваш файл fig с Гугл Диска, то там пусто? Вы их удаляете, или это проблема у меня?
Вадим , я начинающий фронтенд разработчик. Где можно получать заказы начинающим? можно даже бесплатные задания
Добрый вечер.Подскажите, из за чего может не открываться макет? Скачиваеться,но не открываеться.