Верстка сайта с нуля, для новичков. Интенсив по верстке, день 1
Марафон по верстке сайта. За 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
Спасибо большое. Очень круто очень нравятся Ваши марафоны
Вадим спасибо огромное за твой труд))
Большое спасибо за вашу работу!
Ох, как же я кайфую занимаясь и изучая твою подачу материала! Моё почтение!
Вадос , самый лучший сенсей благодарю тебя за подачу информации и ценю твой труд , ждём новых видео.
Отличное видео, пока все получается. Очень доступно. Как раз для нас новичков
Бро спасибо тебе за такую подачу) подписался везде
Вадим спасибо за твой труд.Всех благ тебе.
@vadymprokopchuk
3 жыл бұрын
благодарю
Класс) я как раз работаю в турбизнесе) огромное спасибо)
Охринеть. Ты реально крут!
Хороший видео урок!!!👍👍👍
Спасибо большое Вам!
классно как всегда
Спасибо за такие классные уроки! Остановился на 3:06:16
Бро ты просто лучший вот реально !! Давай еще для новичков плизз ))
Нужны комментарии? Вот комментарий -))) А так спасибо за твое доброе дело, учеба переросла в веселую песню, благодаря твоим марафонам.
Вадим спасибо братан за верстку и за мотвацию!!!!!!!
Лайк и комментарий не глядя!
Ты лучший))
ТОПОВЫЙ КОНТЕНТ !!!!!!!!!!!!!!!!!!!!
Спасибо огромное !
Ещё не смотрел, но авансом лайк. Как только закончу верстать сайт по твоему 7ми часовому видео, вернусь сюда. Тем более Куба у меня ассоциируется со службой в армии...
спасибо за видео
Большое спасибо!
Спасибо!
Спасибо, Вы добрый человек!!!
@vadymprokopchuk
3 жыл бұрын
спасибо
Вадим топппп!!! да и еще щедрый чувак))
Дякую, Вадиме! Було цікаво і корисно!
@vadymprokopchuk
3 жыл бұрын
Дякую!
Очень полезные видео, очень полезный канал!)
@vadymprokopchuk
3 жыл бұрын
спасибо
@oooooowww
Жыл бұрын
Привет, я только сейчас наткнулся на видео Вадима, может быть у тебя есть возможность найти дополнительный шаблон(про вино который)
Vadim ti лучший !
Дал дал Сверстал от души!
Вот нормальная подача, а не унылое гавно как 99.9% обучающих программированию на ютуб, под которые засыпаешь. Удачи🤞)
Лучший
Спасибо тебе огромное за старания, - это невероятный труд. Жаль не все верстальщики, которые пытаются подать себя на Ютюбе такие прекрасные люди. Знаний, которые ты мне дал на бесплатных видео хватило, чтобы получить работу мечты - теперь я верстальщик. Спасибо тебе огромное от всей души. Как разгребусь с финансами теперь, обязательно куплю платный курс, чтобы усовершенствовать свои навыки. Еще раз спасибо.
@vadymprokopchuk
3 жыл бұрын
Красава, поздравляю, очень рад что помог тебе в твоем становлении, так держать, дальше больше! Красава!
@strangechannel4589
3 жыл бұрын
@@romankemenchezhi7168 Не могу говорить об оплате, но работаю на удаленке.
Чую вытащит меня Вадим с завода, благодарю за знания.
@DmitriiBozan
Жыл бұрын
если я дам свой телеграм, то можешь прислать етот сайт?
Отличнейший контент! Спасибо большое. Курсов/марафонов бы еще по JS, цены бы тебе не было)))
ля, кайфы, а не урок.
Вадим даже если когда нибуть "ии" инаучится верстать, то вам в полне можно попробовать себя в стендапе или комеди-клабе. А вобще очень грамотная и последовательная подача информации без запугивания крутыми терминами.Респект!!!
Спасибо за труд!Было бы круто и для продвинутых снять интенсив))
@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
3 жыл бұрын
@@fuji6410 ,bəli azərbaycanlıyam və Azərbaycanda yaşayıram)Çox sağ olun!
@fuji6410
3 жыл бұрын
@@nargizaliyeva9743 Frontend-proqrammistliyi orgenirsiz?
@oooooowww
Жыл бұрын
Привет, я только сейчас наткнулся на видео Вадима, может быть у тебя есть возможность найти дополнительный шаблон(про вино который)
Омайгаш, да вы , сэр, просто мастер своего дела. Высококласный наёмник
Видео полное уже, кому еще интересно))
Начало 11:41
чет так и не получилось шрифт подключить Lato мак ось.
Вопрос - почему когда я прописываю изображение в css в body, то он нормально растягивает его на весь экран, а когда я прописываю его в классе, то появляется какая то белая рамка и скролл и при этом эта рамка по сути рамкой не является тк если к примеру через параметры рамки задать ей цвет и размер то появится рамка вокруг изображения а эти белые отступы так и останутся.
Здравствуйте, автор. Мой вопрос к вам - когда вы в одном из видео использовали программу для редактирования кода - VisualStudio Code, то вы по каким-то критериям её выбирали? Я слышал про Notepad++ и SublimeText, а также Avocode. Скажите, всё ли это является одним и тем(по-сути) или это разные вещи и по-разному используются? Я просто чайник совсем как-бы) И ещё, хотел бы отметить какие классные у вас видео, хоть я не успел все просмотреть. Очень информативно и полезно, особенно для таких людей как я
@whatsunderisabove
3 жыл бұрын
Качественно верстать можно в любой из перечисленных программ, но vs code выигрывает по удобству и количеству важных расширений, значительно упрощающих процесс верстки и позволяющих верстать быстрее. Лучше сразу настроить сборку vs code.
@fuji6410
3 жыл бұрын
@@whatsunderisabove А для чего нужен Авокадо тогда? Я не очень врубаюсь в их различия
@whatsunderisabove
3 жыл бұрын
@@fuji6410 насколько я знаю avacode это такой шикарный сервис, куда можно закинуть макет в любом формате и комфортно работать с ним. Но сервис платный.
а где можно найти макет, про который вы в начале говорили (бургундия вроде бы)
Уже полная версия
Спасибо за видео! Возник вопрос по абзацу текста про Кубу: в макете перенос второй строки происходит по другому чем получилось при верстке в этом видео, хотя вроде как шрифт и размеры блока были выставлены как в макете. Почему так произошло? Важны ли такие детали при верстке? Бывают ли заказчики недовольные такими небольшими различиями?
@oooooowww
Жыл бұрын
Привет, я только сейчас наткнулся на видео Вадима, может быть у тебя есть возможность найти дополнительный шаблон(про вино который)
А мне кажется, что автор не верно сверстал. Ширина картинки 1440рх, соответственно нужно было делать блок задавать ему max-width и в нем уже работать. Да и БЭМ не верно определен был. Читаю комменты и понимаю, что люди вообще не соображают что происходит, их больше веселит слово "вечеринка". Но подача не плоха, детально разжевывал)
Если мы не используем картинку как ссылку то почему бы нам в фотошопе не сделать рамку с текстом? Оно ведь также будет изменять свои размеры вместе с картинкой при уменьшении экрана
Обьясните, пожалуйста, как мы поняли, что высота картинки в хедере, на весь экран???
Здравствуйте, могу ли я использовать в своем портфолио?
Travis Fimmel! Ты ли это?
Участвовать в конкурсе для получения макета ещё можно?
Если у тебя видосик работает в мозиле- качни его от туда и залей на канал и всё будет видно. У меня через мозилу не видно, ток через моб)
@Family-pf4fb
3 жыл бұрын
уже все полностью загрузилось)
Сохраненная трансляция короткая только 2 часа из 3 с половиной
@damirmaratov2861
3 жыл бұрын
уже 14 часов прошло но все еще нет полной версии
@yourist530
3 жыл бұрын
+
@MagellanLG
3 жыл бұрын
Яндекс браузер в помощь
Как голуби " УРЛ-УРЛ " ))))))))))))))))))))))))))))))))))))
Подскажите, где ссылка на почту чтобы отправить ссылку где репостила и получить новый макет для практики?
@Family-pf4fb
3 жыл бұрын
from0to1maket@gmail.com
Как скачать Макет или войти в нее надо? Я пробовал через винрар архивировать на рабочий стол но все же не получилось открыть данную папку. Ввел название Макета в Figma там тоже не находит
а где макет взять ?
1:03:05 каким образом линии стали возле текста, если ты даже befor and after не задал position: absolute?
@jonmorrison3431
2 жыл бұрын
Да и вообще у меня все и близко не так работает. У меня афтер и бифор задается сверху и снизу, а не справа и слева от текста. Хотя все записал так же как и у тебя в видео код
1:11:00
я тебя прошу поставь герлянду на задний фон
@vadymprokopchuk
2 жыл бұрын
Я ждал Новый год, скоро…
Здравствуйте. menu__list в css не работает. не хочет меню по середине вставать. все делала за вами. Что может быть? может вам код отправить. может поможете?
по БЭМ есть контейнер, а у контейнера есть элементы. Семантика 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
3 жыл бұрын
Что такого ужасного в том, что в тега li (li - это сокращенно от list item, к слову) есть класс menu__list-item, я так и не понял.
@hjetwd
3 жыл бұрын
@@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
3 жыл бұрын
@@valdemar2987 ты явно не понял, бэм отвязывает css от структуры html, делает css независимым, модульным. menu__list-item это привязка к html и это не бэм. а если у меня там влезет, мне его тоже menu__list-item обозвать или ему специальное имя придумывать? =) а тут вдруг другой верстальщик забегает и давай своё меню писать, а у него там вообще списка нет, тупо ссылки, и не только ссылки, вообще все теги в кучу смешал, ой беда беда =) Конечно, можно писать CSS как угодно, просто бэмом то, что получилось не надо называть тогда =)
@valdemar2987
3 жыл бұрын
@@hjetwd Код в котором элементом списка является что-то кроме li не пройдет валидацию, поэтому тут до БЭМа не дойдет, ошибка ещё раньше. Идем далее. Допустим мы назвали лишки menu__item. Пришел другой верстальщик, удалил список и айтемы, задал этот класс тегу a. Смотрит, а у класса только padding i margin заданы. Что он делает? Заходит в модульный и независимый css, и полностью переписывает его, попутно добавляя нужные для ссылок псевдоклассы :visited i :focus. И да, в моём понимании независимость и модульность css отражается в том, что документ в css плоский и без вложенности, независимо от вложенности в html, любой блок можно использовать в любом месте. А в именах классов наооборот мы отражаем этот html, список называем списком, кнопку - кнопкой, ссылку - ссылкой. По классу видно в какой блок вложен какой элемент. Я сказал всё что хотел, удачи Вам.
Чет не обрабатывается видео(( только 2 часа доступны. Во всех браузерах у меня так
@Family-pf4fb
3 жыл бұрын
уже все ок
@timurkhudiyev
3 жыл бұрын
@@Family-pf4fb уже посмотрел)
Под линуксом в фаерфоксе не получается весь стрим посмотреть, как найду решение - отпишу, может кому-нибудь поможет
Сохраненная трансляция короткая только 2 часа 30мин в начале пропали(
@MagellanLG
3 жыл бұрын
Яндекс браузер в помощь
@sni4592
3 жыл бұрын
в яндекс браузере тоже самое @@MagellanLG
@Family-pf4fb
3 жыл бұрын
уже все загрузилось. Приятного просмотра
Вадим вопрос: Почему ролик не сначала? Начинается с шрифтов. Нет объяснения как работать в Фигма и уже часть кода присутствует.
@Morantriol
3 жыл бұрын
Вот прикол, на ноуте ролик на 2 часа, а на телефоне 3:40
@user-pw2zp6ec4w
3 жыл бұрын
Стрим обработается ютюбом, через часов 5+ будет полная версия
@bagrymadatov9795
3 жыл бұрын
@@user-pw2zp6ec4w Спасибо за пояснение!
@vadymprokopchuk
3 жыл бұрын
все будет
@MagellanLG
3 жыл бұрын
Яндекс браузер в помощь
Что Вы скажете на комментарий 9pollla Caн ? Это правильно то что он пишет?
@vadymprokopchuk
3 жыл бұрын
он мало связан с моим видео) поток сознания)
@cleancode4046
3 жыл бұрын
@@vadymprokopchuk Спасибо!
А где найти весь стрим это не то
@MagellanLG
3 жыл бұрын
Яндекс браузер в помощь
@vadymprokopchuk
3 жыл бұрын
он появится
Я сейчас взорвусь почему в папке імейдж нету макета там вобше ничего нету js есть файли css есть файли а имейдж нету. Хельпа ми плеззз...
Как быстро придет ответ с макетом?
@Family-pf4fb
3 жыл бұрын
получили уже? отправляет Вадим раз в 2 дня приблизительно
@vladholoborodko1144
3 жыл бұрын
@@Family-pf4fb Добрый вечер, сделал репост, ваши видео самые понимаемые, можете кинуть макет на teftv81@gmail.com , а то ответ не получаю , спасибо
@Family-pf4fb
3 жыл бұрын
@@vladholoborodko1144 отправим завтра! сори
макет не работает кто знает почему ?
@vadymprokopchuk
3 жыл бұрын
работает, попробуйте разные варианты открытия