Верстка сайта с нуля до завершения html/css/js

[@rinatbogdanov305]

был перерыв в верстке, восстановить навыки решил по твоим урокам, они лучшие

[@vadymprokopchuk]

спасибо

[@WaleronFm]

Лайк не глядя. Я ещё не доделал сайт про свечи а уже новый макет сегодня однозначно отличный день! Спасибо вам Вадим за то что даёте возможность обучаться даже таким бомжам как я.)))

[@vadymprokopchuk]

=)) круть)

[@shnshnd]

Объяснения супер, я нигде такого больше не видела, спасибо огромное за такую работу! Решила восстановить все свои знания и наконец перейти во фронтенд, не откладывая в дальний угол, тем более когда такие классные вечеринки! Плюс потрясающий юмор! На 5 февраля 2024 года в Фигме больше нет бесплатного доступа к панели разработчика, можно по другому скопировать стили (через правую кнопку мыши)

[@vadymprokopchuk]

Я видео записал по этому поводу, последне, посмотрите

[@shnshnd]

@@vadymprokopchuk спасибо 🙏

[@teiltor]

ваш юмор это нечто, безумно интересно вас слушать и учиться. Спасибо!

[@ВиталикСтепанов-ц8щ]

Лайк сразу же! Вадим, спасибо за такие душевные и информативные ролики! Лучший🥹

[@mahoragaUI]

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

[@danlug8241]

из-за учебы подзабыл версточку, решил вернутся, возвращение блудного сына, спасибо за видос, ЛУЧШИЙ!!!!

[@arhangel8380]

В багатьох ютуберів в яких я проходив верстку під час відео аж хочеться спати, але ваш підхід до відео особий, ви з вашими жартами заряджаєте позитивом що аж хочеться без перервно проходить вашу верстку🫡 Дякую!!!

[@vadymprokopchuk]

це супер, дякую

[@РустамАетбаев-р4к]

100%

[@ИгорьГлазков-с1б]

Вадим спасибо за Ваш труд. Здоровья Вам и вашей семье, мирного неба.

[@vadymprokopchuk]

благодарю

[@bzz1_2_34]

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

[@vadymprokopchuk]

спасибо

[@maks-rst]

Супер видосы , если честно, когда-то давно мне посоветовали тебя, но руки не доходили посмотреть по видео, сейчас зашел посмотреть верстку и я в восторге, если честно) и с юмором, и много полезной информации, кайф

[@vadymprokopchuk]

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

[@fridaoblomova4939]

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

[@smoger_0]

++++++

[@АлександрСергеевич-м2ь]

Макет хоть и небольшой, но прикольный, красочный. Ждем продолжения верстки. Вадим, большое спасибо за контент, реально очень много практики. Понемного подтягиваю js. Думаю, отличный вариант сделать логику так. Всем кнопкам с наушниками задать data-атрибуты типа data-color. При нажатии брать этот параметр и задавать его всем изображениям в виде setAttribute src. Нужно просто соответственно назвать все картинки. Градиенты можно подвязать к заранее созданным классам, типа идентификаторам. Текущую кнопку прятать путем добавления класса или инлайн-стилей, а все остальные показывать.

[@cryhyble5750]

Ну и харизма! Высший пилотаж!

[@vadymprokopchuk]

@@cryhyble5750 спасибо ))

[@BryanskyM]

Фуру лайков этому великому человеку!

[@vadymprokopchuk]

да да да

[@27sosite73]

@@vadymprokopchuk oru

[@oleksandrzimin2100]

Бро самые топовые уроки практики вёрстки, спасибо тебе.

[@ukraine1514]

нуссс,начнемс тебя верстать! спасибо Вадосу за видосы

[@natalietalas]

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

[@vadymprokopchuk]

100%, скоро

[@DenisAntropov-cg3nd]

Лайк однозначный, но не могу не сказать. Хотелось бы увидеть видео где верстаешь с использованием rem. Будет куда полезнее чем однотипную верстку на пикселях смотреть

[@Станислав-ф8ы]

Король вечеринок здорового человека. Спасибо, дядя!

[@Jane_123]

Спасибо за видео, с удовольствием с вами поверстаю)) Очень нравятся ваши видео!!!!

[@WhitePlombir-y1s]

7 минут видео смотрю,уже три раза смеялся))

[@Stieg_W]

Why this author, until now, has not been awarded an Oscar for the best videos on the illustrative example of website creation!?

[@evgenykonstantinov8414]

Супер. Как всегда лучший😊

[@vadymprokopchuk]

благодарю

[@maxim_necrasov]

Подскажите, а не проще ли было картинке задать position releative, тексту - absolute и просто расставить z-index и top/left/bottom/right?

[@lexpotapenko9412]

Тег это строчный элемент🙂

[@igornewidomsky7240]

Как всегда - супер!👍👍👍

[@Leha_Andr]

Очень классная вечеринка, диджею респект!!!!!!!!

[@yuriykhmelevski]

Ура !!! новая вечеринка . Спасибо

[@vadymprokopchuk]

Ураааа =)

[@iuriimykytiuk8302]

Дякую за Вашу роботу)!!!

[@ХайдаровБобур]

Спасибо огромное за такие годные и крутые советы

[@charnick9702]

Спасибо! Круто, понятно, интересно!

[@vadymprokopchuk]

спасибо)

[@petrpetrovich-sg2jj]

Как всегда -Пишем лайки,ставим комментарии)) Рад новой вечеринке 😂

[@vadymprokopchuk]

спасибо

[@alexkodding9354]

Вадос спасибо за видом😊 ты лучший 💪👍

[@ДмитрийЮщенко-и1е]

Спасибо Вам за урок!

[@kirill_polezhaev]

Спасибо за видео, жду продолжения 🎉

[@dimalukashenko4865]

Очень круто, продолжай!

[@ВадимЦиганок-ъ9д]

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

[@colodatwin3102]

Добавил в смотреть позже , сейчас потому что js учу, потом залечу на вечеринку)

[@ІванЩербаков-д3ф]

Вітаю! Розумію, що треба показати різні варіації того, з чим можна стикнутися на практиці - я маю на увазі те, як запхати текст під зображення і таке інше. За це окреме дякую, так як інфа дійсно дуже корисна! Проте я б мабудь зробив це зображення в PS. І при адаптуванні все це було б простіше.

[@MrDemoTM]

Лайк за Харьков))

[@jedixtv3362]

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

[@notnet_-2982]

Всё хорошо, ешё бы картинки были бы в макете, что бы тренироваться можно было без проблем

[@kansai2770]

Спасибо за информативное видео. Вопрос может показаться глупым, но почему на 1:06:03 для .title--s мы просто не использовали position: relative; top:40px? Или top:40px может как-то повлиять на создание анимации в будущем?

[@leonidmarsh4369]

норм такая вечеринка, спасибо брат✌

[@umidbekruzmetov6824]

super, muper, giper

[@smoger_0]

Привет, смотрю видео и думаю. Очень высокий уровень задержания аудитории у вас на всех таких видео наверное. Очень жалко что от российских просмотров нет монетизации(((. Казахстан, укр, беларусь, все равно мало. Эххх

[@vladislav.c]

Очень круто. Спасибо.

[@ПрограммистсДВ]

41:00 - с каких пор модификаторы стало допустимо использовать в отрыве от модифицируемого блока? Модификатор - это не самостоятельная сущность. Из официальной документации: "С точки зрения БЭМ-методологии модификатор не может использоваться в отрыве от модифицируемого блока или элемента. Модификатор должен изменять вид, поведение или состояние сущности, а не заменять ее."

[@Victor-e8f]

Неперевершено!!!😵‍💫

[@vadymprokopchuk]

дякую

[@milkiway6754]

я который под конец видео кричу "букву М по ниже надо!!" xddd

[@andrey-Dudkin]

Спасибо выпуск пушка

[@flydi9661]

було б дуже круто почути від вас як вивчати js коли ти вивчив вже основи,де брати практику? звідки брати ідеї для проектів? і взагалі як розвиватись в js

[@mrkut360]

Лайк от души!

[@walterwhite4407]

здарова капитан ! 🛳👍

[@sheshko_pavel]

Лайк, коммент. Спасибо

[@vadymprokopchuk]

Благодарю

[@vvks9901]

А можно картинке в хедере задать индекс 10, а буквам которые сверху картинки задавать индекс 11, а тем кто ниже картинки, задавать индекс 9? Тогда фон будет на своём самом нижнем уровне, картинка выше него, а буквы могут быть выше или ниже картинки.

[@sadamhylio691]

Познавательное видео! Подскажи, как сделать такую же тему и стиль, как у тебя

[@ussu_01]

лучший

[@hasiev]

Вадим, у меня возникла проблема. Повторил все шаги, как в видео, но в моем проекте расстояние между буквами в title выглядит значительно меньше, чем у тебя. Проверил все настройки, использовал Google Fonts, но даже там у букв (например, 'AX') расстояние меньше, и текст выглядит слитным. В чем может быть причина такой разницы в межбуквенном интервале?

[@hasiev]

Нашел причину, оказывается надо было отключить на сайте google fonts Optical Size

[@0ldbh]

@@hasiev Спасибо

[@grigoriykyrylyuk1509]

крутяк , чотко ! дякую!

[@vadymprokopchuk]

дякую

[@hjetwd]

50:33 .title { isolation: isolate } .title--pod { z-index: -1 }

[@ИгорьХудолеев]

не работает.

[@ИгорьХудолеев]

isolation: isolate нужно не title , а блоку с фоном. Тогда работает.

[@PacoOfficial]

41:10 модификатор в бэм можно использовать только вместе с элементом или блоком, сам по себе он не может использоваться конкретно тут логичнее было бы использовать элементы title__***

[@АлексейЩербаков-ц1з]

На tailwind быстрее верстать. И есть еще вопрос: А на сколько актуально заниматься ручной версткой и натяжка на WordPress и прочие CMS? Не лучше ли учить React или Svelte и становиться фронтендером, используя готовые UI киты?

[@NIReeMK]

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

[@АлексейЩербаков-ц1з]

@@NIReeMK Ясно, что придется что-то кастомизировать. Но все же без фреймворков и хоть каких-то готовых компоненов очень долго писать код. А время - деньги

[@АлексейЩербаков-ц1з]

И еще: не обязательно использовать весь UI kit. Можно импортировать лишь те, компоненты, которые тебе понадобятся и которые ненужно сильно кастомизировать. Плюс есть еще headless библиотеки, в которых отсутствуют css стили, что позволяет полностью кастомизировать с нуля компонент

[@_dimart_ua_]

А где вы пишите код для сайта? Просто впервые хочу попробовать, а никто не пишет где это все дело происходит

[@vadymprokopchuk]

Я так потримаю ты из Украины? У меня есть Украинский канал, Там как раз вышло видео про эту программу VS Code налаштування для ефективної роботи, топові плагіни для верстки сайтів kzbin.info/www/bejne/g5O0gZmFf6ahoq8

[@lopwan5974]

Как открыть гугл документ, у меня не открывается через какое приложение?

[@drawusoon]

вот что я люблю)

[@МаксимСинягин-я1ъ]

прописываю все так же , ну почему то когда нажимаешь ентер у по другому строки идут

[@vadymprokopchuk]

но содержимое то такое?

[@МаксимСинягин-я1ъ]

@@vadymprokopchuk да , на время оставил , верстаю страницу с iPhone , там все идёт хорошо ,спасибо

[@vadymprokopchuk]

@@МаксимСинягин-я1ъ супер

[@Alles_Travels]

Что-то макет немного не соответствует тому, что на видосе 🤔 Дизайнер внёс правки?

[@vadymprokopchuk]

перекачай, не тот изначально залил

[@Сергей-и9х6ж]

Вадим, а какая цветовая тема у тебя в VS Code?

[@vadymprokopchuk]

material

[@fookernya]

Привет, что за шрифт в vs у тебя?

[@ХайдаровБобур]

У меня почему то макет не открывается, можно ссылку на саму фигму

[@Jurist96]

Вадим. ты таки с Одессы?

[@vadymprokopchuk]

нет, из Харькова

[@Jurist96]

Ну добре тримайтеся там. бажаю вам якнайшвидшої перемоги. Слава Україні. ви з вашими жартами заряджаєте позитивом Дякую @@vadymprokopchuk​

[@denys5570]

С нятягой вывез 11-и часовой видос,но после вёрстки я понял ,что без сада-маза не стать роботом-ТЕРМИНАТОРОМ,поэтому продолжим вечеринку и начнём верстать новый.Как мы поняли МАСТЕР ЗНАЕТ СВОЁ ДЕЛО, доверимся ему и да пребудет с нами мудрость правильного распределения временных потоков дабы не поймать про*сти господи*крастинацию.

[@СергейБойко-м1ъ]

А че header__content, а не секция hero? На твоем же курсе так учили (SimpleFood)

[@ИгорьХудолеев]

На курсе и будут так учить... Это не курс, тут можно с костылями, чтоб посложнее.

[@oddydaddy]

У меня фигма пишет совершенно другие размеры, при нажатии на кнопку в фигме она показывает падинги: 16px 112px... - в чем прикол?

[@vadymprokopchuk]

изначально я старый макет залил, перекачай, может в этом дело

[@nbjk9328]

вы забыли там еще бэграунд где буква М и там под наушником

[@25ый-т5л]

Здравствуйте,а что такое reset.css и откуда его взять?

[@vadymprokopchuk]

скачали с инета, обнуляет стандартные стили от браузеров

[@vladislavche7603]

Было бы интересно посмотреть как сделать адаптив хедера

[@vadymprokopchuk]

будет в 3 видосе

[@_morfix_]

Почему не используйте live server?

[@vadymprokopchuk]

использую, просто не на видео, а в своей работе

[@nor7ex]

Ну если это не божество, то что это? Вот кого кого, а его GPT не заменит)

[@vadymprokopchuk]

=))) спасибо )

[@prepper__]

Что за программа в начале видео

[@vadymprokopchuk]

figma

[@prepper__]

@@vadymprokopchuk спасибо

[@user-zm2bl8nv5duser-zm2bl8nvd]

вечеринка!

[@vadymprokopchuk]

она самая

[@Сергей-и9х6ж]

Да это КРУЧЕЕЕЕЕ, чем у андриканича!!!!!

[@gerasymenko1]

Аминь!

[@МаксимШапранов-м3е]

Уже даже это версткой назвать сложно) , я понимаю что это для начинающих, но все же. Можно же не городить гору стилей, в каждом селекторе, а написать пару простых миксинов, сделать стили реюзбельными, подключить авто префксер и резет цсс. Или такое уже не потянут начинающие?) Лучше же им показать что css файлы на 1000 строк это круто.

[@alexander_stark]

Я примерно понимаю о чем ты написал. В фигме переменные работают по похожим принципам. Но, я уверен, что человек открывший впервые фигму для верстки и решивший начать верстать , все что ты написал: Ты че материшься?

[@Creative_duck]

Приветик !

[@kirakel9637]

с помощью чего нужно открывать макет

[@MelkoR4111]

figma

[@xdayx53]

а что если изменять масштаб и эти буквы прыгают?)

[@vadymprokopchuk]

зачем менять масштаб ?)

[@xdayx53]

@@vadymprokopchuk мне незачем, а если на масштабе, например, 80 смотрится ужасно,в целом, Вадос, надо с этим заморачиваться или пусть человек сделает масштаб меньше?

[@vadymprokopchuk]

@@xdayx53 та масштабирование вообще оч редко используется и точно не на этом сайте, тут точно не стоит заморачиваться

[@Алексей-ш9ю3к]

ребят я уже устал так учиться, верстаю в точности как у автора, но у меня паддинги и марджины образуются, а у него нет, код один в один но у меня все равно дичь.... тот же хром использую, пишу в брекетс, menu__list просто стоит у левого края под яблоком , ни на что не реагирует кроме float: right; хотя автор не прибегал к таким методам

[@daniel_ac420]

Скорее всего надо обнулить стили браузеров с помощью reset.css или normalize.css, подключить один из их в первую очередь, а ниже подключать все прочие кастомные стили

[@danabekshadybekov6509]

макет не могу открыть ?

[@vadymprokopchuk]

попробуй онлайн версию фигма

[@arhangel8380]

Відразу зрозумів що ти з Харкова 😅

[@smoger_0]

39:30 - Пхппхпхпхпхпхпх

[@AU_IAN]

Заметка для меня 40:26

[@progover24]

ура

[@flickashot275]

ребят была у кого-нибудь проблема с пространством между спанами в хедере? я себе щас голову сломаю

[@lanele6599]

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

[@elkazmakaz5870]

збс

[@Інал-ІпаВлад]

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

[@vadymprokopchuk]

значит, что-то не так, может ошибка орфографическая

[@Інал-ІпаВлад]

@@vadymprokopchuk Короче я немного подкрутил по своему left, right, translate(), и вроде всё получилось. Не знаю почему не вышло изначально, но проверял всё, я повторял точ в точ, и такое бывает. Я начинающий Фронтендер, учусь вот, хожу на курсы у себя в городе. У меня во вторник будет испит, нужно будет презентовать свой сайт. Там можно любо какой, по бесплатным макетам я бы не успел сделать, а вот когда есть всё изложенно в видео, то может и успею. Иногда просто прихожу в тупик в процессе вёрстки и всё не можу ничего с этим сделать, может через день прийдёт решение в голову а может и нет.

[@svoy4el]

Аххха я орнул ах харьков😂😂 ар запорожье аа киев😂

[@minesai_tgbot]

Конда продолжение?

[@vadymprokopchuk]

сегодня