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

Рет қаралды 44,421

9 ай бұрын

Друзья, обалденный макет - обалденная верстка. Это верстка сайта, с самого нуля, с адаптивом, используем html и css, в конце это все полернем js, чтобы было интереснее и более практически. Запрыгивайте на борт!
----------------------------------------
макет - drive.google.com/file/d/1JGrY...
файлы (начальный html и css) - drive.google.com/file/d/14_Oa...
----------------------------------------
Сайт курса по верстке - 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

Пікірлер: 166

@user-ig2sj1ix5d 9 ай бұрын

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

@teiltor 7 ай бұрын

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

@rinatbogdanov305 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

спасибо

@user-mj5ky7us9s 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

=)) круть)

@oleksandrzimin2100 9 ай бұрын

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

@user-ve7tx3ud6n 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

благодарю

@mahoragaUI 8 ай бұрын

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

@fridaoblomova4939 9 ай бұрын

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

@smojer_0 6 ай бұрын

++++++

@user-vn1so5vu6z 9 ай бұрын

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

@maks-rst 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

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

@bzz1_2_34 7 ай бұрын

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

@vadymprokopchuk 7 ай бұрын

спасибо

@danlug8241 8 ай бұрын

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

@Jane_123 9 ай бұрын

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

@igornewidomsky7240 9 ай бұрын

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

@BryanskyM 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

да да да

@27sosite73 6 ай бұрын

@@vadymprokopchuk oru

@maxim_necrasov 9 ай бұрын

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

@user-ms3mz9vg8b 8 ай бұрын

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

@kirill_polezhaev 9 ай бұрын

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

@alexkodding9354 9 ай бұрын

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

@arhangel8380 8 ай бұрын

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

@vadymprokopchuk 8 ай бұрын

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

@evgenykonstantinov8414 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

благодарю

@shnshnd 4 ай бұрын

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

@vadymprokopchuk 4 ай бұрын

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

@shnshnd 4 ай бұрын

@@vadymprokopchuk спасибо 🙏

@natalietalas 6 ай бұрын

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

@vadymprokopchuk 6 ай бұрын

100%, скоро

@kansai2770 9 ай бұрын

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

@Leha_Andr 8 ай бұрын

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

@ukraine1514 3 ай бұрын

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

@dimalukashenko4865 9 ай бұрын

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

@user-ib3hj8wc4t 8 ай бұрын

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

@yuriykhmelevski 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

Ураааа =)

@user-si8sn6kk7j 8 ай бұрын

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

@user-wx4qe3lf4n 7 ай бұрын

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

@DenisAntropov-cg3nd 9 ай бұрын

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

@vladislav.c 9 ай бұрын

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

@lexpotapenko9412 9 ай бұрын

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

@leonidmarsh4369 9 ай бұрын

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

@colodatwin3102 9 ай бұрын

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

@Stieg_W 9 ай бұрын

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

@andrey-Dudkin 9 ай бұрын

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

@iuriimykytiuk8302 5 ай бұрын

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

@mrkut360 9 ай бұрын

Лайк от души!

@sadamhylio691 9 ай бұрын

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

@user-ku5dc9jf9u 9 ай бұрын

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

@petrpetrovich-sg2jj 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

спасибо

@jedixtv3362 9 ай бұрын

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

@drawusoon 9 ай бұрын

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

@user-mu5ru2xl9n 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

material

@notnet_-2982 8 ай бұрын

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

@sheshko_pavel 7 ай бұрын

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

@vadymprokopchuk 7 ай бұрын

Благодарю

@walterwhite4407 9 ай бұрын

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

@umidbekruzmetov6824 7 ай бұрын

super, muper, giper

@user-bl3pq2ob2h 9 ай бұрын

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

@NIReeMK 9 ай бұрын

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

@user-bl3pq2ob2h 9 ай бұрын

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

@user-bl3pq2ob2h 9 ай бұрын

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

@flydi9661 7 ай бұрын

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

@vvks9901 9 ай бұрын

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

@lopwan5974 9 ай бұрын

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

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

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

@user-ms3mz9vg8b 8 ай бұрын

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

@MrDemoTM 3 ай бұрын

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

@PacoOfficial 9 ай бұрын

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

@user-bf6cp8ju1i 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

дякую

@_dimart_ua_ 7 ай бұрын

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

@vadymprokopchuk 7 ай бұрын

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

@milkiway6754 3 ай бұрын

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

@user-ku6gn6uh1v 8 ай бұрын

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

@vadymprokopchuk 8 ай бұрын

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

@Creative_duck 9 ай бұрын

Приветик !

@progover24 9 ай бұрын

ура

@oddydaddy2737 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

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

@gerasymenko1 6 ай бұрын

Аминь!

@user-nt4xo1vz4o 9 ай бұрын

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

@user-hf4fo8xe4y 7 ай бұрын

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

@elkazmakaz5870 9 ай бұрын

збс

@smojer_0 6 ай бұрын

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

@Jurist96 6 ай бұрын

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

@vadymprokopchuk 6 ай бұрын

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

@Jurist96 6 ай бұрын

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

@user-zm2bl8nv5d 9 ай бұрын

вечеринка!

@vadymprokopchuk 9 ай бұрын

она самая

@Alles_Travels 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

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

@user-mu5ru2xl9n 9 ай бұрын

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

@vladislavche7603 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

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

@nbjk9328 9 ай бұрын

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

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

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

@vadymprokopchuk 6 ай бұрын

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

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

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

@vadymprokopchuk 6 ай бұрын

@@user-sz2xh1wb1h супер

@smojer_0 6 ай бұрын

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

@AU_IAN 6 ай бұрын

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

@_morfix_ 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

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

@kirakel9637 8 ай бұрын

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

@MelkoR4111 8 ай бұрын

figma

@prepper__ 2 ай бұрын

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

@vadymprokopchuk 2 ай бұрын

figma

@prepper__ 2 ай бұрын

@@vadymprokopchuk спасибо

@hjetwd 9 ай бұрын

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

@user-hf4fo8xe4y 7 ай бұрын

не работает.

@user-hf4fo8xe4y 7 ай бұрын

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

@flickashot275 7 ай бұрын

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

@nor7ex 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

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

@danabekshadybekov6509 6 ай бұрын

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

@vadymprokopchuk 6 ай бұрын

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

@grigoriykyrylyuk1509 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

дякую

@xdayx53 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

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

@xdayx53 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

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

@denys5570 7 ай бұрын

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

@Ghost_coding 7 ай бұрын

13:20

@arhangel8380 8 ай бұрын

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

@user-xt3eb6jb6f 9 ай бұрын

спасибо за видео!

@user-se6wk2mx6s 8 ай бұрын

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

@daniel_ac420 7 ай бұрын

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

@svoy4el 5 ай бұрын

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

@minesai_tgbot 9 ай бұрын

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

@vadymprokopchuk 9 ай бұрын

сегодня

@user-bu6iq2ot8k 8 ай бұрын

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

@alexander_stark 7 ай бұрын

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

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

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

@vadymprokopchuk 4 ай бұрын

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

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

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

@user-wx4qe3lf4n 7 ай бұрын

ору про типулю)))