Верстка сайта с нуля до завершения html/css/js
Vložit
- čas přidán 5. 09. 2023
- Друзья, обалденный макет - обалденная верстка. Это верстка сайта, с самого нуля, с адаптивом, используем 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
Лайк сразу же! Вадим, спасибо за такие душевные и информативные ролики! Лучший🥹
ваш юмор это нечто, безумно интересно вас слушать и учиться. Спасибо!
был перерыв в верстке, восстановить навыки решил по твоим урокам, они лучшие
спасибо
Лайк не глядя. Я ещё не доделал сайт про свечи а уже новый макет сегодня однозначно отличный день! Спасибо вам Вадим за то что даёте возможность обучаться даже таким бомжам как я.)))
=)) круть)
Бро самые топовые уроки практики вёрстки, спасибо тебе.
Вадим спасибо за Ваш труд. Здоровья Вам и вашей семье, мирного неба.
благодарю
Классный ты парень, и практикую и смеюсь. Харизма классная у тебя! Спасибо, что ты есть, по больше подписчиков желаю!
Спасибо за очередную порцию полезного контента, макет балдежный!
++++++
Макет хоть и небольшой, но прикольный, красочный. Ждем продолжения верстки. Вадим, большое спасибо за контент, реально очень много практики.
Понемного подтягиваю js. Думаю, отличный вариант сделать логику так. Всем кнопкам с наушниками задать data-атрибуты типа data-color. При нажатии брать этот параметр и задавать его всем изображениям в виде setAttribute src. Нужно просто соответственно назвать все картинки.
Градиенты можно подвязать к заранее созданным классам, типа идентификаторам.
Текущую кнопку прятать путем добавления класса или инлайн-стилей, а все остальные показывать.
Супер видосы , если честно, когда-то давно мне посоветовали тебя, но руки не доходили посмотреть по видео, сейчас зашел посмотреть верстку и я в восторге, если честно) и с юмором, и много полезной информации, кайф
круто, спасибо
Вадим спасибо огромное за твои уроки, за твой труд!!!!
спасибо
из-за учебы подзабыл версточку, решил вернутся, возвращение блудного сына, спасибо за видос, ЛУЧШИЙ!!!!
Спасибо за видео, с удовольствием с вами поверстаю)) Очень нравятся ваши видео!!!!
Как всегда - супер!👍👍👍
Фуру лайков этому великому человеку!
да да да
@@vadymprokopchuk oru
Подскажите, а не проще ли было картинке задать position releative, тексту - absolute и просто расставить z-index и top/left/bottom/right?
Спасибо огромное за такие годные и крутые советы
Спасибо за видео, жду продолжения 🎉
Вадос спасибо за видом😊 ты лучший 💪👍
В багатьох ютуберів в яких я проходив верстку під час відео аж хочеться спати, але ваш підхід до відео особий, ви з вашими жартами заряджаєте позитивом що аж хочеться без перервно проходить вашу верстку🫡
Дякую!!!
це супер, дякую
Супер. Как всегда лучший😊
благодарю
Спасибо за классную вечеринку! Жду тусовку с JS!
100%, скоро
Спасибо за информативное видео.
Вопрос может показаться глупым, но почему на 1:06:03 для .title--s мы просто не использовали position: relative; top:40px? Или top:40px может как-то повлиять на создание анимации в будущем?
Очень классная вечеринка, диджею респект!!!!!!!!
нуссс,начнемс тебя верстать! спасибо Вадосу за видосы
Очень круто, продолжай!
Король вечеринок здорового человека. Спасибо, дядя!
Ура !!! новая вечеринка . Спасибо
Ураааа =)
спасибо ,я только начинаю учить ,видосики супер ,
Лайк однозначный, но не могу не сказать.
Хотелось бы увидеть видео где верстаешь с использованием rem. Будет куда полезнее чем однотипную верстку на пикселях смотреть
7 минут видео смотрю,уже три раза смеялся))
Очень круто. Спасибо.
Тег это строчный элемент🙂
Объяснения супер, я нигде такого больше не видела, спасибо огромное за такую работу! Решила восстановить все свои знания и наконец перейти во фронтенд, не откладывая в дальний угол, тем более когда такие классные вечеринки!
Плюс потрясающий юмор!
На 5 февраля 2024 года в Фигме больше нет бесплатного доступа к панели разработчика, можно по другому скопировать стили (через правую кнопку мыши)
Я видео записал по этому поводу, последне, посмотрите
@@vadymprokopchuk спасибо 🙏
норм такая вечеринка, спасибо брат✌
Добавил в смотреть позже , сейчас потому что js учу, потом залечу на вечеринку)
Why this author, until now, has not been awarded an Oscar for the best videos on the illustrative example of website creation!?
Спасибо выпуск пушка
Дякую за Вашу роботу)!!!
Лайк от души!
Познавательное видео! Подскажи, как сделать такую же тему и стиль, как у тебя
41:00 - с каких пор модификаторы стало допустимо использовать в отрыве от модифицируемого блока? Модификатор - это не самостоятельная сущность.
Из официальной документации:
"С точки зрения БЭМ-методологии модификатор не может использоваться в отрыве от модифицируемого блока или элемента. Модификатор должен изменять вид, поведение или состояние сущности, а не заменять ее."
Как всегда -Пишем лайки,ставим комментарии))
Рад новой вечеринке 😂
спасибо
вот что я люблю)
потом на адаптиве начнуться танцы с бубном на этом блоке,наверно оптимально изначально картинку с текстом в ней выкачать на прозрачном фоне
Вадим, а какая цветовая тема у тебя в VS Code?
material
Всё хорошо, ешё бы картинки были бы в макете, что бы тренироваться можно было без проблем
Лайк, коммент. Спасибо
Благодарю
здарова капитан ! 🛳👍
super, muper, giper
На tailwind быстрее верстать. И есть еще вопрос: А на сколько актуально заниматься ручной версткой и натяжка на WordPress и прочие CMS? Не лучше ли учить React или Svelte и становиться фронтендером, используя готовые UI киты?
ты не всегда сможешь использовать ui киты, часто придется что-то руками делать. стилизовать из ui китов элементы тоже очень сложно порой... а на верстку наверное сложно будет работу найти или потолок будет 400-500 долларов и всьо
@@NIReeMK Ясно, что придется что-то кастомизировать. Но все же без фреймворков и хоть каких-то готовых компоненов очень долго писать код. А время - деньги
И еще: не обязательно использовать весь UI kit. Можно импортировать лишь те, компоненты, которые тебе понадобятся и которые ненужно сильно кастомизировать. Плюс есть еще headless библиотеки, в которых отсутствуют css стили, что позволяет полностью кастомизировать с нуля компонент
було б дуже круто почути від вас як вивчати js коли ти вивчив вже основи,де брати практику? звідки брати ідеї для проектів? і взагалі як розвиватись в js
А можно картинке в хедере задать индекс 10, а буквам которые сверху картинки задавать индекс 11, а тем кто ниже картинки, задавать индекс 9? Тогда фон будет на своём самом нижнем уровне, картинка выше него, а буквы могут быть выше или ниже картинки.
Как открыть гугл документ, у меня не открывается
через какое приложение?
Вітаю! Розумію, що треба показати різні варіації того, з чим можна стикнутися на практиці - я маю на увазі те, як запхати текст під зображення і таке інше. За це окреме дякую, так як інфа дійсно дуже корисна!
Проте я б мабудь зробив це зображення в PS. І при адаптуванні все це було б простіше.
У меня почему то макет не открывается, можно ссылку на саму фигму
Лайк за Харьков))
41:10 модификатор в бэм можно использовать только вместе с элементом или блоком, сам по себе он не может использоваться
конкретно тут логичнее было бы использовать элементы title__***
Неперевершено!!!😵💫
дякую
А где вы пишите код для сайта? Просто впервые хочу попробовать, а никто не пишет где это все дело происходит
Я так потримаю ты из Украины? У меня есть Украинский канал, Там как раз вышло видео про эту программу VS Code налаштування для ефективної роботи, топові плагіни для верстки сайтів
czcams.com/video/MbQPfOJAnlM/video.html
Здравствуйте,а что такое reset.css и откуда его взять?
скачали с инета, обнуляет стандартные стили от браузеров
я который под конец видео кричу "букву М по ниже надо!!" xddd
Приветик !
ура
У меня фигма пишет совершенно другие размеры, при нажатии на кнопку в фигме она показывает падинги: 16px 112px... - в чем прикол?
изначально я старый макет залил, перекачай, может в этом дело
Аминь!
А че header__content, а не секция hero? На твоем же курсе так учили (SimpleFood)
На курсе и будут так учить... Это не курс, тут можно с костылями, чтоб посложнее.
збс
Привет, смотрю видео и думаю. Очень высокий уровень задержания аудитории у вас на всех таких видео наверное. Очень жалко что от российских просмотров нет монетизации(((. Казахстан, укр, беларусь, все равно мало. Эххх
Вадим. ты таки с Одессы?
нет, из Харькова
Ну добре тримайтеся там. бажаю вам якнайшвидшої перемоги. Слава Україні. ви з вашими жартами заряджаєте позитивом Дякую @@vadymprokopchuk
вечеринка!
она самая
Что-то макет немного не соответствует тому, что на видосе 🤔 Дизайнер внёс правки?
перекачай, не тот изначально залил
Да это КРУЧЕЕЕЕЕ, чем у андриканича!!!!!
Было бы интересно посмотреть как сделать адаптив хедера
будет в 3 видосе
вы забыли там еще бэграунд где буква М и там под наушником
прописываю все так же , ну почему то когда нажимаешь ентер у по другому строки идут
но содержимое то такое?
@@vadymprokopchuk да , на время оставил , верстаю страницу с iPhone , там все идёт хорошо ,спасибо
@@user-sz2xh1wb1h супер
39:30 - Пхппхпхпхпхпхпх
Заметка для меня 40:26
Почему не используйте live server?
использую, просто не на видео, а в своей работе
с помощью чего нужно открывать макет
figma
Что за программа в начале видео
figma
@@vadymprokopchuk спасибо
50:33 .title { isolation: isolate } .title--pod { z-index: -1 }
не работает.
isolation: isolate нужно не title , а блоку с фоном. Тогда работает.
ребят была у кого-нибудь проблема с пространством между спанами в хедере? я себе щас голову сломаю
Ну если это не божество, то что это? Вот кого кого, а его GPT не заменит)
=))) спасибо )
макет не могу открыть ?
попробуй онлайн версию фигма
крутяк , чотко !
дякую!
дякую
а что если изменять масштаб и эти буквы прыгают?)
зачем менять масштаб ?)
@@vadymprokopchuk мне незачем, а если на масштабе, например, 80 смотрится ужасно,в целом, Вадос, надо с этим заморачиваться или пусть человек сделает масштаб меньше?
@@xdayx53 та масштабирование вообще оч редко используется и точно не на этом сайте, тут точно не стоит заморачиваться
С нятягой вывез 11-и часовой видос,но после вёрстки я понял ,что без сада-маза не стать роботом-ТЕРМИНАТОРОМ,поэтому продолжим вечеринку и начнём верстать новый.Как мы поняли МАСТЕР ЗНАЕТ СВОЁ ДЕЛО, доверимся ему и да пребудет с нами мудрость правильного распределения временных потоков дабы не поймать про*сти господи*крастинацию.
13:20
Відразу зрозумів що ти з Харкова 😅
спасибо за видео!
ребят я уже устал так учиться, верстаю в точности как у автора, но у меня паддинги и марджины образуются, а у него нет, код один в один но у меня все равно дичь.... тот же хром использую, пишу в брекетс, menu__list просто стоит у левого края под яблоком , ни на что не реагирует кроме float: right; хотя автор не прибегал к таким методам
Скорее всего надо обнулить стили браузеров с помощью reset.css или normalize.css, подключить один из их в первую очередь, а ниже подключать все прочие кастомные стили
Аххха я орнул ах харьков😂😂 ар запорожье аа киев😂
Конда продолжение?
сегодня
Уже даже это версткой назвать сложно) , я понимаю что это для начинающих, но все же. Можно же не городить гору стилей, в каждом селекторе, а написать пару простых миксинов, сделать стили реюзбельными, подключить авто префксер и резет цсс. Или такое уже не потянут начинающие?) Лучше же им показать что css файлы на 1000 строк это круто.
Я примерно понимаю о чем ты написал. В фигме переменные работают по похожим принципам. Но, я уверен, что человек открывший впервые фигму для верстки и решивший начать верстать , все что ты написал: Ты че материшься?
Блин, у меня почему-то надпись большыми буквами не так стала, хотя я повторял всё точ в точ за вами, капец
значит, что-то не так, может ошибка орфографическая
@@vadymprokopchuk Короче я немного подкрутил по своему left, right, translate(), и вроде всё получилось. Не знаю почему не вышло изначально, но проверял всё, я повторял точ в точ, и такое бывает. Я начинающий Фронтендер, учусь вот, хожу на курсы у себя в городе. У меня во вторник будет испит, нужно будет презентовать свой сайт. Там можно любо какой, по бесплатным макетам я бы не успел сделать, а вот когда есть всё изложенно в видео, то может и успею. Иногда просто прихожу в тупик в процессе вёрстки и всё не можу ничего с этим сделать, может через день прийдёт решение в голову а может и нет.
ору про типулю)))
Почему ваш платный курс по верстке недоступен граждана РФ и РБ?
потому что автор гражданин Украины
🤡🤡🤡
в тебе не працює макет скачує кривий файл
У всіх норм, отже проблема на твоїй стороні
@@vadymprokopchuk та я трохи тупанув сорян , дяк за інфу
Макет у фірмі відрізняється.
перезалив