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