Бесплатный марафон по верстке сайта html/css/js, для новичков

Подписаться 83 тыс.

Просмотров 19 тыс.

50% 1

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

Опубликовано:

15 мар 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 144

@dmitriyvvmp9703 Месяц назад

Мне 38. К it отношения никогда не имел, но почти 3.5 года назад начал с твоих видео, потом покупал твой курс на юдеми по шопу. Дальше больше. Сейчас я почти мидл фронт, работаю на иностранную компанию! Хочу сказать тебе огромное спасибо! Благое дело делаешь, Вадим! И всем кто хочет войти в it: если вы нашли этот канал, то дальше можете не искать, по верстке лучше, чем Вадим в ру сегменте ничего нет 100%.

@vadymprokopchuk Месяц назад

Благодарю

@aswarriorr Месяц назад

Вообще скажу ,Вадим прекрасный человек ! Говорю не понаслышке ! Рекомендую !

@user-ms6gt1en7d Месяц назад

И скоро заменит всех программистов ребята

@1995taunus Месяц назад

Подскажите пожалуйста, где вы нашли курс Вадима на Юдеми платформе?

@vadymprokopchuk Месяц назад

@@aswarriorr спасибо, мне очень приятно

@Andy-pn3ww Месяц назад

С ума сойти. Что за человек! Невероятная самоотдача и работоспособность. Каждый выпуск на этом канале - праздник. Если вы искали, как я канал, где можно получить скилл с самого 0 и до проекта, это именно он. Спасибо автору!

@vadymprokopchuk Месяц назад

Благодарю, рад, что помогаю

@user-mu6ck4ty2g Месяц назад

каждый выпуск не только праздник,но и целая история! лучший канал!!!

@kawabanga17 Месяц назад

и снова вечеринка!))

@constyak9031 Месяц назад

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

@vadymprokopchuk Месяц назад

Благодарю

@kostyafrompiter Месяц назад

привет вадим. спасибо за всё что делаешь. дай бог здоровья.

@vadymprokopchuk Месяц назад

Благодарю

@user-wu7lp2hc2u Месяц назад

Вот ТАК нужно преподавать !!! Четко, ясно и без лишней воды.

@vadymprokopchuk Месяц назад

Спасибо

@user-nh9tw3ei9t Месяц назад

Вадим, дорогой, приветствую! Рад видеть новый марафон, спасибо тебе огромное!!! Храни Господь добрых людей!

@vadymprokopchuk Месяц назад

Благодарю, супер !

@st1ch_ Месяц назад

Чувак! Ты просто Бог в сфере "пояснение информации", я просрал кучу времени в поиске качественной подачи информации и нихрена так и не научился. Твоя информация как теплый мёд на уши, всё четко и по полочкам!!! Огромный лайк и подписка!!

@st1ch_ Месяц назад

То ти ще й з України! Іди сюди, обійму :D

@vadymprokopchuk Месяц назад

Дякую=)

@user-ve7tx3ud6n Месяц назад

Спасибо Вадим. Прекрасный урок. Здоровья Вам и вашей семье.

@user-ep9ip5bo6j Месяц назад

Огромная благодарность автору за разжевывание каждого действия. Ну этот контент, ну мед, ну медятина.🤩

@denisdenisenko7287 Месяц назад

Ты гений брат! У тебя талант! Спасибо большое за разжовывания, такого сейчас не хватает!

@vadymprokopchuk Месяц назад

спасибо

@vadymjatskul6473 Месяц назад

Спасибо за работу, напишу по поводу стрелок под слайдером. На макете они нарисованы правильно и на одном уровне. В этом можно убедиться вытащив горизонтальную линейку. А вот картинки на 2 и 3 слайдах подняты на 50рх от низа контейнера. Соответственно контейнер можно сделать 750рх, а картинки поднять на 50. И тогда все по макету получится.

@user-wr4nc2un3k Месяц назад

Спасибо, ждал с нетерпением

@vadymprokopchuk Месяц назад

Спасибо

@user-gp1vo3yv3m Месяц назад

По верстке это самый топовый образовательный контент 100%. Буду готовиться на следующий курс по верстке однозначно!

@vadymprokopchuk Месяц назад

Благодарю

@beeline4754 Месяц назад

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

@luckytima2315 Месяц назад

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

@vadymprokopchuk Месяц назад

Ну, я как знал, успел )))

@VladimirOnokhov Месяц назад

Спасибо большое! Надеюсь будет как можно больше выпусков)

@Kitchendeveloper 5 дней назад

просто лучший препод

@vadymprokopchuk 3 дня назад

Спасибо

@tohahachichi Месяц назад

Спасибо за твой полезный контент ❤

@vadymprokopchuk Месяц назад

Спасибо

@user-vm9tg1gi6t Месяц назад

Добрый день, при скачивании макета есть только frame 3, 4, 5, а frame 1, 2 отсутствует, подскажи куда пропало?

@fla1zen_937 Месяц назад

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

@vadymprokopchuk Месяц назад

Спасибо

@krabik2502 Месяц назад

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

@apscalisthenics8412 Месяц назад

Сразу лайк 👍

@temp8812 Месяц назад

Красава 🎉

@andrey-Dudkin Месяц назад

Спасибо за видос очень полезно

@user-dw7qc3kh6g Месяц назад

Глубокая благодарность автору ❤️❤️❤️

@vadymprokopchuk Месяц назад

спасибо

@bezmazbl Месяц назад

Вадим, респект! Капитальный красавчик.

@vadymprokopchuk Месяц назад

Спасибос

@fluffyraccoon5648 Месяц назад

наконец то вечеринка от Вадима, рад вас видеть

@vadymprokopchuk Месяц назад

Спасибо, взаимно

@user-gr5xz2oo3l Месяц назад

Спасибо родной

@walterwhite4407 Месяц назад

Автору здоровья желаю!!!

@vadymprokopchuk Месяц назад

Благодарю

@iuriimykytiuk8302 Месяц назад

Дякую за пізнавальні відосики) все круто і зрозуміло)

@vadymprokopchuk Месяц назад

дякую

@user-km8we8hq2g Месяц назад

👍👍👍

@user-fw9ez9we1c Месяц назад

Привет! Эх, видео бы для старичков..😊 Очень классные видео, спасибо

@gaping_sign2713 Месяц назад

Спасибо вам большое, что даете учится бесплатно,Ваши видео много чему научили меня ❣❣❣

@vadymprokopchuk Месяц назад

Круто, я очень рад

@user-eg5cg3lk3e Месяц назад

В очередной раз спасибо за такие стримы! Поправляйся! В ходе просмотра в начале появилось 2 вопроса: 1. Почему элементы хедера, например навигация, по БЭМ не называлась например header__nav, а выносилось в отдельный блок? Разве не правильней содержимое хедера делать его частью. 2. Для кнопок "избранные", "корзина", почему было решение вставлять картинку через , а не в css добавить тегу background-image ?

@user-kp7ce3ns1x Месяц назад

Предположу 1. Тогда было б . Судя по макету, меню на сайте будет только одно и назвав блок и так будет понятно, что оно в header. 2. Скорее всего для бэк-энда. Бэк-эндер не имеет доступа к СSS, а только к index.html

@walterwhite4407 Месяц назад

Хелов еврібаді) Вадим снова с нами💪

@vadymprokopchuk Месяц назад

Хелоу еврібаді =)

@The-Way-of-Life. Месяц назад

Хоть я уже и прошел этот уровень верстки и на некоторые моменты больно смотреть😄 Но я хочу выразить тебе благодарность за это видео, спасибо!

@vadymprokopchuk Месяц назад

Спасибо

@user-kn4hy3hj5k Месяц назад

👍👍👍👍👍👍👍

@varvara_prokopchuk Месяц назад

какой макет))))😊😊😊

@vadymprokopchuk Месяц назад

Макет прелесть просто, один из самых лучших в моей практике

@varvara_prokopchuk Месяц назад

@@vadymprokopchuk 😘😘😘😘 май харт

@beeline4754 Месяц назад

Когда у тебя будет на youtube урок верстка большого интернет магазина с Js. и еще один вопрос будут ли уроки по типу использования библиотеки React Redux очень интересно твоя подача информации ))

@sovngardeawaits-rm2np Месяц назад

пошло добро!

@vadymprokopchuk Месяц назад

Полным ходом

@gllebka Месяц назад

Ну на конец-то новый лендос. Написал 5 лендосов и устроился на работу. Ща будет шестой, повышу свою зп :D

@vadymprokopchuk Месяц назад

Красава=)

@yuriykolomytsyn2352 9 дней назад

Огромное спасибо за отличную верстку. Есть вопрос...почему у меня левая стрелка свайпера упирается в край экрана, вроде следовал за вами по шагам, может что-то пропустил? я добавил свойство для .container-arrow margin-left 100px вроде помогло, но наверняка как-то надо было по другому А еще почему-то картинки slider slider-bg-1.jpg и slider-bg-2.jpg не встают на всю ширину экрана, а только на ширину контейнера...есть идеи?

@line_delay Месяц назад

Большое спасибо, Вадим, за очень интересный и информативный, на мой новичковский взгляд, урок! У меня такой вопрос: универсален ли этот reset.css из вашего архива, или не под каждый макет он подойдет? И как его правильно вписать в уже существующий html-файл, в котором уже прописаны определенные стили, чтобы ничего не слетало? А то пытаюсь его вставить перед всеми линками со стилями, как на видео, но в итоге все отображается криво. Заранее спасибо!

@vadymprokopchuk Месяц назад

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

@c0cosik_ 18 дней назад

1:58:12 Подскажите пожалуйста почему margin-left: auto сместила кнопки на 2 последних слайдов, но не сместила кнопку на первом слайде, хотя классы у них одинаковые?

@user-nosia Месяц назад

Привет. Спасибо за твои труды. Ты для body прописал высоту строки 1.4. В "шапке" текст в h3 по макету auto. Я так понимаю, для него высоту строки надо поменять на 1.2, это и означает auto? Если у тебя далее в списке будет шрифт с высотой строки 1.2, а ты для body задал 1.4, то элементы списка наследуют 1.4 даже если для текста в элементе задать 1.2. Как с этим бороться? Или вообще для body не задавать высоту строки, или переопределять её для li, а не для, например, ссылки в элементе списка.

@vadymprokopchuk Месяц назад

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

@justi8300 Месяц назад

Вопрос не по теме ролика, хочу в gulp сборку добавить reset.css(чтобы стили сбрасывать), сборку только что закончил делать по вашим видео про сборку. Если уже в конечную папку dist/css закидывать и reset.css и style.min.css будет ли это правильно? Или надо сбросы стилей кидать в style.min.css чтобы файл css был только один?

@vadymprokopchuk Месяц назад

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

@stepanrazin7933 Месяц назад

После каждого билда папка dist будет перезаписываться, лучше в папке, где будут писаться стили, добавить reset.css и импортировать его в style.css

@EvilPinguin1 20 дней назад

Привет Вадим . Такой вопрос . Как ты делаешь переносы на 22:43 при нажатии на таб. У меня они компонуются как-то по другому . Расширение какое-то ?

@vadymprokopchuk 20 дней назад

Небольшие строки в настройках Эммета я прописал, поэтому по другому разворачивает

@KRABOWe-cm2je 18 дней назад

29:00 . плотность пикселя на квадратний мм

@koxaimari Месяц назад

Доброго дня! Встречалось мнение что контентное изображение стоит вставлять в img, а иконки фоном. Сдесь же сделано наоборот, стрелки в img слайды в фон. Это мнение неактуально или ошибочно или вообще без разницы?) Спасибо)

@vadymprokopchuk Месяц назад

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

@sulejmanpovelitel1220 Месяц назад

почему ты не переходишь на pixso та же самая figma только с русскоязычным меню + режим разработчика

@Makswell-oo5gu 15 дней назад

что то у меня стрелки arrow-left arrow-right получаются прижаты к самому левому нижнему краю страницы, а не как в макете по срезу контейнера...

@user-xe4be7iq1q 29 дней назад

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,1:58:45,2:01:37,2:02:40,2:02:54,2:06:45,2:09:10,2:10:55

@user-gz9tk9xn1j Месяц назад

Вадим спасибо за новые уроки,. Но скачал макет , а у меня только 3 фрейма показывает ,где еще два не пойму?

@vadymprokopchuk Месяц назад

возможно баг, завтра перезалью макет

@user-gz9tk9xn1j Месяц назад

Неа, все так же. В чем беда не понимаю, ну да ладно. Спасибо что обратил внимание.

@wolwel1680 14 дней назад

что делать если 1 и 2 фрейма нету?

@Laurenciy Месяц назад

Приветствую, пытаюсь зайти на сайт по поводу курсов, не загружает ни с одного устройства. У всех так ?

@nik_ibr Месяц назад

Вечеринка продолжается 🙃

@vadymprokopchuk Месяц назад

100%

@egorka.761 Месяц назад

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

@user-qo9nt5sh5f Месяц назад

Здравствуйте! Скажите пожалуйста. Если ли какой то порядок написания свойств по важности на убывание для класса?

@vadymprokopchuk Месяц назад

Привет, если для одного класса, то такого нет, просто желательно компоновать, все для текста, для отступов и так далее, просто для красоты и удобства

@user-qo9nt5sh5f Месяц назад

Спасибо!@@vadymprokopchuk

@Liunamme Месяц назад

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

@vadymprokopchuk Месяц назад

Супер, записал !

@agoria29 28 дней назад

Доборого вечора, дякую за такі уроки, дивлюсь Вас давно, зараз придбав ноутбук і пишу з Вами. В мене 2 питання. 1. Не підтягує шрифт, якщо ставити значення 400,700 як у Вас. 2. Emet записує посилання таким чином , це нормально? Дякую

@vadymprokopchuk 28 дней назад

По другому пункту все ок, в мене просто налаштування інші. По шрифту, подивись на вкладку консоль в інспекторі, можливо в шляху помилка, чи в чомусь такому, можливо не прописано в css

@kawabanga17 Месяц назад

Привет Всем! UI Kit у всех отображается? Лендинг огнище!!!!!!)))Спасибо!

@hopelezzhopelezz487 Месяц назад

а в чём смысл писать html`у border-box, а потом звездулей делать inherit ? можно сразу звездуле дать inherit и делов, или так красивее ? Тогда можно использовать вместо html - > :root {} будет ещё кравивее :) мне нравится :root и всем сразу ясно\понятно :)

@1opportunist Месяц назад

Курс для самых маленьких)))

@ob5804 Месяц назад

Дякую за пояснення зі стрілками 👍 Питання, як бути з різним відступом після хедера? 1 слайд поставили 90, а в наступних відступ після хедера по 50.

@vadymprokopchuk Месяц назад

Я подивлюсь в 3 частині, не звернув увагу мабуть, сьогодні другу вже записав, в третій гляну

@ob5804 Месяц назад

@@vadymprokopchuk добре)

@dmitrylol2396 Месяц назад

а нам стайл гайд в макете?)

@4h3940 Месяц назад

Почему у меня не убираются стрелки хотя я для них прописал content none, все точно также делаю

@4h3940 Месяц назад

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

@vadymprokopchuk Месяц назад

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

@daniilshapovalov8467 29 дней назад

@@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 Месяц назад

У меня такое же было, когда открывал в десктоп версии Фигмы. ХЗ, может ноут просто не вытягивает. Открываю сейчас онлайн через брайзер и все ок

@user-sv7us6sq2f Месяц назад

Когда стрим?

@vadymprokopchuk Месяц назад

Нужен стрим?)

@dindin5528 Месяц назад

Реально ли в 2024 новичку найти работу?)

@vadymprokopchuk Месяц назад

Ну а как по другому? Кто-то уходит из профессии на другие должности, кто-то приходит, плюс есть категории компаний которые очень любят джунов

@user-nt4tq3iq7e Месяц назад

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

@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 спасибо