Верстка сайта с нуля, для новичков. Интенсив по верстке, день 1
Vložit
- čas přidán 3. 08. 2020
- Марафон по верстке сайта. За 3 дня полностью сверстаем сайт и сделаем адаптив. Объясню все что делаю, и зачем. Отвечу на вопросы.
Макет - drive.google.com/file/d/1dlNs...
Тема в VSC - плагин Material Theme
Чтобы получить макет для тренировок, делайте репост этого видео в свои соц. сети,
ссылки на репост жду тут: from0to1maket@gmail.com
Все исходники, инструкция и информация в телеграм канале.
Ссылка на телеграм канал:
t.me/from0to1com
Чат верстальщиков:
t.me/chat_from_0_to_1
Написать мне в ВК:
vadimprokopchuk
Написать мне в телеграм:
t.me/silver8light
Отзывы о моем авторском курсе по верстке:
topic-104892258_40476405
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
Спасибо большое. Очень круто очень нравятся Ваши марафоны
Ох, как же я кайфую занимаясь и изучая твою подачу материала! Моё почтение!
Вадим спасибо огромное за твой труд))
Вадос , самый лучший сенсей благодарю тебя за подачу информации и ценю твой труд , ждём новых видео.
Большое спасибо за вашу работу!
Спасибо тебе огромное за старания, - это невероятный труд. Жаль не все верстальщики, которые пытаются подать себя на Ютюбе такие прекрасные люди. Знаний, которые ты мне дал на бесплатных видео хватило, чтобы получить работу мечты - теперь я верстальщик. Спасибо тебе огромное от всей души. Как разгребусь с финансами теперь, обязательно куплю платный курс, чтобы усовершенствовать свои навыки. Еще раз спасибо.
Красава, поздравляю, очень рад что помог тебе в твоем становлении, так держать, дальше больше! Красава!
@@romankemenchezhi7168 Не могу говорить об оплате, но работаю на удаленке.
Вадим спасибо за твой труд.Всех благ тебе.
благодарю
Ещё не смотрел, но авансом лайк. Как только закончу верстать сайт по твоему 7ми часовому видео, вернусь сюда. Тем более Куба у меня ассоциируется со службой в армии...
Отличное видео, пока все получается. Очень доступно. Как раз для нас новичков
Нужны комментарии? Вот комментарий -))) А так спасибо за твое доброе дело, учеба переросла в веселую песню, благодаря твоим марафонам.
Бро ты просто лучший вот реально !! Давай еще для новичков плизз ))
Очень полезные видео, очень полезный канал!)
спасибо
Привет, я только сейчас наткнулся на видео Вадима, может быть у тебя есть возможность найти дополнительный шаблон(про вино который)
Класс) я как раз работаю в турбизнесе) огромное спасибо)
Дякую, Вадиме! Було цікаво і корисно!
Дякую!
Спасибо, Вы добрый человек!!!
спасибо
Охринеть. Ты реально крут!
Вот нормальная подача, а не унылое гавно как 99.9% обучающих программированию на ютуб, под которые засыпаешь. Удачи🤞)
Спасибо за такие классные уроки! Остановился на 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 лучший !
Вадим даже если когда нибуть "ии" инаучится верстать, то вам в полне можно попробовать себя в стендапе или комеди-клабе. А вобще очень грамотная и последовательная подача информации без запугивания крутыми терминами.Респект!!!
Вопрос - почему когда я прописываю изображение в css в body, то он нормально растягивает его на весь экран, а когда я прописываю его в классе, то появляется какая то белая рамка и скролл и при этом эта рамка по сути рамкой не является тк если к примеру через параметры рамки задать ей цвет и размер то появится рамка вокруг изображения а эти белые отступы так и останутся.
чет так и не получилось шрифт подключить Lato
мак ось.
ля, кайфы, а не урок.
Бро спасибо тебе за такую подачу) подписался везде
Видео полное уже, кому еще интересно))
Спасибо за видео!
Возник вопрос по абзацу текста про Кубу: в макете перенос второй строки происходит по другому чем получилось при верстке в этом видео, хотя вроде как шрифт и размеры блока были выставлены как в макете.
Почему так произошло?
Важны ли такие детали при верстке? Бывают ли заказчики недовольные такими небольшими различиями?
Привет, я только сейчас наткнулся на видео Вадима, может быть у тебя есть возможность найти дополнительный шаблон(про вино который)
Сохраненная трансляция короткая
только 2 часа из 3 с половиной
уже 14 часов прошло но все еще нет полной версии
+
Яндекс браузер в помощь
а где можно найти макет, про который вы в начале говорили (бургундия вроде бы)
Если мы не используем картинку как ссылку то почему бы нам в фотошопе не сделать рамку с текстом? Оно ведь также будет изменять свои размеры вместе с картинкой при уменьшении экрана
А мне кажется, что автор не верно сверстал. Ширина картинки 1440рх, соответственно нужно было делать блок задавать ему max-width и в нем уже работать. Да и БЭМ не верно определен был. Читаю комменты и понимаю, что люди вообще не соображают что происходит, их больше веселит слово "вечеринка". Но подача не плоха, детально разжевывал)
Здравствуйте, могу ли я использовать в своем портфолио?
Участвовать в конкурсе для получения макета ещё можно?
Начало 11:41
Подскажите, где ссылка на почту чтобы отправить ссылку где репостила и получить новый макет для практики?
from0to1maket@gmail.com
Обьясните, пожалуйста, как мы поняли, что высота картинки в хедере, на весь экран???
Если у тебя видосик работает в мозиле- качни его от туда и залей на канал и всё будет видно. У меня через мозилу не видно, ток через моб)
уже все полностью загрузилось)
Travis Fimmel! Ты ли это?
а где макет взять ?
Здравствуйте, автор. Мой вопрос к вам - когда вы в одном из видео использовали программу для редактирования кода - VisualStudio Code, то вы по каким-то критериям её выбирали? Я слышал про Notepad++ и SublimeText, а также Avocode. Скажите, всё ли это является одним и тем(по-сути) или это разные вещи и по-разному используются? Я просто чайник совсем как-бы)
И ещё, хотел бы отметить какие классные у вас видео, хоть я не успел все просмотреть. Очень информативно и полезно, особенно для таких людей как я
Качественно верстать можно в любой из перечисленных программ, но vs code выигрывает по удобству и количеству важных расширений, значительно упрощающих процесс верстки и позволяющих верстать быстрее. Лучше сразу настроить сборку vs code.
@@whatsunderisabove А для чего нужен Авокадо тогда? Я не очень врубаюсь в их различия
@@fuji6410 насколько я знаю avacode это такой шикарный сервис, куда можно закинуть макет в любом формате и комфортно работать с ним. Но сервис платный.
Как скачать Макет или войти в нее надо? Я пробовал через винрар архивировать на рабочий стол но все же не получилось открыть данную папку. Ввел название Макета в Figma там тоже не находит
Как голуби " УРЛ-УРЛ " ))))))))))))))))))))))))))))))))))))
Уже полная версия
Здравствуйте. menu__list в css не работает. не хочет меню по середине вставать. все делала за вами. Что может быть? может вам код отправить. может поможете?
1:03:05 каким образом линии стали возле текста, если ты даже befor and after не задал position: absolute?
Да и вообще у меня все и близко не так работает. У меня афтер и бифор задается сверху и снизу, а не справа и слева от текста. Хотя все записал так же как и у тебя в видео код
Что Вы скажете на комментарий 9pollla Caн ? Это правильно то что он пишет?
он мало связан с моим видео) поток сознания)
@@vadymprokopchuk Спасибо!
Вадим вопрос: Почему ролик не сначала? Начинается с шрифтов. Нет объяснения как работать в Фигма и уже часть кода присутствует.
Вот прикол, на ноуте ролик на 2 часа, а на телефоне 3:40
Стрим обработается ютюбом, через часов 5+ будет полная версия
@@user-pw2zp6ec4w Спасибо за пояснение!
все будет
Яндекс браузер в помощь
Под линуксом в фаерфоксе не получается весь стрим посмотреть, как найду решение - отпишу, может кому-нибудь поможет
Чет не обрабатывается видео(( только 2 часа доступны. Во всех браузерах у меня так
уже все ок
@@Family-pf4fb уже посмотрел)
я тебя прошу поставь герлянду на задний фон
Я ждал Новый год, скоро…
Я сейчас взорвусь почему в папке імейдж нету макета там вобше ничего нету js есть файли css есть файли а имейдж нету. Хельпа ми плеззз...
А где найти весь стрим это не то
Яндекс браузер в помощь
он появится
Как быстро придет ответ с макетом?
получили уже? отправляет Вадим раз в 2 дня приблизительно
@@Family-pf4fb Добрый вечер, сделал репост, ваши видео самые понимаемые, можете кинуть макет на teftv81@gmail.com , а то ответ не получаю , спасибо
@@vladholoborodko1144 отправим завтра! сори
Сохраненная трансляция короткая
только 2 часа 30мин в начале пропали(
Яндекс браузер в помощь
в яндекс браузере тоже самое
@@MagellanLG
уже все загрузилось. Приятного просмотра
макет не работает кто знает почему ?
работает, попробуйте разные варианты открытия
1:11:00
по БЭМ есть контейнер, а у контейнера есть элементы. Семантика 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, список называем списком, кнопку - кнопкой, ссылку - ссылкой. По классу видно в какой блок вложен какой элемент.
Я сказал всё что хотел, удачи Вам.