Верстка сайта с нуля, для новичков. Интенсив по верстке, день 1

  Переглядів 49,763

От 0 до 1

От 0 до 1

3 роки тому

Марафон по верстке сайта. За 3 дня полностью сверстаем сайт и сделаем адаптив. Объясню все что делаю, и зачем. Отвечу на вопросы.
Макет - drive.google.com/file/d/1dlNs...
Тема в VSC - плагин Material Theme
Чтобы получить макет для тренировок, делайте репост этого видео в свои соц. сети,
ссылки на репост жду тут: from0to1maket@gmail.com
Все исходники, инструкция и информация в телеграм канале.
Ссылка на телеграм канал:
bit.ly/3eaDJKi
Ссылка на телеграм канал с впн:
teleg.one/from0to1ru
Если это не помогает, просто зайдите в телеграм и в поиске введите from0to1ru или марафон по верстке.
Чат верстальщиков:
t.me/chat_from_0_to_1
Написать мне в ВК:
vadimprokopchuk
Написать мне в телеграм:
t.me/silver8light
Отзывы о моем авторском курсе по верстке:
topic-104892258_40476405
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

КОМЕНТАРІ: 122
@alexkodding9354
@alexkodding9354 3 роки тому
Вадим спасибо огромное за твой труд))
@hightommy7961
@hightommy7961 2 роки тому
Вадос , самый лучший сенсей благодарю тебя за подачу информации и ценю твой труд , ждём новых видео.
@user-vr6bn2wd2z
@user-vr6bn2wd2z 3 роки тому
Спасибо большое. Очень круто очень нравятся Ваши марафоны
@user-sc8nh8tq7r
@user-sc8nh8tq7r 3 роки тому
Большое спасибо за вашу работу!
@igr3943
@igr3943 3 роки тому
Ох, как же я кайфую занимаясь и изучая твою подачу материала! Моё почтение!
@ukratitelkisok9726
@ukratitelkisok9726 3 роки тому
Вот нормальная подача, а не унылое гавно как 99.9% обучающих программированию на ютуб, под которые засыпаешь. Удачи🤞)
@user-nr6fn4wx7w
@user-nr6fn4wx7w 3 роки тому
Вадим спасибо за твой труд.Всех благ тебе.
@vadymprokopchuk
@vadymprokopchuk 3 роки тому
благодарю
@dalersa561
@dalersa561 2 роки тому
Бро спасибо тебе за такую подачу) подписался везде
@user-zu3qv3zc6j
@user-zu3qv3zc6j 3 роки тому
Отличное видео, пока все получается. Очень доступно. Как раз для нас новичков
@strangechannel4589
@strangechannel4589 3 роки тому
Спасибо тебе огромное за старания, - это невероятный труд. Жаль не все верстальщики, которые пытаются подать себя на Ютюбе такие прекрасные люди. Знаний, которые ты мне дал на бесплатных видео хватило, чтобы получить работу мечты - теперь я верстальщик. Спасибо тебе огромное от всей души. Как разгребусь с финансами теперь, обязательно куплю платный курс, чтобы усовершенствовать свои навыки. Еще раз спасибо.
@vadymprokopchuk
@vadymprokopchuk 3 роки тому
Красава, поздравляю, очень рад что помог тебе в твоем становлении, так держать, дальше больше! Красава!
@strangechannel4589
@strangechannel4589 3 роки тому
@@romankemenchezhi7168 Не могу говорить об оплате, но работаю на удаленке.
@Denzik89
@Denzik89 3 роки тому
Нужны комментарии? Вот комментарий -))) А так спасибо за твое доброе дело, учеба переросла в веселую песню, благодаря твоим марафонам.
@aleksandrsrudkevics6384
@aleksandrsrudkevics6384 3 роки тому
Охринеть. Ты реально крут!
@timurgareev8724
@timurgareev8724 3 роки тому
Бро ты просто лучший вот реально !! Давай еще для новичков плизз ))
@pavelsedoplatov
@pavelsedoplatov 3 роки тому
классно как всегда
@leonidmarsh4369
@leonidmarsh4369 Рік тому
Чую вытащит меня Вадим с завода, благодарю за знания.
@DmitriiBozan
@DmitriiBozan Рік тому
если я дам свой телеграм, то можешь прислать етот сайт?
@vivacuba1990
@vivacuba1990 3 роки тому
Ещё не смотрел, но авансом лайк. Как только закончу верстать сайт по твоему 7ми часовому видео, вернусь сюда. Тем более Куба у меня ассоциируется со службой в армии...
@igoryagiyaev
@igoryagiyaev 3 роки тому
Спасибо, Вы добрый человек!!!
@vadymprokopchuk
@vadymprokopchuk 3 роки тому
спасибо
@marynakhomenko1369
@marynakhomenko1369 3 роки тому
Дякую, Вадиме! Було цікаво і корисно!
@vadymprokopchuk
@vadymprokopchuk 3 роки тому
Дякую!
@voltrage1933
@voltrage1933 3 роки тому
Ты лучший))
@xanxan3256
@xanxan3256 3 роки тому
Спасибо большое Вам!
@allen_woka
@allen_woka 3 роки тому
Класс) я как раз работаю в турбизнесе) огромное спасибо)
@angusscattergood672
@angusscattergood672 3 роки тому
Очень полезные видео, очень полезный канал!)
@vadymprokopchuk
@vadymprokopchuk 3 роки тому
спасибо
@oooooowww
@oooooowww Рік тому
Привет, я только сейчас наткнулся на видео Вадима, может быть у тебя есть возможность найти дополнительный шаблон(про вино который)
@velobarahlo
@velobarahlo 2 роки тому
спасибо за видео
@Web-Developer-Nikolai
@Web-Developer-Nikolai 3 роки тому
Хороший видео урок!!!👍👍👍
@user-wp8ky5dz4e
@user-wp8ky5dz4e 3 роки тому
Вадим спасибо братан за верстку и за мотвацию!!!!!!!
@user-zw2fu5iu1f
@user-zw2fu5iu1f 2 роки тому
Спасибо огромное !
@user-em4yk4tc2x
@user-em4yk4tc2x 3 роки тому
Лайк и комментарий не глядя!
@abilkhaiyraubekerov7284
@abilkhaiyraubekerov7284 3 роки тому
Большое спасибо!
@formotherrussia4772
@formotherrussia4772 3 роки тому
Спасибо!
@kodyar7081
@kodyar7081 3 роки тому
Спасибо за такие классные уроки! Остановился на 3:06:16
@user-ed1ss7xd8m
@user-ed1ss7xd8m 3 роки тому
Вадим топппп!!! да и еще щедрый чувак))
@user-hd4oz1zf4s
@user-hd4oz1zf4s 3 роки тому
ТОПОВЫЙ КОНТЕНТ !!!!!!!!!!!!!!!!!!!!
@fhcfty7526
@fhcfty7526 3 роки тому
Vadim ti лучший !
@user-th6sy3vk8d
@user-th6sy3vk8d 3 роки тому
Дал дал Сверстал от души!
@Morantriol
@Morantriol 3 роки тому
Лучший
@user-kn3hp9qc6h
@user-kn3hp9qc6h 3 роки тому
Отличнейший контент! Спасибо большое. Курсов/марафонов бы еще по JS, цены бы тебе не было)))
@nargizaliyeva9743
@nargizaliyeva9743 3 роки тому
Спасибо за труд!Было бы круто и для продвинутых снять интенсив))
@fuji6410
@fuji6410 3 роки тому
Salam, xanım, siz azerbaycanlısız gorduyum kimi. Çox sevindim, çox xoşdur bir həmyerlilerimi, həmvetandaşlarımı bele gözəl və zehnimizi zenginləşdirən videoların altında gormek. Bilmirem, Azerbaycanda yaşayırsız, yoxsa yox, amma yenede, size bu iş karyeranızda, bu iş peşəsində urekden ancaq xeyir, ruzi-bereket arzulayıram. Allah size ve butun muselmanlara bu yolu açsın, halal ruzi-bereket və iş yolunuzu nesib elesin, eger bundan bizlere xeyir var, Amin!)) Надеюсь вы поняли, что я написал)
@nargizaliyeva9743
@nargizaliyeva9743 3 роки тому
@@fuji6410 ,bəli azərbaycanlıyam və Azərbaycanda yaşayıram)Çox sağ olun!
@fuji6410
@fuji6410 3 роки тому
@@nargizaliyeva9743 Frontend-proqrammistliyi orgenirsiz?
@oooooowww
@oooooowww Рік тому
Привет, я только сейчас наткнулся на видео Вадима, может быть у тебя есть возможность найти дополнительный шаблон(про вино который)
@winter9674
@winter9674 3 роки тому
Омайгаш, да вы , сэр, просто мастер своего дела. Высококласный наёмник
@user-co8xr8te8t
@user-co8xr8te8t 3 роки тому
Вадим даже если когда нибуть "ии" инаучится верстать, то вам в полне можно попробовать себя в стендапе или комеди-клабе. А вобще очень грамотная и последовательная подача информации без запугивания крутыми терминами.Респект!!!
@UserName-vx7fi
@UserName-vx7fi 3 роки тому
ля, кайфы, а не урок.
@user-yb8cp3xy7x
@user-yb8cp3xy7x 3 роки тому
Участвовать в конкурсе для получения макета ещё можно?
@Ycepego
@Ycepego 3 роки тому
Начало 11:41
@djIgorskee
@djIgorskee 3 роки тому
чет так и не получилось шрифт подключить Lato мак ось.
@Kurkumanchik
@Kurkumanchik 3 роки тому
А мне кажется, что автор не верно сверстал. Ширина картинки 1440рх, соответственно нужно было делать блок задавать ему max-width и в нем уже работать. Да и БЭМ не верно определен был. Читаю комменты и понимаю, что люди вообще не соображают что происходит, их больше веселит слово "вечеринка". Но подача не плоха, детально разжевывал)
@vladz3049
@vladz3049 3 роки тому
Вопрос - почему когда я прописываю изображение в css в body, то он нормально растягивает его на весь экран, а когда я прописываю его в классе, то появляется какая то белая рамка и скролл и при этом эта рамка по сути рамкой не является тк если к примеру через параметры рамки задать ей цвет и размер то появится рамка вокруг изображения а эти белые отступы так и останутся.
@alegzendryxin3338
@alegzendryxin3338 3 роки тому
Если мы не используем картинку как ссылку то почему бы нам в фотошопе не сделать рамку с текстом? Оно ведь также будет изменять свои размеры вместе с картинкой при уменьшении экрана
@user-hb1ic5rv4v
@user-hb1ic5rv4v 3 роки тому
а где можно найти макет, про который вы в начале говорили (бургундия вроде бы)
@user-zn9gq3qn2s
@user-zn9gq3qn2s 3 роки тому
Здравствуйте, могу ли я использовать в своем портфолио?
@fuji6410
@fuji6410 3 роки тому
Здравствуйте, автор. Мой вопрос к вам - когда вы в одном из видео использовали программу для редактирования кода - VisualStudio Code, то вы по каким-то критериям её выбирали? Я слышал про Notepad++ и SublimeText, а также Avocode. Скажите, всё ли это является одним и тем(по-сути) или это разные вещи и по-разному используются? Я просто чайник совсем как-бы) И ещё, хотел бы отметить какие классные у вас видео, хоть я не успел все просмотреть. Очень информативно и полезно, особенно для таких людей как я
@whatsunderisabove
@whatsunderisabove 3 роки тому
Качественно верстать можно в любой из перечисленных программ, но vs code выигрывает по удобству и количеству важных расширений, значительно упрощающих процесс верстки и позволяющих верстать быстрее. Лучше сразу настроить сборку vs code.
@fuji6410
@fuji6410 3 роки тому
@@whatsunderisabove А для чего нужен Авокадо тогда? Я не очень врубаюсь в их различия
@whatsunderisabove
@whatsunderisabove 3 роки тому
@@fuji6410 насколько я знаю avacode это такой шикарный сервис, куда можно закинуть макет в любом формате и комфортно работать с ним. Но сервис платный.
@ermakamre
@ermakamre 3 роки тому
Спасибо за видео! Возник вопрос по абзацу текста про Кубу: в макете перенос второй строки происходит по другому чем получилось при верстке в этом видео, хотя вроде как шрифт и размеры блока были выставлены как в макете. Почему так произошло? Важны ли такие детали при верстке? Бывают ли заказчики недовольные такими небольшими различиями?
@oooooowww
@oooooowww Рік тому
Привет, я только сейчас наткнулся на видео Вадима, может быть у тебя есть возможность найти дополнительный шаблон(про вино который)
@olexandrvol4998
@olexandrvol4998 3 роки тому
Видео полное уже, кому еще интересно))
@ob6824
@ob6824 3 роки тому
Обьясните, пожалуйста, как мы поняли, что высота картинки в хедере, на весь экран???
@damirmaratov2861
@damirmaratov2861 3 роки тому
Сохраненная трансляция короткая только 2 часа из 3 с половиной
@damirmaratov2861
@damirmaratov2861 3 роки тому
уже 14 часов прошло но все еще нет полной версии
@yourist530
@yourist530 3 роки тому
+
@MagellanLG
@MagellanLG 3 роки тому
Яндекс браузер в помощь
@user-zs6xm3gq4g
@user-zs6xm3gq4g 3 роки тому
а где макет взять ?
@user-xk2uv2nv6r
@user-xk2uv2nv6r 3 роки тому
Подскажите, где ссылка на почту чтобы отправить ссылку где репостила и получить новый макет для практики?
@Family-pf4fb
@Family-pf4fb 3 роки тому
from0to1maket@gmail.com
@jhongolt6629
@jhongolt6629 3 роки тому
Как голуби " УРЛ-УРЛ " ))))))))))))))))))))))))))))))))))))
@user-sp3bg7hl7x
@user-sp3bg7hl7x 29 днів тому
Как скачать Макет или войти в нее надо? Я пробовал через винрар архивировать на рабочий стол но все же не получилось открыть данную папку. Ввел название Макета в Figma там тоже не находит
@user-nu4ki9jt5z
@user-nu4ki9jt5z 3 роки тому
Здравствуйте. menu__list в css не работает. не хочет меню по середине вставать. все делала за вами. Что может быть? может вам код отправить. может поможете?
@alegzendryxin3338
@alegzendryxin3338 3 роки тому
Уже полная версия
@user-bi1uk7lg6r
@user-bi1uk7lg6r 3 роки тому
Travis Fimmel! Ты ли это?
@user-mj9vt8xt2v
@user-mj9vt8xt2v 3 роки тому
Если у тебя видосик работает в мозиле- качни его от туда и залей на канал и всё будет видно. У меня через мозилу не видно, ток через моб)
@Family-pf4fb
@Family-pf4fb 3 роки тому
уже все полностью загрузилось)
@jonmorrison3431
@jonmorrison3431 2 роки тому
1:03:05 каким образом линии стали возле текста, если ты даже befor and after не задал position: absolute?
@jonmorrison3431
@jonmorrison3431 2 роки тому
Да и вообще у меня все и близко не так работает. У меня афтер и бифор задается сверху и снизу, а не справа и слева от текста. Хотя все записал так же как и у тебя в видео код
@bagrymadatov9795
@bagrymadatov9795 3 роки тому
Вадим вопрос: Почему ролик не сначала? Начинается с шрифтов. Нет объяснения как работать в Фигма и уже часть кода присутствует.
@Morantriol
@Morantriol 3 роки тому
Вот прикол, на ноуте ролик на 2 часа, а на телефоне 3:40
@user-pw2zp6ec4w
@user-pw2zp6ec4w 3 роки тому
Стрим обработается ютюбом, через часов 5+ будет полная версия
@bagrymadatov9795
@bagrymadatov9795 3 роки тому
@@user-pw2zp6ec4w Спасибо за пояснение!
@vadymprokopchuk
@vadymprokopchuk 3 роки тому
все будет
@MagellanLG
@MagellanLG 3 роки тому
Яндекс браузер в помощь
@cleancode4046
@cleancode4046 3 роки тому
Что Вы скажете на комментарий 9pollla Caн ? Это правильно то что он пишет?
@vadymprokopchuk
@vadymprokopchuk 3 роки тому
он мало связан с моим видео) поток сознания)
@cleancode4046
@cleancode4046 3 роки тому
@@vadymprokopchuk Спасибо!
@truestory7487
@truestory7487 3 роки тому
Я сейчас взорвусь почему в папке імейдж нету макета там вобше ничего нету js есть файли css есть файли а имейдж нету. Хельпа ми плеззз...
@hjetwd
@hjetwd 3 роки тому
по БЭМ есть контейнер, а у контейнера есть элементы. Семантика html не влияет на имя css классов, т.е. у нас есть контейнер - nav.mеnu (и элементы контейнера) - - ul.menu_list - - li.menu__item - - a.menu__link - - i.menu__icon - - span.menu__title - - span.menu__subtitle Не надо вложенность элемента из html переносить в css, иначе получится порнография, а не БЭМ =)) - nav.mеnu (контейнер) - - ul.menu__list - - - - li.menu__list-item (твой вариант) - - - - - - a.menu__list-item-link (далее я намеренно усугубляю, по аналогии того, как ты пишешь) - - - - - - - - a.menu__list-item-link-icon - - - - - - - - a.menu__list-item-link-title - - - - - - - - a.menu__list-item-link-subtitle Конструкция с одним тире .menu__list-item подразумевает единый смысл словосочетания, к примеру .color__dark-red цвет: тёмно красный. А если у нас не будет ul внутри nav? nav не запрещает просто ссылки добавить, без всяких списков, это тоже будет семантически верное меню... при чем тут list-item если никакого list нету =) БЭМ дает возможность отвязать css от html (главное отвязать его в своей голове) - мы описываем контейнер и его элементы, а как там html будет - нам по факту пофиг. Есть у нас конструкция [текст] [под текст] и она часто повторяется внутри ссылок по всему сайту? А давайте сделаем из неё контейнер и засунем один контейнер в другой: - nav.mеnu (контейнер menu) - - ul.menu_list (список, его может и не быть) - - li.menu__item (элемент списка, если списка нет, то он может быть, к примеру span.menu__item--header (модификатор заголовок) или div.menu__item--divider (модификатор черта разделитель)) - - a.menu__link (ссылка) + .link (и тут же идет вложенный контейнер ссылка) - - i.link__icon (иконка ссылки) - - span.link__title (текст ссылки) - - span.link__subtitle (подтекст ссылки) з.ы. вообще сейчас пошла (жара) мода на атомарный css, это когда 1 css класс описывает 1 css свойство, т.е. .display-flex { display: flex; } div.display-flex.align-items-center.justify-content-center .... аааа мои глаза!! (кричат простофили, что еще не знакомы с атомарным css) =)))))) з.ы.ы. в css новый формат записи rgb(0 0 0 / 50%) - просто "rgb" без "а" в конце, без запятых и альфа канал через слеш, если он нужен. + у hex тоже есть альфа канал =))) #ff0000CC - красный цвет с 80% прозрачностью =)))
@valdemar2987
@valdemar2987 3 роки тому
Что такого ужасного в том, что в тега li (li - это сокращенно от list item, к слову) есть класс menu__list-item, я так и не понял.
@hjetwd
@hjetwd 3 роки тому
@@valdemar2987 ничего ужасного нет =) бэм просто рекомендует так для удобства чтения и понимания, какой элемент за что отвечает, можно и не следовать рекомендациям, так же как можно открывать бутылку лопатой, а открывашкой копать землю - никто же не поспорит что открывашкой можно копать землю? =))
@valdemar2987
@valdemar2987 3 роки тому
@@hjetwd Аналогия одна из самых лживых вещей, я ведь тоже могу сказать, что следовать БЭМ - это тоже самое что молотком сносить многоэтажку. Но я такой бред писать не буду, и объясню всё по-человечески. Элементу был дан класс __list-item для того, чтобы подчеркнуть, что это именно элемент списка. Здесь и речи не идет об открывании бутылки лопатой, по удобству это эквивалентно menu__item. Но можно было сделать ещё лучше. Понятно, что menu__list не несёт в себе никакого другого смысла, кроме семантически правильного группирования ссылок, поэтому его можно сделать служебным блоком, и добавить ему класс, к примеру nav-list. Тогда будет структура ul .menu__list .nav-list li .nav-list__item a .nav-list__link
@hjetwd
@hjetwd 3 роки тому
@@valdemar2987 ты явно не понял, бэм отвязывает css от структуры html, делает css независимым, модульным. menu__list-item это привязка к html и это не бэм. а если у меня там влезет, мне его тоже menu__list-item обозвать или ему специальное имя придумывать? =) а тут вдруг другой верстальщик забегает и давай своё меню писать, а у него там вообще списка нет, тупо ссылки, и не только ссылки, вообще все теги в кучу смешал, ой беда беда =) Конечно, можно писать CSS как угодно, просто бэмом то, что получилось не надо называть тогда =)
@valdemar2987
@valdemar2987 3 роки тому
@@hjetwd Код в котором элементом списка является что-то кроме li не пройдет валидацию, поэтому тут до БЭМа не дойдет, ошибка ещё раньше. Идем далее. Допустим мы назвали лишки menu__item. Пришел другой верстальщик, удалил список и айтемы, задал этот класс тегу a. Смотрит, а у класса только padding i margin заданы. Что он делает? Заходит в модульный и независимый css, и полностью переписывает его, попутно добавляя нужные для ссылок псевдоклассы :visited i :focus. И да, в моём понимании независимость и модульность css отражается в том, что документ в css плоский и без вложенности, независимо от вложенности в html, любой блок можно использовать в любом месте. А в именах классов наооборот мы отражаем этот html, список называем списком, кнопку - кнопкой, ссылку - ссылкой. По классу видно в какой блок вложен какой элемент. Я сказал всё что хотел, удачи Вам.
@daniilkashapov2127
@daniilkashapov2127 3 роки тому
Под линуксом в фаерфоксе не получается весь стрим посмотреть, как найду решение - отпишу, может кому-нибудь поможет
@timurkhudiyev
@timurkhudiyev 3 роки тому
Чет не обрабатывается видео(( только 2 часа доступны. Во всех браузерах у меня так
@Family-pf4fb
@Family-pf4fb 3 роки тому
уже все ок
@timurkhudiyev
@timurkhudiyev 3 роки тому
@@Family-pf4fb уже посмотрел)
@13rast
@13rast 2 роки тому
я тебя прошу поставь герлянду на задний фон
@vadymprokopchuk
@vadymprokopchuk 2 роки тому
Я ждал Новый год, скоро…
@user-xi4uj1pj6w
@user-xi4uj1pj6w 3 роки тому
А где найти весь стрим это не то
@MagellanLG
@MagellanLG 3 роки тому
Яндекс браузер в помощь
@vadymprokopchuk
@vadymprokopchuk 3 роки тому
он появится
@Reptajel
@Reptajel 3 роки тому
Как быстро придет ответ с макетом?
@Family-pf4fb
@Family-pf4fb 3 роки тому
получили уже? отправляет Вадим раз в 2 дня приблизительно
@vladholoborodko1144
@vladholoborodko1144 3 роки тому
@@Family-pf4fb Добрый вечер, сделал репост, ваши видео самые понимаемые, можете кинуть макет на teftv81@gmail.com , а то ответ не получаю , спасибо
@Family-pf4fb
@Family-pf4fb 3 роки тому
@@vladholoborodko1144 отправим завтра! сори
@yourist530
@yourist530 3 роки тому
Сохраненная трансляция короткая только 2 часа 30мин в начале пропали(
@MagellanLG
@MagellanLG 3 роки тому
Яндекс браузер в помощь
@sni4592
@sni4592 3 роки тому
в яндекс браузере тоже самое @@MagellanLG
@Family-pf4fb
@Family-pf4fb 3 роки тому
уже все загрузилось. Приятного просмотра
@user-kt9gf4ju9p
@user-kt9gf4ju9p 2 роки тому
1:11:00
@abilkhaiyraubekerov7284
@abilkhaiyraubekerov7284 3 роки тому
макет не работает кто знает почему ?
@vadymprokopchuk
@vadymprokopchuk 3 роки тому
работает, попробуйте разные варианты открытия
Как подключать шрифты в 2024
20:53
От 0 до 1
Переглядів 896
Повістки у Києві: «Яке право вони мають забирати всіх мужиків?» #війна #мобілізація #військові
00:41
Слідство.Інфо | Розслідування, репортажі, викриття
Переглядів 1,7 млн
Excited Dog Zooms In and Out of Sliding Door!
00:18
The Pet Collective
Переглядів 8 млн
Responsive web design in 37 minutes + layout. You don’t need Bootstrap!
36:44
Фрілансер по життю
Переглядів 1 млн
6 css свойств которые от тебя скрывают
34:23
От 0 до 1
Переглядів 4,2 тис.