Верстка сайта с нуля из Figma для начинающих #1
![[DELETED]](http://yt3.ggpht.com/ytc/AIdro_lPzwNJIwW1k0s0Pq5m5acZMdMZ1WQ2bze8T2FvmSmc-8rjJdg=s48-c-k-c0x00ffffff-no-rj)
HTML-код
- Опубликовано: 12 июл 2019
- Скачать материалы урока - bit.ly/3YIaWVM
FIGMA УРОКИ. ВЕРСТКА С FIGMA. ВЕРСТКА ИЗ FIGMA
FIGMA УРОКИ ДЛЯ НАЧИНАЮЩИХ. FIGMA ВЕРСТКА
Фигма верстка это серия уроков. Фигма уроки без воды. верстка сайта figma для вас. С этой верстка из figma вы научитесь как верстать с figma для figma в html. По верстка в figma серия уроков для начинающих figma для верстки. Без проблем научаться figma как сверстать. Это видео верстка макета figma
Это первое видео из серии роликов по вёрстке сайта с нуля с использованием графического редактора Figma. Вводная часть содержит краткое знакомство с программой, создание структуры будущего веб-проекта и его базовую настройку.
Ссылка на макет - www.figma.com/file/ClPSP7KCU1...
Скачать CSS Reset - gist.github.com/DavidWells/18...
Паблик телеграм - t.me/step_to_web
Сервис иконок - www.flaticon.com
Если вам понравилось это видео, не забывайте подписываться на канал, ставить пальцы вверх и писать свои комментарии!
• Верстка сайта с нуля и...
![[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета](http://i.ytimg.com/vi/357_BAchn4w/mqdefault.jpg)
Друзья, когда макет в фигме открыт у многих людей, вы можете столкнуться с его зависаниями и некорректной работой. Пожалуйста, перейдите к списку всех просмотренных макетов в фигме, выделите макет и нажмите кнопочку duplicate, как показано на скрине. Тем самым вы склонируете проект к себе и будете его единственным пользователем (без лагов и зависаний)
prnt.sc/1ckk0nt
так и не обьяснил как работать с фигма. как эспортировать изображения, код и т.д. ((
Где ссылка ???
@@powerff1324 В описании :)
@@steptoweb503 не нашол в описании
@@powerff1324 какая именно? На макет в описании под видео.
Идеальный контент для тех, кто уже что-то знает и не хочет по 100 раз слушать одно и тоже, но в то же время еще не имеет опыта вёрстки. Спасибо большое)
Рад, что полезно!
Впервые встретил урок, который дает полное понимание начала работы с макетом в Figma, а так же начало разработки веб-страницы. Огромное спасибо за Ваш труд!
Мне нравится !!! Жду следующею часть , спасибо .
Спасибо большое за такой информативный ролик, очень жаль, что у такого качественного контента так мало просмотров. Иду смотреть дальше!:)
Все понятно, ясно и четко показано каждое действие!
Как же долго я искал на ютубе внятное объяснение. Спасибо огромное. С меня лайк и подписка. Ну и конечно колокольчик.
Большое спасибо за Ваш труд! Объясняете очень доходчиво и понятно, без лишней воды и в тоже время понятно и просто Процветания Вашему каналу. С радостью буду ждать новых уроков от Вас!
Артём спасибо за ваш труд ,уроки просто супер! Продолжайте пожалуйста в том же духе и процветания вашему каналу.
Спасибо большое - продолжаю :)
Все понятно и очень интересно, искал возможность поверстать на основе полученных знаний в школе, но не знал как начать, благодаря вашему видео сдвинулся с мертвой точки, с меня лайк, подписка, колокольчик, а так же комент под каждым видео )
классное объяснение, спасибо за ваш труд, мне , как новичку, именно то что надо
Прекрасные уроки👍Благодарю
То что нужно ! Спасибо.
ты, помог просто многим не только мне, а и остальным, теперь я знаю, как делать верстку сайта, и преятно удивлю своего учителя по инфомартике)
Спасибо большое! В первом же видео столько фишек для себя узнала! Отличное видео, буду смотреть весь курс
Успехов!
Супер! спасибо! давно искала такие уроки!
Спасибо за отличный материал. Всё время проходил мимо данного видео, смотрел другие каналы. Теперь подписка.
Супер! Про box-sizing спрашивали на собеседовании - я не ответила. Так что очень полезно))))))
Действительно зачет! Подписался. В сети мало авторов которые делают для людей но много которые делаю лишь бы лишь бы
Суппер,очень помогаете,на тренде должны быть такие видео👍👍😘😘
Спасибо...буду смотреть дальнейшие уроки !!!
Скоро будут :)
Спасибо за твои видео, особенно когда в них ты объясняешь какую функцию выполняет каждая отдельная строчка кода, а также когда, где и что нужно (правильно) будет использовать. Успехов тебе и твоему каналу!)
Благодарю!
Я не видел еще ролика, посмотрел если ли макет под видео, а там макет, файлы на гитхабе, автору спасибо огромное. Лайк.
Спасибо, ушел смотреть вторую часть и жду третью)
вот это огонь!!! спасибо, ловите палец вверх от СЕООНЛИ
Спасибо большое интересно и просто все выпуски обязательно досмотрю
Очень круто, постоянно ищу такие видео и каналы по верстке, но на первых страницах поиска лишь распиаренные чуваки которые сверстают кое-как, только для того чтобы в конце попиарить свои мега курсы.
Пока всё понятно. Спасибо за этот урок))))
Шикарная подача
Большое спасибо за твои видео, все понятно !!!!!
Замечательное видео и объяснение! Уже пару других курсов прошла, но тут вы так хорошо объясняете! Многие вещи стали понятнее. Вам нужно продумать рекламную компанию , чтобы привлечь побольше подписчиков. материал замечательный и вы умеете объяснять.
Спасибо!
Спасибо за полезный видос!
Господи! спасибо тебе за твое видео, единственный кто объясняет, так как нужно именно мне!!! Просто лучший!
Пажалста!)
Спасибо!)
Четко. Вся понятно
Спасибо, много нового узнал👍
Грамотно и четко изложено. Респект и палец вверх.
Спасибо!
Спасибо за труд! Канал - находка для новичка!
Пожалуйста!
крутое видео! успехов в развитии канала!
Большое спасибо!
Отличное видео!
*Спасибо огромное! Попробую что-то сделать*
Ммм... Годнота!
Спасибо)
большое спасибо за труд
Спасибо. Хорошо объясняешь.
Пожалуйста
супер видео уроки!
Отличный урок
Спасибо большое за контент)
Пожалуйста!
Спасибо за урок😍
*Спасибо за урок)*
Очень просто всё объясняешь, говорить просто о сложном очень классный навык)
Надеюсь, хотя мне кажется, что порой не очень понятно. Нужно лучше структуру прорабатывать
Шикарный))
Очень понравился урок, надеюсь смогу на его основе сверстать свой первый саит)
От меня подписка и лайк)) Спасибо за проделанную работу.
Пожалуйста!) Рад, что полезно
Все отлично!
Рад)
Круто 🌞
Лучше видео-плейлиста в ютубе я не нашел по нужному запросу, не отказался бы от второго видео-плейлиста на другом макете с аналогичным подходом. Хотелось бы отметить одельно использование методологии БЭМ за что очень благодарен, заслуженный лайк.
Спасибо! Но ближайшее время роликов не предвидится :(
Очень крутое объяснение. И спасибо за ссылку на фижме
Спасибо, автор хорош!
Спасибо за тему с шрифтами, круто не знал про это, очень удобно)
Пожалуйста!
Большое спасыбо чувак !)
случайно нашел твой канал, когда пил кофе! якобс ты крут
Спасибо, хорошее видео. Настроить внешний вид фигмы можно ? На белом фоне серый шрифт напрягает глаза
Никогда не пишу отзывы, но Ваше объяснение и подача материала на столько понятна и лаконична, что просто выше всех похвал!!!!! Очень, все бы так объясняли!
спасибо !
спасибо, добрый человек^^
Пожалуйста!
интереснинько
Спасибо!
Решил попробовать сверстать вместе с вами данный лендинг. Это вторая верстка в моей практике начинающего верстальщика. Изначально понравилась подача и наличие полезной информации, которой мало говорят или вообще не говорят авторы подобных роликов ( я про первичную подготовку проекта). Однозначно буду продолжать!
Как успех?
Как успехи?
Не знал за google fonts helper. Шрифты годами прописывал вручную. Благодарю за урок!)
Пожалуйста!
Начал смотрел, понял, что буду смотреть дальше!
Круто!
Спасибо!!!
Я искал медь , а нашел золото . Все понятно если хоть немного знаком с версткой .
чел ты лучший
Почему так мало подписчиков у такого талантливого ютубера ,
все идеально .
Я нашла в ваших комментариях все нужные ссылки, спасибо
Описание бывает полезным ;)
Очень классные видео! Один только вопрос, - вы создаёте для benefits и places нижние отступы, но по БЭМ - у блоков отступов не должно быть. Здесь это сделано намерено, в виде исключения? И можно ли такие исключения иногда делать?
В обычной классической верстке вряд-ли вы будете чистый БЭМ юзать когда-либо)
Красава, я вот буду по сишке снимать курс, хочу также классно объеснить
Успехов!)
3:29 - Recent (которая вкладка) произносится как р'исэнт. Но это, пожалуй, единственняа претензия))
4:30 Чистых 😄
Жаль что новых видео нет, контент то очень хороший.
(после 10 минут идет подключение шрифтов а так же бокс сайзинг бордер бокс) а там доп(инферит)
Спасибо за видео. Супер объясняете. подробно. Вопрос. в reset.css теги в ручную прописываете? или есть лайв хак.
Вам нужно просто где-то скачать его и все
@@steptoweb503
google в помощь. Спс
OK!
Всем привет. Хотел задать вопрос когда открыл reset.css в VS Code там 12 ошибок, это нормально и как её убрать?
Было бы круто увидеть твою сборку галпа
Могу выслать вам на почту :)
Как переносить дизайн фигмы на сайт. Если мне не нужна тильда, а бэк хочу сам вписать через фреймворки или php, nodejs и т д
В Фигме можно сразу узнать какие шрифты используются в документе, как в Avocode?
а можно ли это все делать на питоне? вместо вскода
5.57 мин. - откуда в папке СSS взялась reset CSS?
А с можно ли загрузить на сайт многостраничный лендинг ?
отличное видео) лайк)
один вопрос: откуда взялся файл reset. css? или он там по умолчанию появляется?
вот я тоже не вкурил, за html сказал даже как создать
Сорян, был не внимателен, файл по ссылке в описании)
Сорян, был не внимателен, файл по ссылке в описании)
а если шрифты через подключить из гугл фонтс?можно же так?или лучше как на видео?
Можно, но лучше как в видео
@@steptoweb503 а почему?
@@user-ft5ew6lw5n Потому что если по каким-то причинам серваки, на которых гугл хранит шрифты, окажутся недоступными, то ваш сайт отобразится с дефолтными системными шрифтами и это может поломать его
здравствуйте!
подскажите код ссылки на ваш макет в figma. В описании есть ссылка, но я хочу открыть этот файл на компе, а полного кода ссылки в смартфон увидеть не получается
откуда скачать содержимое для файла reset.css? Ведь при создании папки css она была пустая, а если работать, то в каждом проекте ее надо вставлять в папку css? спасибо за видео
с интернета ,по запросу -"reset.css"
а что по производительности будет если для всех элементов написать border-box через :root
А если, скажем, у нас в макете используются разные шрифты(не только Lato, как в данном случае), то мы просто при стилизации каждый раз будем указывать название одного из заранее подгруженных шрифтов?
Если я вас правильно понял, то да
Стоит ли использовать reset новичкам? Это кнш все упростит, но сами мы не поймем, че и как произошло, что изменилось и что там вообще написано. Или просто не морочить голову этим и верстать)
Странно, не получается зайти на google fonts helper, но ничего страшного, загружу другим способом. Автор, подача хорошая, я в сфере новичок бывалый, но посмотрю, может я где то в верстке делаю ошибки, удачи!
Вероятнее всего что-то не так сделали)
Здравствуйте хотела спросить, я хочу дизайн с фигма перетащить на wordpress, мне делать верстку как вы на видео или сразу на вордпресс???
Если у вас кастомный дизайн, то нужно сперва отверстать, а затем интегрировать верстку под вп
в Avocode разве можно дизайн создавать? Вроде бы только читать различный форматы дизайна, или нее?
Да, вы правы - это просто редактор, позволяющий читать макеты фотошоп и скетч. Но в данном случае я его назвал в списке, т.к. он как раз является этим связующим звеном между дизайнером и разработчиком и так же позволяет гибко работать с макетом.
Это скорее трансфер, довольно удобный плюс в какой-то мере убивает зависимость от мак
Подскажите а файл индекс HTML,где взять это вначале видео вы открыли,спасибо
создать)