Верстка сайта с нуля из Figma для начинающих #2 

Друзья, когда макет в фигме открыт у многих людей, вы можете столкнуться с его зависаниями и некорректной работой. Пожалуйста, перейдите к списку всех просмотренных макетов в фигме, выделите макет и нажмите кнопочку duplicate, как показано на скрине. Тем самым вы склонируете проект к себе и будете его единственным пользователем (без лагов и зависаний) prnt.sc/1ckk0nt

Мне кажется ты единственный, кто объясняет доступно, без воды. Спасибо, желаю удачи в развитии канала ! P.S. А я пошел учиться у тебя дальше :)

Друг, спасибо тебе за твои уроки! Практически никогда не пишу комменты-ибо лень, но тут коммент+лайк однозначно!!! Мне 24 (учился на программиста, но затем пошел работать не по специальности - так сложились обстоятельства),сейчас решил вернуться в программирование и по твоим урокам прогресс идет с бешеной скоростью. Честно скажу, преподы в универе не объясняли так как ты, за что отдельная тебе благодарность! Сейчас планирую освоить в кратчайшее время html+css+js+webpack+react(а там может быть и Native) и на джуна во фронт. Огромное тебе спасибо, не забрасывай канал! Делаешь годноту !

Смотрю уроки в 2022, всё ещё супер актуально, спасибо Автору! Классная подача материала, всё понятно, всё по делу.

Превосходные уроки, автор объясняет всё максимально доступно(что, как, зачем и почему), вопросов после просмотра не возникает. Речь четкая, голос приятный.

Не устану благодарить!Шикарный урок! Очень много моментов разобрали и интересных фишек показали, без которых современное сайтостроение просто нельзя представить. Все доступно и понятно! Еще раз спасибо!

Да прошел год как вышло видео!!! Но видео божественно. Я полный 0 в html, но тут настолько все понятно + я оставляю себе коменты в css чуть ли не под каждым блоком. Спасибо огромное!

Лучших русскоязычных уроков по верстке из фигмы ещё не встречал, лайк и подписка

Очень хорошая подача материала, хорошо поставленная речь, и приятный голос. В обучении важно все, спасибо вам большое за ваши старания. Желаю успехов во всем!

Шикарные уроки! Столько всего нового и последовательно узнала. Спасибо огромное!

Смотрю и учусь тому, как качественно делать видеоуроки. В этом смысле данное видео просто безупречно. Ну и начинающим настоятельно рекомендую, этот канал для вас - просто кладезь знаний и опыта верстки.

Спасибо большое за такой прекрасный проект и подачу материала. Продолжай в том же духе 😀😀

Чувак, ты красавчик! Спасибо за информацию! Грамотная речь и без воды. Продолжай, не останавливайся.

Ваааауч, вот это подача материала!!!! Огромнейшее спасибо за уроки!!!! Все так легко, понятно и доступно объясняется. P.S. и голос очень приятный ;)

спасибо за видео, совсем недавно увлекся web-версткой, и очень рад, что наткнуля на столь понятные и интересные ролики :)

Видео очень подробное, СПАСИБО! Жду разбор вёрстки сложных сайтов)

Буквально на днях решил начать изучать веб дизайн, соответственно начал искать основы верстки. Наткнулся на "Верстка сайта с нуля из Figma для начинающих #1", на одном дыхании посмотрел и это) очень доступно, очень понятно и очень интересно) спасибо за контент!

Лучший! Тупо лучший, на Ютубе более полезной инфы не находил Спасибо❤ Особенно для новичка

Крутая фишка с фоном, а то у меня с этим какая-то напасть) Буду пользоваться твоими уроками, много отличных советов!

Кайф. Все понятно и по полочкам. Надеюсь дойдем до многостраничных и сложных сайтов, на ютубе много уроков по верстке лендингов, но очень мало сложной верстки.

Огроменное спасибо, особенно за музончик на фоне) с ним процесс норм идёт!

Превосходные уроки, спасибо тебе большое!

спасибо за урок! всё думал с чего начать. Помог :DDD

Спасибо Вам за видео! Супер подача!

Шикарный контент !!!.... Всё ясно и доступно...

Спасибо, есть моменты что себе взял на вооружение. Хорошо так же подаёшь материал. Лойс с меня)

Просто лучший, буду тебя советовать всем кто заинтересуется it

Вот это да, отличный урок, спасибо огромное за труд

БОЛЬШОЕЕЕ СПАСИБОО! Ты лучший учитель!!!!

Спасибо тебе, очень наглядно и понятно!

Спасибо Вам за урок, все понятно и очень интересно

Ты делаешь крутые видосы! Моё почтение!

Спасибо за ваш труд очень классный обвинение

просто супер! Спасибо большое за такие видео.

Офигенный урок,спасибо 👍

Спасибо за понятное объяснение

лайк и подписка! лучшее что нашёл по верстке

Уроки супер, спасибо!!!

спасибо за отличные уроки!

Огромное спасибо за видео! Очень помогли!

Круто, продолжай в том же духе!

спасибо большое за видео! всё очень понятно и доступно!

все снимают нудные пятиминутки, а тут пол часа пролетели как 5 минут, очень круто объясняешь, спасибо)

абсолютно всё получилось!!!!!!!! спасибо большое автор. я четыре месяца пытался, не у кого не чего не получалось в точь точь, атут прям у меня всё вышло! всё писал сам, теперь буду у вас только учиться, жду ещё уроков!!!!!!!!!! я сидел около часу делал повторял, и всё получилось

уроки топчик, благодарю)

очень подробно и доступно!

кучу раз проходил мимо твоих видео пока фигму учил а теперь вот у тебя подписан ,сайт под ключ удобнее делать ,свой же дизайн проще сверстать

Лучшие видосы на эту тему.

Отлично чувак, респект!

Спасибо большое за урок)))

Молодец, очень интересно)

Спасибо тебе добрый человек!)

Спасибо за топ-контент.

учитель от Бога. Как здорово что Вы есть и делитесь знаниями. Всех благ.

Большой молодец. И материал в принципе хорошо преподносишь, однако, по-моему было бы здорово объяснять все свойства которые пишешь, в основном они создают трудности (для новичков), например, line-height и display: flex. Но лайк точно заслужено. Есть несколько дельных вещей про которые я не слышал раньше.

Спасибо!!! Только сегодня думал - как научиться верстать

Крутой видос!!! Спасибо!!!

Все очень классно )

Спасибо за качество!

Большое спасибо!!!

достойный урок получился

Хочу подробнее изучить верстку, поэтому периодически отвлекаюсь на гугл=) А так материал огонь! Спасибо

Вопрос, можно ли вместо создания нового div "head__wrapper" (на 16:38) добавить к div с классом wrapper еще и класс head__wrapper ? Почему так не делают?

очень талантливо преподаете.

Красавчик. Скоро много подписчиков приведу на твой канал)).

Спасибо за уроки, действительно очень полезно, но вот хотелось бы еще урок по svg контенту на странице (анимации и перенос на страницу). Сам я веб дизайнер без сильных навыков в вертске, есть макеты состоящие преимущественно из вектора в Figma. С радостью бы предоставил для урока!

Лови подписку). Приятный голос.

уоу, великолепный урок, я из 2021)))

hi все супер ). маленькая просьба когда кодиш чуть крупней шрифт на вс сделай пожалуйста)

хороший канал!

Привет, хотел бы спросить, почему этот макет сделан под максимальное расширение 1440 px , на Full hd экранах картинка выглядит растянутой, но в общем очень классно объясняешь.

Уроки класные!!! Грамотно и понятно. У меня в секции intro изображение не загружалась, когда скачала по ссылке ваш оригинальный файл увидела что там паддинги добавлены, когда добавила себе, то загрузилась. Теперь думаю, почему.

Спасибо вам 🥰

Здравствуйте! Очень нравятся ваши уроки) Есть вопрос)

Классно объясняешь!

Спасибо.

Боже! Спасибо ВАМ!!!!!

спасибо!

Ты меня спас брр!

Круть,спс!

все таки решил тоже скачать те шрифты на всякий случай

СПАСИБО 👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍

Красавчик, а можешь ещё сделать видео по vscode со своими настройками

Доброго дня. Вопрос: Меню навигации после применения position: fixed; top: 0; left: 0; width: 100% весь текст съехал влево, за рамки экрана браузера плюс, цвет меню навигации в белый не красится, оставаясь стандартным синим для ссылок

Отличные уроки! Спасибо вам! Подскажите пожалуйста, у меня в header внизу всего контента идет полоса как декорация, как ее установить? Ставлю в хедер, красится весь хедер, ставлю в боди, вся навигация уезжает ниже полоски....

большое спасибо

Для лишек можно же использовать атрибут "gap" в CSS, так как они являются flex-элементами, разве нет?

короче у меня так обстоят дела с бэкграундом в конце,изображение не появляется,НО я добавил помимо бэка,но рипита и всего прочего еще параметр под названием дисплей блок и о чудо картинка теперь показывается) можно ли так оставить?

Как еще можно картинку спрятать под header, если ширина макета ограничена, а header есть дополнительный фон?

Автор, подскажи, новичкам растаскивать по кусочкам надо или все отдельно(в 1 условном формате = в условном любом шаблоне-проекте)? Все слои в 1 файле?

Привет, щас у меня путаница в присвоения свойств, например внутренний отступ не знаю какому родителю присвоить правильнее, разницы в отображении нету но путаница возникает, смотря это урок устаканивается вроде, но может есть инструкция как это все организовывать правильно!?

Привет, подскажи пожалуйста. Почему на 16:28 тег не помещен в блок wrapper ? Ведь header же тоже как и остальной контент находится в рамках max-width: 1060px; + margin: 0 auto;. Почему блок wrapper находится в теге header ? и тут уже наш логотип и навигация Вот таким образом можно написать или это не правильно будет, почему ? Извините за много букв. Буду признателен за ответ. Спасибо большое.

Чётко ничего не понял но продолжу пересматривать все видео пока не пойму))))

расклад отличный, только у меня вопрос, (я загуглил, нашел, но интересно как так)))) у меня в менюшке остались маркеры списков, загуглил, убрал, почему у тебя их не было, когда убрал черный фон, вроде бы list-style-type не прописывал? а так всё доступно, спасибо за видео

Оставлю комментарий. Спасибо

Можно писать так "background: url(../img/intro-bg.jpg) no-repeat center / cover"

Спасибо вобше удар . !!!!!

привет, у меня возник вопрос к -webkit-appearance, почему то написано что ошибка или предупреждение, можете обяснить почему так и как это исправить, спасибо

Добрый день. Спасибо за подробное объяснение,все очень понятно.Единственное,что у меня почему то не получилось,так это выравнивание меню по нижнему краю с лого... И еще,у меня вопрос один,по визуал студио...Нижнее меню-полоска,где располагается Go live,у меня не подсвечивается синим цветом.Я многим задавал этот вопрос,но ответа нужного нет.Перерыл все меню,нашел только - либо его можно поставить,либо убрать,но "окрасить" в синий цвет,не могу найти как это сделать.

А что потом делать с дизайном фигма. Как он переносится на платформу или как делается экспорт шаблона