Бесплатный марафон по верстке сайта html/css/js, для новичков
Переглядів 16,591
Місяць томуДрузья, всем привет. Это верстка сайта для новичков, для всех, кто делает свои начальные шаги в верстке сайтов. В видео я подробно объясняю каждый этап разработки, мы по полной программе используем html, css и js. Это будет серия видео в виде марафона по верстке сайта.
----------------------------------------
макет - drive.google.com/file/d/1-SAc...
файлы (начальный html и css) - drive.google.com/file/d/1B1BT...
----------------------------------------
Сайт курса по верстке - 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
@dmitriyvvmp9703 Місяць тому
Мне 38. К it отношения никогда не имел, но почти 3.5 года назад начал с твоих видео, потом покупал твой курс на юдеми по шопу. Дальше больше. Сейчас я почти мидл фронт, работаю на иностранную компанию! Хочу сказать тебе огромное спасибо! Благое дело делаешь, Вадим! И всем кто хочет войти в it: если вы нашли этот канал, то дальше можете не искать, по верстке лучше, чем Вадим в ру сегменте ничего нет 100%.
@vadymprokopchuk Місяць тому
Благодарю
@aswarriorr Місяць тому
Вообще скажу ,Вадим прекрасный человек ! Говорю не понаслышке ! Рекомендую !
@user-ms6gt1en7d Місяць тому
И скоро заменит всех программистов ребята
@1995taunus 29 днів тому
Подскажите пожалуйста, где вы нашли курс Вадима на Юдеми платформе?
@vadymprokopchuk 19 днів тому
@@aswarriorr спасибо, мне очень приятно
@Andy-pn3ww Місяць тому
С ума сойти. Что за человек! Невероятная самоотдача и работоспособность. Каждый выпуск на этом канале - праздник. Если вы искали, как я канал, где можно получить скилл с самого 0 и до проекта, это именно он. Спасибо автору!
@vadymprokopchuk Місяць тому
Благодарю, рад, что помогаю
@user-mu6ck4ty2g Місяць тому
каждый выпуск не только праздник,но и целая история! лучший канал!!!
@kawabanga17 Місяць тому
и снова вечеринка!))
@st1ch_ Місяць тому
Чувак! Ты просто Бог в сфере "пояснение информации", я просрал кучу времени в поиске качественной подачи информации и нихрена так и не научился. Твоя информация как теплый мёд на уши, всё четко и по полочкам!!! Огромный лайк и подписка!!
@st1ch_ Місяць тому
То ти ще й з України! Іди сюди, обійму :D
@vadymprokopchuk Місяць тому
Дякую=)
@user-nh9tw3ei9t Місяць тому
Вадим, дорогой, приветствую! Рад видеть новый марафон, спасибо тебе огромное!!! Храни Господь добрых людей!
@vadymprokopchuk Місяць тому
Благодарю, супер !
@kostyafrompiter Місяць тому
привет вадим. спасибо за всё что делаешь. дай бог здоровья.
@vadymprokopchuk Місяць тому
Благодарю
@constyak9031 Місяць тому
вроде давно перешагнул этот уровень, но к Вадосу на вечеринку регулярно захожу поддержать лайком
@vadymprokopchuk Місяць тому
Благодарю
@user-wu7lp2hc2u Місяць тому
Вот ТАК нужно преподавать !!! Четко, ясно и без лишней воды.
@vadymprokopchuk Місяць тому
Спасибо
@user-ve7tx3ud6n Місяць тому
Спасибо Вадим. Прекрасный урок. Здоровья Вам и вашей семье.
@user-ep9ip5bo6j 20 днів тому
Огромная благодарность автору за разжевывание каждого действия. Ну этот контент, ну мед, ну медятина.🤩
@VladimirOnokhov Місяць тому
Спасибо большое! Надеюсь будет как можно больше выпусков)
@gaping_sign2713 17 днів тому
Спасибо вам большое, что даете учится бесплатно,Ваши видео много чему научили меня ❣❣❣
@vadymprokopchuk 14 днів тому
Круто, я очень рад
@denisdenisenko7287 Місяць тому
Ты гений брат! У тебя талант! Спасибо большое за разжовывания, такого сейчас не хватает!
@vadymprokopchuk Місяць тому
спасибо
@beeline4754 Місяць тому
Спасибо тебе за уроки, они мне дали базовые знание в верстке)))
@tohahachichi Місяць тому
Спасибо за твой полезный контент ❤
@vadymprokopchuk Місяць тому
Спасибо
@krabik2502 16 днів тому
думал вы будете делать контент все более труднее для новичков. спасибо вам.
@luckytima2315 Місяць тому
Пффффф только заварил чая, думаю что посмотреть, тут Владос вечеринку выкладывает новую, бомба
@vadymprokopchuk Місяць тому
Ну, я как знал, успел )))
@vadymjatskul6473 Місяць тому
Спасибо за работу, напишу по поводу стрелок под слайдером. На макете они нарисованы правильно и на одном уровне. В этом можно убедиться вытащив горизонтальную линейку. А вот картинки на 2 и 3 слайдах подняты на 50рх от низа контейнера. Соответственно контейнер можно сделать 750рх, а картинки поднять на 50. И тогда все по макету получится.
@fla1zen_937 Місяць тому
Большое спасибо Вадим, очень помогаешь на начальных этапах верстки. Очень жду следующий видос❤
@vadymprokopchuk Місяць тому
Спасибо
@user-gp1vo3yv3m Місяць тому
По верстке это самый топовый образовательный контент 100%. Буду готовиться на следующий курс по верстке однозначно!
@vadymprokopchuk Місяць тому
Благодарю
@user-wr4nc2un3k Місяць тому
Спасибо, ждал с нетерпением
@vadymprokopchuk Місяць тому
Спасибо
@walterwhite4407 Місяць тому
Автору здоровья желаю!!!
@vadymprokopchuk Місяць тому
Благодарю
@user-dw7qc3kh6g 19 днів тому
Глубокая благодарность автору ❤️❤️❤️
@vadymprokopchuk 19 днів тому
спасибо
@bezmazbl Місяць тому
Вадим, респект! Капитальный красавчик.
@vadymprokopchuk Місяць тому
Спасибос
@andrey-Dudkin 18 днів тому
Спасибо за видос очень полезно
@fluffyraccoon5648 Місяць тому
наконец то вечеринка от Вадима, рад вас видеть
@vadymprokopchuk Місяць тому
Спасибо, взаимно
@iuriimykytiuk8302 Місяць тому
Дякую за пізнавальні відосики) все круто і зрозуміло)
@vadymprokopchuk Місяць тому
дякую
@user-fw9ez9we1c Місяць тому
Привет! Эх, видео бы для старичков..😊 Очень классные видео, спасибо
@user-eg5cg3lk3e Місяць тому
В очередной раз спасибо за такие стримы! Поправляйся! В ходе просмотра в начале появилось 2 вопроса: 1. Почему элементы хедера, например навигация, по БЭМ не называлась например header__nav, а выносилось в отдельный блок? Разве не правильней содержимое хедера делать его частью. 2. Для кнопок "избранные", "корзина", почему было решение вставлять картинку через , а не в css добавить тегу background-image ?
@user-kp7ce3ns1x Місяць тому
Предположу 1. Тогда было б . Судя по макету, меню на сайте будет только одно и назвав блок и так будет понятно, что оно в header. 2. Скорее всего для бэк-энда. Бэк-эндер не имеет доступа к СSS, а только к index.html
@The-Way-of-Life. Місяць тому
Хоть я уже и прошел этот уровень верстки и на некоторые моменты больно смотреть😄 Но я хочу выразить тебе благодарность за это видео, спасибо!
@vadymprokopchuk Місяць тому
Спасибо
@temp8812 Місяць тому
Красава 🎉
@apscalisthenics8412 Місяць тому
Сразу лайк 👍
@user-gr5xz2oo3l Місяць тому
Спасибо родной
@walterwhite4407 Місяць тому
Хелов еврібаді) Вадим снова с нами💪
@vadymprokopchuk Місяць тому
Хелоу еврібаді =)
@user-vm9tg1gi6t Місяць тому
Добрый день, при скачивании макета есть только frame 3, 4, 5, а frame 1, 2 отсутствует, подскажи куда пропало?
@varvara_prokopchuk Місяць тому
какой макет))))😊😊😊
@vadymprokopchuk Місяць тому
Макет прелесть просто, один из самых лучших в моей практике
@varvara_prokopchuk Місяць тому
@@vadymprokopchuk 😘😘😘😘 май харт
@user-km8we8hq2g Місяць тому
👍👍👍
@user-xe4be7iq1q 14 днів тому
30:10 1:03:52 1:07:00 1:22:40 ,1:28:45,1:29:55(1:31:23,1:32:05),1:38:00,1:39:05,1:41:50,1:45:40,1:46:45,1:52:52,1:55:23,1:57:40,2:01:37,2:02:40,2:02:54,2:06:45,2:09:10,2:10:55
@user-kn4hy3hj5k Місяць тому
👍👍👍👍👍👍👍
@sovngardeawaits-rm2np Місяць тому
пошло добро!
@vadymprokopchuk Місяць тому
Полным ходом
@beeline4754 Місяць тому
Когда у тебя будет на youtube урок верстка большого интернет магазина с Js. и еще один вопрос будут ли уроки по типу использования библиотеки React Redux очень интересно твоя подача информации ))
@gllebka Місяць тому
Ну на конец-то новый лендос. Написал 5 лендосов и устроился на работу. Ща будет шестой, повышу свою зп :D
@vadymprokopchuk Місяць тому
Красава=)
@c0cosik_ 3 дні тому
1:58:12 Подскажите пожалуйста почему margin-left: auto сместила кнопки на 2 последних слайдов, но не сместила кнопку на первом слайде, хотя классы у них одинаковые?
@line_delay Місяць тому
Большое спасибо, Вадим, за очень интересный и информативный, на мой новичковский взгляд, урок! У меня такой вопрос: универсален ли этот reset.css из вашего архива, или не под каждый макет он подойдет? И как его правильно вписать в уже существующий html-файл, в котором уже прописаны определенные стили, чтобы ничего не слетало? А то пытаюсь его вставить перед всеми линками со стилями, как на видео, но в итоге все отображается криво. Заранее спасибо!
@vadymprokopchuk Місяць тому
он должен быть подключен самым первым, как у меня на видосе, тогда все ок будет, подходит почти всегда
@KRABOWe-cm2je 3 дні тому
29:00 . плотность пикселя на квадратний мм
@nik_ibr Місяць тому
Вечеринка продолжается 🙃
@vadymprokopchuk Місяць тому
100%
@user-nosia Місяць тому
Привет. Спасибо за твои труды. Ты для body прописал высоту строки 1.4. В "шапке" текст в h3 по макету auto. Я так понимаю, для него высоту строки надо поменять на 1.2, это и означает auto? Если у тебя далее в списке будет шрифт с высотой строки 1.2, а ты для body задал 1.4, то элементы списка наследуют 1.4 даже если для текста в элементе задать 1.2. Как с этим бороться? Или вообще для body не задавать высоту строки, или переопределять её для li, а не для, например, ссылки в элементе списка.
@vadymprokopchuk Місяць тому
я не понял первую часть вопроса, но если у тебя на бади стоит какое-то значение, а потом у конкретоного элемента тебе нужно другое поставить, то просто задаешь ему другое и все, оно более сильное по приоритетности для него будет
@EvilPinguin1 5 днів тому
Привет Вадим . Такой вопрос . Как ты делаешь переносы на 22:43 при нажатии на таб. У меня они компонуются как-то по другому . Расширение какое-то ?
@vadymprokopchuk 5 днів тому
Небольшие строки в настройках Эммета я прописал, поэтому по другому разворачивает
@justi8300 Місяць тому
Вопрос не по теме ролика, хочу в gulp сборку добавить reset.css(чтобы стили сбрасывать), сборку только что закончил делать по вашим видео про сборку. Если уже в конечную папку dist/css закидывать и reset.css и style.min.css будет ли это правильно? Или надо сбросы стилей кидать в style.min.css чтобы файл css был только один?
@vadymprokopchuk Місяць тому
Лучше кидать в мин, чтобы один файл был, просто импорту его туда
@stepanrazin7933 Місяць тому
После каждого билда папка dist будет перезаписываться, лучше в папке, где будут писаться стили, добавить reset.css и импортировать его в style.css
@Makswell-oo5gu 2 години тому
что то у меня стрелки arrow-left arrow-right получаются прижаты к самому левому нижнему краю страницы, а не как в макете по срезу контейнера...
@user-gz9tk9xn1j Місяць тому
Вадим спасибо за новые уроки,. Но скачал макет , а у меня только 3 фрейма показывает ,где еще два не пойму?
@vadymprokopchuk Місяць тому
возможно баг, завтра перезалью макет
@user-gz9tk9xn1j Місяць тому
Неа, все так же. В чем беда не понимаю, ну да ладно. Спасибо что обратил внимание.
@koxaimari Місяць тому
Доброго дня! Встречалось мнение что контентное изображение стоит вставлять в img, а иконки фоном. Сдесь же сделано наоборот, стрелки в img слайды в фон. Это мнение неактуально или ошибочно или вообще без разницы?) Спасибо)
@vadymprokopchuk Місяць тому
там главное не как, а где можно в нтмл или в сss, контентные изображения строго в нтмл, у меня так и есть, бекграунд-имейдж прописан в файле нтмл, и это бекграунд так как там фоновое изображение, это четко видно. а вот значки так как вам удобно, в данном случае намного быстрее в нтмл прописать, но мы будем их немного по другому вставлять так как я заметил что они должны фон менять при ховере, но это все равно будет в нтмл. Когда-то давным давно лупили иконки в сss, просто была привычка, и там было свое удобство так как свг формат мало поддерживался
@kawabanga17 Місяць тому
Привет Всем! UI Kit у всех отображается? Лендинг огнище!!!!!!)))Спасибо!
@Liunamme Місяць тому
А можно для самый больших?)) С крутыми анимациями, не привязанным к сетке как старые шаблоны с вордпресса? А то простых и так на ютюбе хватает
@vadymprokopchuk Місяць тому
Супер, записал !
@sulejmanpovelitel1220 27 днів тому
почему ты не переходишь на pixso та же самая figma только с русскоязычным меню + режим разработчика
@user-qo9nt5sh5f Місяць тому
Здравствуйте! Скажите пожалуйста. Если ли какой то порядок написания свойств по важности на убывание для класса?
@vadymprokopchuk Місяць тому
Привет, если для одного класса, то такого нет, просто желательно компоновать, все для текста, для отступов и так далее, просто для красоты и удобства
@user-qo9nt5sh5f Місяць тому
Спасибо!@@vadymprokopchuk
@agoria29 13 днів тому
Доборого вечора, дякую за такі уроки, дивлюсь Вас давно, зараз придбав ноутбук і пишу з Вами. В мене 2 питання. 1. Не підтягує шрифт, якщо ставити значення 400,700 як у Вас. 2. Emet записує посилання таким чином , це нормально? Дякую
@vadymprokopchuk 12 днів тому
По другому пункту все ок, в мене просто налаштування інші. По шрифту, подивись на вкладку консоль в інспекторі, можливо в шляху помилка, чи в чомусь такому, можливо не прописано в css
@Laurenciy 29 днів тому
Приветствую, пытаюсь зайти на сайт по поводу курсов, не загружает ни с одного устройства. У всех так ?
@egorka.761 29 днів тому
Почему мы не писали в html тег , а сразу теги ? Вроде же как нужно писать
@hopelezzhopelezz487 27 днів тому
а в чём смысл писать html`у border-box, а потом звездулей делать inherit ? можно сразу звездуле дать inherit и делов, или так красивее ? Тогда можно использовать вместо html - > :root {} будет ещё кравивее :) мне нравится :root и всем сразу ясно\понятно :)
@dmitrylol2396 Місяць тому
а нам стайл гайд в макете?)
@user-sv7us6sq2f Місяць тому
Когда стрим?
@vadymprokopchuk Місяць тому
Нужен стрим?)
@1opportunist Місяць тому
Курс для самых маленьких)))
@4h3940 Місяць тому
Почему у меня не убираются стрелки хотя я для них прописал content none, все точно также делаю
@4h3940 Місяць тому
Если в браузере в инспекторе я могу убрать галочку и отключить это свойство, то вот в коде непосредственно прописывая none ничего не меняется
@vadymprokopchuk Місяць тому
вы не тому прописываете, где-то есть ошибка, или не хватает специфичности(приоритета)
@daniilshapovalov8467 13 днів тому
@@4h3940 .swiper-button-next:after, .swiper-button-prev:after { content: none !important; } .swiper-button-next{ left: 75px !important; right: auto !important; }
@user-px5if6gm9d Місяць тому
Ребята помогите, открываю макет сайта в фигме, и просто белый лист, что делать???
@user-kp7ce3ns1x Місяць тому
У меня такое же было, когда открывал в десктоп версии Фигмы. ХЗ, может ноут просто не вытягивает. Открываю сейчас онлайн через брайзер и все ок
@dindin5528 Місяць тому
Реально ли в 2024 новичку найти работу?)
@vadymprokopchuk Місяць тому
Ну а как по другому? Кто-то уходит из профессии на другие должности, кто-то приходит, плюс есть категории компаний которые очень любят джунов
@user-nt4tq3iq7e Місяць тому
У всех получается скачать макет и запустить в фигме? Просто это уже не первый макет, который мне не удаётся скачать и открыть на этом канале.
@vadymprokopchuk Місяць тому
У всех получилось, у тебя может настройки в браузере такие, или ты не до конца качаешь
@ob5804 Місяць тому
Дякую за пояснення зі стрілками 👍 Питання, як бути з різним відступом після хедера? 1 слайд поставили 90, а в наступних відступ після хедера по 50.
@vadymprokopchuk Місяць тому
Я подивлюсь в 3 частині, не звернув увагу мабуть, сьогодні другу вже записав, в третій гляну
@ob5804 Місяць тому
@@vadymprokopchuk добре)
@MistikF Місяць тому
нету frame 1,2 в файле фигмы
@vadymprokopchuk Місяць тому
спасибо, посмотрю исправлю
@MistikF Місяць тому
@@vadymprokopchuk спасибо, я прост устроился недавно в компанию на пхп программиста и решил подучить верстку для себя, чтобы понимание было, а тут первого второго фрейма нету, слушай, если до завтра исправишь, буду оч благодарен! Да и в общем тебе спасибо большое за все, ты правда оч понятно объясняешь
@user-xm1hd8fe9m Місяць тому
А где сложные макеты ?
@vadymprokopchuk Місяць тому
Два отрисованы и ждут, должны были выйти еще в конце февраля, но я долго болел, вот немного расчехлить я с этим
@sio11041986 Місяць тому
@@vadymprokopchuk Здоровье важнее, видосики подождут!!!Тем не менее ждем верстку макетика на Gulp, с видео про dev mode в Figma!!! Спасибо за контент!
@user-xm1hd8fe9m Місяць тому
@@vadymprokopchuk понятно, все ровно спасибо за твою работу, вот тебе ещё одна идея для ролика, gulp для WP, чтобы можно было легко пользоваться gulp и делать бэк часть на WP, на ютубе такого не было и было бы полезно такое видео
@vadymprokopchuk Місяць тому
@@user-xm1hd8fe9m спасибо
@NazarKoshla Місяць тому
Вадос як ідея запалити react щось для дедов
@vadymprokopchuk Місяць тому
Идея бомбезная =)
@MrSstar12345 Місяць тому
Коли вийде марафон українською?
@vadymprokopchuk Місяць тому
А ти минулий відос вже зверстав ?
@sfeclamarina7013 Місяць тому
wgt@400;700, а не 400,700 иначе выдаёт еррор Спсасибо за годный контент, вы очень классно всё обьесняите 👍👍👍
@user-kp7ce3ns1x Місяць тому
У меня так и получилось - не подтягивался Regular. Сделал просто отдельной дополнительной строчкой
@user-jr7ub6mh3t Місяць тому
@user-xt3eb6jb6f Місяць тому
Дякую тобі за твою працю!
@vadymprokopchuk Місяць тому
Дякую
От 0 до 1
Переглядів 4,1 тис.
Pomazkov JS
Переглядів 232 тис.
От 0 до 1
Переглядів 2,2 тис.
Макс Куратов
Переглядів 308 тис.