![[DELETED]](http://yt3.ggpht.com/ytc/AIdro_lPzwNJIwW1k0s0Pq5m5acZMdMZ1WQ2bze8T2FvmSmc-8rjJdg=s48-c-k-c0x00ffffff-no-rj)
ฝัง
- เผยแพร่เมื่อ 21 ก.ค. 2019
- Скачать материалы урока - bit.ly/3YIaWVM
Это второе видео из серии роликов по вёрстке сайта с нуля с использованием графического редактора Figma. В нём мы начнём вёрстку макета и более детально изучим интерфейс Figma. Вы научитесь вырезать объекты, измерять отступы, расстояния и получать данные о свойствах тех или иных элементов макета.
Ссылка на макет - www.figma.com/file/ClPSP7KCU1...
Паблик телеграм - t.me/step_to_web
Если вам понравилось это видео, не забывайте подписываться на канал, ставить пальцы вверх и писать свои комментарии!
Друзья, когда макет в фигме открыт у многих людей, вы можете столкнуться с его зависаниями и некорректной работой. Пожалуйста, перейдите к списку всех просмотренных макетов в фигме, выделите макет и нажмите кнопочку duplicate, как показано на скрине. Тем самым вы склонируете проект к себе и будете его единственным пользователем (без лагов и зависаний)
prnt.sc/1ckk0nt
Не удается получить доступ к сайтуСоединение сброшено.
@@ya_aan попробуйте попозже
А нельзя вместо того что-бы обернуть heade__logo и heder__nav ещё в один DIV , просто присвоить ещё один класс DIV-у с классом wrapper?? Я новичёк только учусь верстать и интересно просто можно ли это обойти таким образом , и будет ли такой вариант решения правильным????
а когда будет еще разбор макетов?:3
@@ollielapka5318 я больше не веду этот канал, поэтому, к сожалению, не предвидится новых роликов
Мне кажется ты единственный, кто объясняет доступно, без воды.
Спасибо, желаю удачи в развитии канала !
P.S. А я пошел учиться у тебя дальше :)
Спасибо!
Превосходные уроки, автор объясняет всё максимально доступно(что, как, зачем и почему), вопросов после просмотра не возникает. Речь четкая, голос приятный.
Спасибо)
Друг, спасибо тебе за твои уроки!
Практически никогда не пишу комменты-ибо лень, но тут коммент+лайк однозначно!!!
Мне 24 (учился на программиста, но затем пошел работать не по специальности - так сложились обстоятельства),сейчас решил вернуться в программирование и по твоим урокам прогресс идет с бешеной скоростью.
Честно скажу, преподы в универе не объясняли так как ты, за что отдельная тебе благодарность!
Сейчас планирую освоить в кратчайшее время html+css+js+webpack+react(а там может быть и Native) и на джуна во фронт.
Огромное тебе спасибо, не забрасывай канал! Делаешь годноту !
Очень приятно читать такие комментарии - вперёд, всё получится!)
Если не секрет как успехи? Тоже начинаю учиться на джуна во фронт)
Я ненавижу программировать но учусь потому что хочу зарабатывать нормальные деньги
@@user-cw9ev9dq4v , если так, то ты забросишь это дело рано или поздно. Учить нужно много, хорошие деньги не платят просто так. А без желания, а тем более с нежеланием, далеко не уедешь. Денежных профессий хватает, на программировании мир клином не сошелся.
@@schizophrenic5658 как у вас там дела
Лучших русскоязычных уроков по верстке из фигмы ещё не встречал, лайк и подписка
Спасибо!
Смотрю уроки в 2022, всё ещё супер актуально, спасибо Автору! Классная подача материала, всё понятно, всё по делу.
Дружище, как проходит твое обучение?
@@nefersestnefersest9747 отлично, изучил весь learnjs, webpack, TS, взялся за реакт
@@user-jd7ub3tq2b нашел работу?
@@nefersestnefersest9747 В процессе, после февраля с этим большие проблемы, вакансий для джунов мизер. Но несколько тестовых выполнил, и на пару собесов в итоге попал. Ничего сверхъестественного не требуют, у меня сложилось впечатление, что единственный пробел, который мне осталось закрыть, это фреймворк. В принципе, сейчас этим активно занимаюсь
@@user-jd7ub3tq2b Молодец! Спасибо за так сказать такую мотивацию) как много уделял времени учебе?
Не устану благодарить!Шикарный урок! Очень много моментов разобрали и интересных фишек показали, без которых современное сайтостроение просто нельзя представить. Все доступно и понятно! Еще раз спасибо!
Да прошел год как вышло видео!!! Но видео божественно. Я полный 0 в html, но тут настолько все понятно + я оставляю себе коменты в css чуть ли не под каждым блоком.
Спасибо огромное!
Пожалуйста!
Смотрю и учусь тому, как качественно делать видеоуроки. В этом смысле данное видео просто безупречно.
Ну и начинающим настоятельно рекомендую, этот канал для вас - просто кладезь знаний и опыта верстки.
Спасибо!
Шикарные уроки! Столько всего нового и последовательно узнала. Спасибо огромное!
Пожалуйста!)
Превосходные уроки, спасибо тебе большое!
Пожалуйста!
Чувак, ты красавчик! Спасибо за информацию! Грамотная речь и без воды. Продолжай, не останавливайся.
Спасибо!
Спасибо большое за такой прекрасный проект и подачу материала. Продолжай в том же духе 😀😀
Спасибо Вам за видео! Супер подача!
Лучший!
Тупо лучший, на Ютубе более полезной инфы не находил
Спасибо❤
Особенно для новичка
Очень хорошая подача материала, хорошо поставленная речь, и приятный голос. В обучении важно все, спасибо вам большое за ваши старания. Желаю успехов во всем!
спасибо за видео, совсем недавно увлекся web-версткой, и очень рад, что наткнуля на столь понятные и интересные ролики :)
Пожалуйста!
Огроменное спасибо, особенно за музончик на фоне) с ним процесс норм идёт!
Пожалуйста!
Видео очень подробное, СПАСИБО!
Жду разбор вёрстки сложных сайтов)
Уроки супер, спасибо!!!
Спасибо тебе, очень наглядно и понятно!
Круто, продолжай в том же духе!
Ты делаешь крутые видосы! Моё почтение!
Спасибо
просто супер! Спасибо большое за такие видео.
Пожалуйста :)
Вот это да, отличный урок, спасибо огромное за труд
Рад, что полезно :)
спасибо за урок! всё думал с чего начать. Помог :DDD
БОЛЬШОЕЕЕ СПАСИБОО! Ты лучший учитель!!!!
Офигенный урок,спасибо 👍
Пожалуйста!
@@steptoweb503 все отлично кроме одного пж не ставь музыку на фон на сон тянет от таких мелодии!
@@ilez.5920 +1, хотя оставить можно, но чтобы совсем тихо - это будет лучший вариант ;)
Просто лучший, буду тебя советовать всем кто заинтересуется it
Спасибо, есть моменты что себе взял на вооружение. Хорошо так же подаёшь материал. Лойс с меня)
Спасибо)
Спасибо за понятное объяснение
Кайф. Все понятно и по полочкам. Надеюсь дойдем до многостраничных и сложных сайтов, на ютубе много уроков по верстке лендингов, но очень мало сложной верстки.
Да, вполне можно будет - от простого к сложному ;)
Ваааауч, вот это подача материала!!!!
Огромнейшее спасибо за уроки!!!! Все так легко, понятно и доступно объясняется.
P.S. и голос очень приятный ;)
Буквально на днях решил начать изучать веб дизайн, соответственно начал искать основы верстки. Наткнулся на "Верстка сайта с нуля из Figma для начинающих #1", на одном дыхании посмотрел и это) очень доступно, очень понятно и очень интересно) спасибо за контент!
Рад, что полезно
лайк и подписка! лучшее что нашёл по верстке
уроки топчик, благодарю)
спасибо за отличные уроки!
Спасибо Вам за урок, все понятно и очень интересно
Лучшие видосы на эту тему.
Спасибо)
Огромное спасибо за видео! Очень помогли!
Крутая фишка с фоном, а то у меня с этим какая-то напасть) Буду пользоваться твоими уроками, много отличных советов!
Отлично чувак, респект!
очень подробно и доступно!
спасибо большое за видео! всё очень понятно и доступно!
Пожалуйста)
Молодец, очень интересно)
Спасибо за ваш труд очень классный обвинение
Спасибо большое за урок)))
Спасибо тебе добрый человек!)
Пожалуйста :)
Спасибо за топ-контент.
Спасибо за качество!
;)
Все очень классно )
Большое спасибо!!!
Крутой видос!!! Спасибо!!!
все снимают нудные пятиминутки, а тут пол часа пролетели как 5 минут, очень круто объясняешь, спасибо)
Рад слышать)
учитель от Бога. Как здорово что Вы есть и делитесь знаниями. Всех благ.
Спасибо, приятно читать! Скоро будут новинки ;)
@@steptoweb503 извините что так поздно пишу. Вопросю Будут ли или есть ли у Вас видео о БЕМ?
@@Mireem_Om нет, но возможно будут
достойный урок получился
Спасибо!!! Только сегодня думал - как научиться верстать
Рад быть полезным
А сегодня все думают - как научиться верстать.
@@justspartak не совсем правильно выразился. Много знаю теории, верстал фрагменты, довёрстывал до нужного результата, адаптировал. Но опыта вёрстки проекта от и до нет. Наверно лучше устроиться стажёром. А то, чувствую, долго так учиться сам буду.
@@user-gb9us1ou5t нужно просто больше практики в верстке. Поначалу все будет казаться
слишком сложным. Но все премудрости верстки хорошо познаются в практике, и лучше отлаживается в памяти познание html и CSS.
Например, я практиковался просто копировал понравившиеся сайты. Даже более, делал скриншот и рисовал в фотошопе макет, а потом всё это дело верстал. Тоже хорошая практика!
Хотя и не скажу, что я какой-то супер-пупер верстальщик)) Сам ещё в процессе обучения.😊
Верстка для меня сейчас сложнее дается, чем когда-то изучение языков программирования C/C++, вместе с PHP. Всё же верстка - это даже не программирование, а нечто иное, чем программирование, со своими особенностями, правилами, нюансами и т.д.
абсолютно всё получилось!!!!!!!! спасибо большое автор.
я четыре месяца пытался, не у кого не чего не получалось в точь точь, атут прям у меня всё вышло!
всё писал сам, теперь буду у вас только учиться, жду ещё уроков!!!!!!!!!!
я сидел около часу делал повторял, и всё получилось
Круто, я рад :)
@@steptoweb503 ещё будут верстки ?
@@time4769 да, будут
@@steptoweb503 ну все ,ставь ,чаечек. Тогда я у тебя на долго
Спасибо вам 🥰
хороший канал!
Круть,спс!
Лови подписку). Приятный голос.
Словил!
Красавчик. Скоро много подписчиков приведу на твой канал)).
Это как это? :)
Ты меня спас брр!
Боже! Спасибо ВАМ!!!!!
Пожалуйста)
кучу раз проходил мимо твоих видео пока фигму учил а теперь вот у тебя подписан ,сайт под ключ удобнее делать ,свой же дизайн проще сверстать
Рад, что полезно!
уоу, великолепный урок, я из 2021)))
спасибо!
Классно объясняешь!
Спасибо!
CSS Lab Когда новые выпуски? У тебя дар объяснять с технического на человеческий)
@@muratbeysheev9106 Выходят по мере сил и свободного времени)
Спасибо.
СПАСИБО 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍
большое спасибо
Здравствуйте! Очень нравятся ваши уроки) Есть вопрос)
hi все супер ). маленькая просьба когда кодиш чуть крупней шрифт на вс сделай пожалуйста)
Я обычно делаю, но иногда забываю, да)
Привет, хотел бы спросить, почему этот макет сделан под максимальное расширение 1440 px , на Full hd экранах картинка выглядит растянутой, но в общем очень классно объясняешь.
Большой молодец. И материал в принципе хорошо преподносишь, однако, по-моему было бы здорово объяснять все свойства которые пишешь, в основном они создают трудности (для новичков), например, line-height и display: flex. Но лайк точно заслужено. Есть несколько дельных вещей про которые я не слышал раньше.
Боюсь если я буду объяснять каждое свойство - ролик не уложится и в 5 часов)
Вопрос, можно ли вместо создания нового div "head__wrapper" (на 16:38) добавить к div с классом wrapper еще и класс head__wrapper ? Почему так не делают?
Спасибо за уроки, действительно очень полезно, но вот хотелось бы еще урок по svg контенту на странице (анимации и перенос на страницу). Сам я веб дизайнер без сильных навыков в вертске, есть макеты состоящие преимущественно из вектора в Figma. С радостью бы предоставил для урока!
SVG - большая тема. Пока не планировал снимать всё же
Хочу подробнее изучить верстку, поэтому периодически отвлекаюсь на гугл=) А так материал огонь! Спасибо
Смотрю уроки в 2023, всё ещё супер актуально, спасибо)))
Спасибо вобше удар . !!!!!
Красавчик, а можешь ещё сделать видео по vscode со своими настройками
Возможно будет)
все таки решил тоже скачать те шрифты на всякий случай
Класс зарегался, заварил чаю, сел(что немало важно) и... сосед решил запаролить wi-fi. 👍
Оставлю комментарий. Спасибо
Пожалуйста, но вроде как на продвижение влияют комментарии только от 150 символов :(
@@steptoweb503 Не ну раз такая тема, то и 150 символов не жалко. Это всего лишь-пару предложений. И раз я уже начал, то можно пруф на информацию о 150 символах? Будет ли видео об адаптивности? Как там бутстрап?
@@meta40k Пруфов нет, так как слышал это от других блогеров :) Адаптивность будет ближе к концу плейлиста ;) Бутстрап не нужен! Никогда его не юзал и вам мне советую, если вы разрабатываете кастомные проекты, а не штампуете одинаковые лендинги!
Разве что сетку можно взять оттуда и пару виджетов, типа аккордеона
Отличный урок!
Вопрос - flex можно заменить gridАми ?
Ну, можно. Но зачем? Флексы - отличный инструмент и в большинстве случаев его достаточно.
короче у меня так обстоят дела с бэкграундом в конце,изображение не появляется,НО я добавил помимо бэка,но рипита и всего прочего еще параметр под названием дисплей блок и о чудо картинка теперь показывается) можно ли так оставить?
Уроки класные!!! Грамотно и понятно. У меня в секции intro изображение не загружалась, когда скачала по ссылке ваш оригинальный файл увидела что там паддинги добавлены, когда добавила себе, то загрузилась. Теперь думаю, почему.
Нашла, вместо vh поставила hv. Невнимательность, увы.
Для лишек можно же использовать атрибут "gap" в CSS, так как они являются flex-элементами, разве нет?
Отличные уроки! Спасибо вам! Подскажите пожалуйста, у меня в header внизу всего контента идет полоса как декорация, как ее установить? Ставлю в хедер, красится весь хедер, ставлю в боди, вся навигация уезжает ниже полоски....
Просто сделайте отдельный блок и покрасьте его или через псевдоэлемент
Чётко ничего не понял но продолжу пересматривать все видео пока не пойму))))
Что ж, успехов!
Доброго дня. Вопрос:
Меню навигации после применения
position: fixed;
top: 0;
left: 0;
width: 100%
весь текст съехал влево, за рамки экрана браузера
плюс, цвет меню навигации в белый не красится, оставаясь стандартным синим для ссылок
очень талантливо преподаете.
Автор, подскажи, новичкам растаскивать по кусочкам надо или все отдельно(в 1 условном формате = в условном любом шаблоне-проекте)? Все слои в 1 файле?
Какие слои?
Как еще можно картинку спрятать под header, если ширина макета ограничена, а header есть дополнительный фон?
А что потом делать с дизайном фигма. Как он переносится на платформу или как делается экспорт шаблона
Привет, щас у меня путаница в присвоения свойств, например внутренний отступ не знаю какому родителю присвоить правильнее, разницы в отображении нету но путаница возникает, смотря это урок устаканивается вроде, но может есть инструкция как это все организовывать правильно!?
Привет, подскажи пожалуйста. Почему на 16:28 тег не помещен в блок wrapper ? Ведь header же тоже как и остальной контент находится в рамках max-width: 1060px; + margin: 0 auto;. Почему блок wrapper находится в теге header ?
и тут уже наш логотип и навигация
Вот таким образом можно написать или это не правильно будет, почему ? Извините за много букв. Буду признателен за ответ. Спасибо большое.
Если я правильно понял ваш вопрос, можно сделать и так и так)
Когда в .header задаю параметры для прикрепления элементов .header вверху, то ссылки перекрывают лого, тоесть весь лист ссылок прикрелпяеться к левой стороне перекрывая лого(
если у вас рядом со словами черные точки, в css в header__item впишите, list-style-type:none;