Верстка сайта - HTML, CSS, JS. Адаптив

Рет қаралды 65,595

6 ай бұрын

Друзья, привет! Это верстка сайта, даже кое-что получше, это верстка первой страницы интернет магазина. поскольку сам сайт о продаже чая, то на первой странице есть элементы интеренет магазина, вам будет очень полезно попрактиковатся в верстке таких блоков. Ну, а использовать мы будем наших братанов 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

Пікірлер: 242

@vadymprokopchuk 6 ай бұрын

макет - drive.google.com/file/d/1MmhE-n05AVMBFBTX9xCi4WAykIBZFVN-/view?usp=sharing файлы (начальный html и css) - drive.google.com/file/d/15xRFhbsCaLgI4nEkmklbbthm5t6D4jPF/view?usp=sharing ---------------------------------------- Сайт курса по верстке - from0to1.com.ua/ ----------------------------------------

@alexander_stark 6 ай бұрын

Отличный урок. Хотелось бы понимание как верстается в бо°льшую сторону под 1440 и выше

@deviant6646 6 ай бұрын

Як ти на 1:37:12 зробив так щоб span розкрився в колонку а не вряд?

@vadymprokopchuk 6 ай бұрын

@@deviant6646 це робиться в налаштуваннях vs code, можеш зайти на мій український канал, там є відео про вс код, там я все показую по цій штуці

@user-rh7ww9wd9b 5 ай бұрын

Підкажіть буд ласка яка різниця між ви робите сайт visual studio code і робити сайт в visual studio по технології Razor або MVS.

@tarasluchak4699 2 ай бұрын

@@vadymprokopchuk Добрий вечір! Скиньте будь ласка посилання на Україномовний канал. Бо від 2014р. московицька страшно ріже вуха:)) Ви дуже файно подаєте інформацію. Зрозуміло і доступно. Дякую.

@user-xe4be7iq1q 6 ай бұрын

Просто напишу ,Вадим спасибо что ты есть ,спасибо за те вечеринки которые ты нам устраиваешь ...

@vadymprokopchuk 6 ай бұрын

благодарю, я рад, что помогаю развиваться

@dedsec5726 6 ай бұрын

Полностью согласен с тобой. Вадим, реально, огромное тебе спасибо за все что ты делаешь, это огромный труд, который заслуживает уважения, лайка и подписки. Продолжай в том же духе, радовать нас своим контентом! ❤

@airpodsclub6443 6 ай бұрын

ты делаешь классный контент, по твоим видосам научился верстать и уже как полтора года работаю фронтом. спасибо тебе за твои труды

@vadymprokopchuk 6 ай бұрын

это потрясающее, молодцом! рад, что помог

@user-iz1sr6dv8d 2 ай бұрын

что по зарплате ? в первое время

@yuriykolomytsyn2352 6 ай бұрын

Такое теплое чувство остается после твоих стримов! огромное спасибо, всегда с радостью и продуктивно учусь на твоих верстках

@vadymprokopchuk 6 ай бұрын

Круто, благодарю

@Silvestr_Stalonivich 6 ай бұрын

Вадим все просто великолепно) блин как же кайфово верстать вместе с тобой под твои комментарии. Лучший в своем деле!!!

@vadymprokopchuk 6 ай бұрын

Спасибо, я очень рад

@dmitrysazonov8185 6 ай бұрын

Спасибо за полезный контент, присоединился к вечеринке, это было амайзинг! жду следующий видос, чтобы закончить начатое

@user-wd9ty8pq7h 5 ай бұрын

Большое спасибо, Вадим! С вами все так легко и весело

@vadymprokopchuk 5 ай бұрын

круто)

@arthurterner3348 6 ай бұрын

Спасибо тебе Вадим за твой контент, ты большое дело делаешь!!!

@vadymprokopchuk 6 ай бұрын

спасибо

@alexms8508 6 ай бұрын

Вышло видео, лайк не глядя ! ) Спасибо что ты есть )

@vadymprokopchuk 6 ай бұрын

Спасибо!

@MonteCrush. 6 ай бұрын

Осенние дождливые деньки идеальное время для верстки

@vadymprokopchuk 6 ай бұрын

я знад) наслаждаемся)

@romzik1000 6 ай бұрын

100%

@j-lewis 6 ай бұрын

Ураааа, у нас снова вечеринка! Дякую, Вадос, ты кросавчег! Снова радуешь подарками, а ведь ещё не Рождество! 🤩😍

@vadymprokopchuk 6 ай бұрын

Супер, дякую )

@user-zo6rp1xn8i 6 ай бұрын

Спасибо огромное!!!! Смотрела, смотрю и буду смотреть! Лайк лайк лайк❤❤❤

@vadymprokopchuk 6 ай бұрын

Благодарю, круто

@user-co7nl8pf4p 6 ай бұрын

Для себя решил по понедельникам практиковать по одному видосу с вёрсткой, дабы подтянуть вёрстку. Ну очень приятная и интересная подача материала у Вас, дякую.

@vadymprokopchuk 6 ай бұрын

Дякую, отличный план

@88Kristina88 6 ай бұрын

Спасибо большое, Вадим 😊.

@artur_interes 6 ай бұрын

Вадим, очень приятно смотреть тебя, плзновательно и весело. Были бы деньги, то купил бы твой курс 😂 но денег нет, поэтому сижу и каждый день смотрю твои видео на канале. Спасибо тебе.

@vadymprokopchuk 6 ай бұрын

спасибо

@Embrace777 6 ай бұрын

Спасибо за очередную порцию качественной вечеринки)

@vadymprokopchuk 6 ай бұрын

Спасибо

@user-hs5sv3cj6v 5 ай бұрын

Просто наслаждаюсь версткой, да ещё и угораю с твоих мини прикольчиков ахахах, короче кайфую

@vadymprokopchuk 4 ай бұрын

спасибо)

@user-iu4de9lu1s 6 ай бұрын

Единственный канал на который с радостью прихожу на вечеринку

@vadymprokopchuk 6 ай бұрын

спасибо

@mmosow 6 ай бұрын

В каждом твоем ролике, Вадим, происходит настоящее событие в мире frontenda и стрендапа. Это не просто видео, это мировое событие. Время мчится незаметно: начинается ролик, моргнул - и он уже закончился. Но в этом коротком времени ты превращаешь меня в гуру фронтенда, способного верстать сайты - и это не преувеличение. Каждая твоя вечеринка становится ярким воспоминанием. Ты, как профессиональный режиссер и конспиролог, умело завершаешь ролик на самом захватывающем моменте, разжигая дикое желание ждать следующей встречи. Итак, когда можно ожидать продолжение этого нового шедевра?

@focusedzed 2 ай бұрын

Спасибо за видео! Всё супер доходчиво!

@ArteEtHumanitate 6 ай бұрын

Большое тебе спасибо, мил человек!

@tatigerbst4416 6 ай бұрын

Как всегда кайфовая верстка! Спасибо, Бро!

@vadymprokopchuk 6 ай бұрын

спасибо

@evgenykonstantinov8414 6 ай бұрын

Как всегда , круто! Красавчик!!!👍

@vadymprokopchuk 6 ай бұрын

благодарю)

@epicshorsviral 4 ай бұрын

thank u for ur lesson and work for us. Also for a good vibe since we are learning this :)

@1081bad 6 ай бұрын

Вижу видео Вадима, не глядя ставлю лайк!

@vadymprokopchuk 6 ай бұрын

Спасибо

@Jurist96 5 ай бұрын

Ваш видос послушал как будто Фильм Однажды в Одессе снова посмотрел!

@ukraine1514 4 ай бұрын

Сансэй Вадим👍💪 position: relative просто прописал в html🤷 в инспекторе кода эти отступы (с низу так же) были именно для html😁 Чем ценин тариф "бомж",тем,что надо думать самому и находить выход с ситуации самому.... Вадим красава с ведром чая 💪👍 Продолжаем вечеринку😁

@kiralatysheva6794 6 ай бұрын

Спасибо тебе, добрый человечище! =)

@vadymprokopchuk 6 ай бұрын

Спасибо за коммент

@user-wh2gj3bl7d 6 ай бұрын

Дякую, цікаво, просто і зрозуміло! Ти класний! )

@vadymprokopchuk 6 ай бұрын

Дякую

@JustNurlybek 5 ай бұрын

Спасибо за качественную верстку!

@vadymprokopchuk 5 ай бұрын

Спасибо

@thechosen8646 6 ай бұрын

спасибо за контент, жду когда будет верстка с препроцессорами !

@vadymprokopchuk 6 ай бұрын

супер!

@juliasantorskaya3845 6 ай бұрын

Хочу оставить комент огромной благодарности, потому что то, что ты делаешь, по уровню преподнесения материала порой на порядок выше супер-раскрученных украинских курсов. Сейчас заканчиваю как раз 10тимесячное обучение и понимаю, что можно было просто работать по твоим видео, по которым, в отличие от курса, получается верстать быстрее, лучше и запоминается 90%. Самый полезный канал, помог заново поверить в свои силы! Скажи пожалуйста, не планируешь ли ты запускать отдельный курс/марафон/цикл видео по JS, React, Angular, Vue.js и подобным штукам? Мне кажется, это был бы 🔥 в любом случае, ещё раз большое спасибо за полезнейший контент 😊

@vadymprokopchuk 6 ай бұрын

Спасибо, мне очень приятно, я рад что помогаю. Пока нет в ближайших планах, но может в следующем году

@paulbond8244 6 ай бұрын

Бомба!!!!!!!!!! Спасибо уважаемый!

@ringnull 6 ай бұрын

Готово, красота. Жду продолжения этой великой верстки.

@vadymprokopchuk 6 ай бұрын

уже скоро)

@olegs4418 6 ай бұрын

Человечище!!! Сразу лайкос👍👍👍👍. Спс.

@vadymprokopchuk 6 ай бұрын

Спасибо, супер

@user-pz7xb9ch6f 6 ай бұрын

Классный видос ,скоро начну верстать , харизма автора просто что-то с чем-то, хотелось бы видео о монетизации всей это вечеринки с вёрсткой ,или хотя бы источников инфы

@vadymprokopchuk 6 ай бұрын

Благодарю

@maksimmolotov7962 6 ай бұрын

Единственная вечеринка на которую я люблю ходить

@vadymprokopchuk 6 ай бұрын

Врубаем музон )

@sv3404 6 ай бұрын

Большое спасибо!

@domakook753 6 ай бұрын

Здравствуйте! Спасибо.

@Defee36 6 ай бұрын

Походу только твое объяснение я понимаю !!! Благодарю

@vadymprokopchuk 6 ай бұрын

Круто, спасибо

@user-dx9xd4gp6d 6 ай бұрын

Очень круто, спасибо большое. Благодаря тебе мои знания увеличиваются. Если не трудно можешь, пожалуйста, сделать верстку с SASS, GUIP.

@markshaforostov1699 2 ай бұрын

Вадим, полезное и интересное видео, лайк однозначно! Что за тему используете в vs code?

@getFrontend 6 ай бұрын

Залетел, заверстал mobile-first подходом на галп сборке. Спасибо за чай 😊

@vadymprokopchuk 6 ай бұрын

Крутяк

@user-wetal4903 5 ай бұрын

Однозначно лайк земеля,привет из Салтовки✌ как всегда годный контент,один вопрос почему не mobile first?

@ypohut1673 3 ай бұрын

Коммент в поддержку🎉

@Saba-cn8gp 6 ай бұрын

как всегда топ!

@fedordostoevskiy4209 6 ай бұрын

Богдан, уважаю тебя, сам понял за что.

@vadymprokopchuk 6 ай бұрын

Да, Богдану вообще респект

@shnshnd Ай бұрын

Вадим, спасибо огромное за уроки, лучший! подскажите, пожалуйста, не будет ли это считаться ошибкой, что мы указываем высоту? везде разная информация и чаще всего я видела, что склоняются к тому, что height задавать неправильно, что лучше сделать паддингами меня этот вопрос мучает, спать не могу( или все же можно задавать, но только для каких-то определенных элементов, например хедера?

@0neAl0neRPubg 6 ай бұрын

профессионально подвинуть на глаз, чет орнул)))))))))))))))))))

@vadymprokopchuk 6 ай бұрын

так и есть )

@optimist6861 6 ай бұрын

Привет я твой новый подписчик я подписался к тебе когда смотрел видео Когда УМЕРЕТ ВЁРСТА я просто вот вот хотел бросать изучение Фронт энд разработку думал уже эти конструкторы заменяют фронтов но ты меня убедил и очень рад к этому скорее всего я буду смотреть долго твои канал и ты будешь наверное моим любимым блогером про IT

@vadymprokopchuk 6 ай бұрын

Спасибо) не забрасывай, оно того стоит

@Acksakal 6 ай бұрын

YOU ARE AMAZING, брат!

@vorosh1loff 6 ай бұрын

Вадим, было бы круто если бы ты показал вёрстку какого-нибудь сайта с параллакс эффектом, что-то более необычное, не хочу показаться зажравшимся, но просто интересно глянуть было бы от тебя какие-то такие креативы.

@TeomunMete 5 ай бұрын

Слова Супер придумали только ради тебя 😊😊

@vadymprokopchuk 5 ай бұрын

))))

@DinamitNeon 6 ай бұрын

Мне так нравится как он каждый раз на пиксель перфект забивает)

@_pheax 5 ай бұрын

спасибо Вадос. удачи тебе

@vadymprokopchuk 5 ай бұрын

Спасибо, удачи

@luckytima2315 3 ай бұрын

Спасибо за видео ! Братик скажи это видео подойдет для начинающих?

@placid3495 4 ай бұрын

Чувак, лайк тебе! Ты крут!

@vadymprokopchuk 4 ай бұрын

Спасибо )

@georgg8957 5 ай бұрын

Вадим давно за тобой наблюдаю ))). Как всегда спасибо за контент. Но хочу немного бросить в вашу песочницу ))). display не является анимируемым свойством, поэтому в конце ролика 2:58:15 где ты вешаешь transition: background-color 0.3s ease. На класс .menu--close - transition работать не будет

@vadymprokopchuk 4 ай бұрын

да, ты прав, он не анимируется

@ringnull 6 ай бұрын

Завтра начну верстать эту вечеринку )

@vadymprokopchuk 6 ай бұрын

Топ

@marymargaret7708 3 ай бұрын

Спасибо)

@new_nstart 25 күн бұрын

Вадим спасибо тебе огромное ты самый лучший потому что объяснишь очень четко все как надо. Просьба сделай видео как сделать админка сайта объясни пожалуйста конкретно как это делается

@lex08190102 6 ай бұрын

Видео - ОГОНЬ!!!!!

@vadymprokopchuk 6 ай бұрын

спасибо)

@user-te4up6ng2l 4 ай бұрын

Лучший на всё, СНГ!!!

@vadymprokopchuk 4 ай бұрын

спасибо)

@user-sy2cz1yw6u 18 күн бұрын

Очень люблю пить чай с вами

@MG-iq6ri 6 ай бұрын

Только сегодня js часть последнего сайта закончил делать и подумал, давненько видео не было)

@vadymprokopchuk 6 ай бұрын

Хух) я успел )

@Maria-eq7bt 3 ай бұрын

нежнейшим образом СПАСИБО

@prodi7336 6 ай бұрын

Вадим сейчас можно использовать jquery на фрилансе или лучше JS? В компаниях понятно от нее отказываются а на фрилансе?

@vladimirzvyagincev8193 6 ай бұрын

Вадос!!! Красава!

@lova4475 6 ай бұрын

Мне уже нравится ❤

@user-xh2eq6vq8v 6 ай бұрын

Рад видеть!))

@vadymprokopchuk 6 ай бұрын

Взаимно )

@user-vu8tz3lq4k 6 ай бұрын

Новая вечеринка!! Супер

@vadymprokopchuk 6 ай бұрын

Огонь )

@crystalcastle4062 6 ай бұрын

Вадим, планируешь ли делать контент не только по верстке но и курсы по библиотеке реакт например?) Очень хотел бы услышать твое объяснение в данной области, ты крутой ментор! (если ты конечно компетентен в данной области)

@vadymprokopchuk 6 ай бұрын

Честно говоря у меня достаточно загружены график, и пока не успеваю, что либо новое создавать, но в будущем как карта ляжет

@igornewidomsky7240 6 ай бұрын

Круто!

@it_infomer 6 ай бұрын

спасибо дружище ты сделал дизайн сайта живым, не хочешь продолжить этот сайт? сделать следующие страницы ?

@Varanovski 6 ай бұрын

❤ за мятную зелёную футболку и фон

@vadymprokopchuk 6 ай бұрын

Спасибо, это очень ценно) я так старался )

@xyu23 5 ай бұрын

Маэстро вадим только благодаря вам я делаю курсовую

@user-oo6ph3xe5s 6 ай бұрын

Добрый вечер, спасибо за контент ты как всегда на высоте, подскажи не было в планах сделать курс по js ?

@vadymprokopchuk 6 ай бұрын

привет, может в 2024

@user-uv1dt7eo1c 6 ай бұрын

СПАСИБО

@svoy4el 6 ай бұрын

Не верстал с вами со времен лэнда про сёрфы) Вадим, а почему не делаешь видосы сайтов с заливкой на сервер сразу же?

@dm0795 6 ай бұрын

Король Вечеринок 😎

@vadymprokopchuk 6 ай бұрын

спасибо)

@27sosite73 5 ай бұрын

top

@amir4ikx 6 ай бұрын

Качество вебки - вечеринка🎉

@user-sy9gi3vg2e 6 ай бұрын

Добрый день, спасибо большое за контент, лайк занес, скажите, а когда будут проекты с применением GULP?

@vadymprokopchuk 6 ай бұрын

спасибо, та вот надо сделать, я надеюсь, что вскоре запишу, нужно время

@user-sy9gi3vg2e 6 ай бұрын

@@vadymprokopchuk , спасибо большое за ответ, думаю. что этого жду не я один

@ukraine1514 4 ай бұрын

top сделал,а вот еще вопрос в мой тариф, если в body пишу position: relative -отступ еще и с верху вылазит в menu--open😵‍💫

@mishon9739 5 ай бұрын

Лайк не за Вашу экспертность Маэстро, а только за мятую зеленую футболку и фон :3:3:3

@vadymprokopchuk 5 ай бұрын

Вот, я знал что это сработает ))

@Driderq 7 күн бұрын

мужик благодарю ты помог мне байрона на 30 ранг апнуть

@vadymprokopchuk 7 күн бұрын

Бомба, так держать )

@Wolfer_illya 6 ай бұрын

Спасибо за видео, а можно спросить, какой шрифт Вы используете? Очень понравился

@vadymprokopchuk 6 ай бұрын

В вс коде у меня comic shanns

@user-kp7ce3ns1x 3 ай бұрын

Дуже дякую за роботу. З кожним новим "повторенням" за тобою в голові вже щось починає складатися в певну картину. Навіть помітив один момент в адаптиві - можливо я неправий, то виправ, будь ласка: @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; } }

@BezhovHF 4 ай бұрын

Не подскажете почему тег может зачёркиваться?

@KomarSuper 6 күн бұрын

Скажи пожалуйста какой шрифт используется с VSCode?

@vanyaprosyanik4835 5 ай бұрын

мен, ти дуже крутий!! Дякую тобі за твою працю. Давай якось, якщо тобі не дуже буде впадлу) натягнути його на ВП?

@vadymprokopchuk 5 ай бұрын

Та тут тільки 1 сторінка, то немає що натягувати

@BecauseBird 6 ай бұрын

"Белый чай и черный кофе, чтобы не было расизма." Через пару минут: "Черный он и в Африке чёрный"

@nore_mind 5 ай бұрын

Сделай много верстки. Я переобновляю знания по Html Css и твой верстки заходит как масла

@user-ky3jr3qp3c 5 ай бұрын

Привет! Спасибо за уроки! Подскажи пожалуйста, как у тебя раскрываются каждый тег с классом на новой строчке когда ты например записываешь li*5 да и вообще в целом раскрытие тегов у тебя происходит не линейно как например у меня.Это не то чтобы alt z,а какая то другая настройка

@flowcsgo804 5 ай бұрын

Попробуй расширение prettier для vs code

@user-ky3jr3qp3c 5 ай бұрын

Спасибо! То что нужно @@flowcsgo804

@datoshcode 6 ай бұрын

Чай "Оolong" це китайський чай, з листя. Він дуже ароматний та смачний. Має світло-жовтий або червоний колір. Вимовляється як "Улун". Рекомендую!

@vadymprokopchuk 6 ай бұрын

Супер, дякую, тепер точно потрібно спробувати

@ukraine1514 4 ай бұрын

Вадим привет! Плохо,что нет консультации в тарифе " бомж" 😂 Доверстал и перекинул верстку в планшет и.... Получилось,что в теги container есть падинг и топ фото имеет отступ от краев на 20px🙄 Коментирую его и выходит,что top__title и top__text прилепает к краю😱 Выходит,что надо делать отделный контейнер-топ,что б тайтлу и тексту было от чего отталкнуться? Перехожу во вторую часть,может там найду ответ. Если кто подскажет что делать в тарифе "бомж"?😂 Спасибо за такие видосы. Хочется повторять,но выходит так,что не выходит повторить и надо подумать самому🙄💪👍

@vadymprokopchuk 4 ай бұрын

Пиши в чат по таким вопросам, это решается легко, второй контейнер не нужен

@ukraine1514 4 ай бұрын

@@vadymprokopchuk ок👍 легко для меня провести диагностику и ремонт допустим ноута🤫😁 а это второй сайт и еще не все схватил. Спасибо,что ответил👍💪

@IT-therapy 6 ай бұрын

Всем привет . Вадим, часто смотрю тебя. Из контента по вёрстке, только за тобой слежу. У меня прям беда... на первой работе разрабатывал 5 мес., затем поменял место работы, щас работаю неделю. Всегда не покидает ощущение, что меня вот вот выпрут за скорость вёрстки. Всегда неудобно спрашивать о таких моментах у коллег, так как это наведёт их на мысль , что я вообще не секу. Делаю +/- 2 пикселя пиксель перфект(текста и тд), остальное 100%. Но скорость вёрстки капец медленная. Либо мне кажется что медленная. Щас вообще пишу фронтенд на новом для меня стеке Nextjs Typescript+Shadcn+tailwind. Мы можем как то связаться, чтобы я показал тебе просто то, над чем я пахал три рабочих дня, а ты бы оценил вообще это нормально или нет ? Пожалуйста

@vadymprokopchuk 6 ай бұрын

Напиши мне в телеграмм, и пришли все, скажи что тут писал