#3 Плагин Perfect Pixel, Верстаем по макету из Figma
HTML-код
- Опубликовано: 26 сен 2024
- Урок по верстке сайта по макету из Figma поможет вам научиться создавать веб-страницы, используя готовый дизайн из программы Figma. Вы узнаете, как правильно переносить элементы дизайна на HTML и CSS, чтобы ваш сайт выглядел точно так же, как в макете. В ходе урока вы научитесь работать с различными элементами веб-страницы, такими как заголовки, текстовые блоки, изображения и кнопки. Вы также узнаете, как использовать CSS для стилизации элементов и создания адаптивного дизайна. В результате вы получите готовую веб-страницу, которая будет выглядеть точно так же, как в макете из Figma.
📌 Полезные материалы и задания к этому уроку: stepik.org/113393
💾 Репозиторий с кодом: github.com/mor...
• Вёрстка сайта по макет...
⚡️ Эксклюзив на Boosty - boosty.to/itdo...
💡 Telegram канал - t.me/itdoctor_...
🎥 Курсы на Stepik - stepik.org/use...
ВКонтакте - itdocto...
Яндекс Дзен - zen.yandex.ru/...
Rutube - rutube.ru/chan...
#figma #html #css #itdoctor
Начните зарабатывать деньги освоив самое важное для веб-разработчика. Изучим HTML, CSS, JavaScript, Figma, Photoshop, VS Code, Emmet, BEM, Bootstrap, Vue, Git, GitHub, Gulp. Расскажу как составить портфолио, резюме и взять первый заказ на фрилансе.
📌 Курс "Frontend разработчик на HTML, CSS и JavaScript": stepik.org/a/113402
Урок очень даже зачетный ! Так как плагин для CSS очень полезен и расширение для браузера тоже нужная фича ). Кстати работал в Edge и все получилось ! Спасибо за урок иду далее.
Приятно видеть вашу целеустремленность
Спасибо большое 😊
Пожалуйста
Будет очень интересно😎🗿это будет имбого, чтоб верстальщики потом начали свои подходы фантазировать, как допаление к нему🥲
Уже не знаю зачем Вы устанавливали эти margin-bottom и margin-top, а затем подстраивали их.
В моем случае, заголовок и подзаголовок хэдера были чуть смещены вниз от оригинала. Помогла всего-навсего установка для header_title и header_text нулевые значения margin: 0 ))
Бро, было бы очень круто, если бы ты сделал новый ролик по верстке макета под Wordpress, чтобы весь контент можно было менять в админке, и чтобы форму тоже можно было изменить. Проходил курс на степике, хотелось бы обновленного видео по верстке на WP, пожалуйста!
Я как раз над этим работаю. В ближайшие месяцы добавлю новый модуль в этот курс.
@@ITDoctor Отлично, жду!
@@ITDoctor Надеюсь там будет показано, как работать с WYSIWYG-редактором ? 🙏
@@StonHenge нет
@@ITDoctor Почему? Это разве не распространенная вещь? Ведь заказчики часто хотят добавлять новые параграфы, изменять их размеры. А не только изменять существующие.
🫠А можно будет верстка личного кабинета, со страницами, таких как к примеру обновление личных данных 🫠😎 с полями, страница сообщений разработчикам либо админу, там информации о своем заказе 😊, и так же как продавец добавление продукта, и страница заказов которые заказывают у самого пользователя ввиде таблицы 🫠⚡
А почему Вы подстраиваете marginы и padding'и - а не используете position, беря значения (смещения) left и top из Фигмы?
позиционирование используем только в крайних случаях. иначе всё может сломаться. это не удобно. посмотрите уроки по верстке dzen.ru/suite/781f0b06-e0fe-42e6-a2c9-b6b99ee4768e а если не изучали основы HTML и CSS то лучше начать с них. у меня на канале тоже есть. Найдете в плейлистах на Ютубе или в подборках на Дзене
@@ITDoctor Благодарю Вас. Решил пока оставить мои мысли в стороне и просто посмотреть этот курс, чтобы понять суть, основную суть.
АВТОР ОТКУДА МАКЕТ ПОДСКАЖИ БОЛЬШЕ ТАКИХ ВИДЕО ПОЖАЛУЙСИТА
макеты из свободного доступа в самой фигме есть комьюнити там можно находить. так же я публикую такие макеты для практики у себе на канале t.me/tasks_by_code по тегу #layout можно найти их. Видео которое вы смотрите это одно из серии. Весь плейлист: ruclips.net/p/PLuY6eeDuleINeeRbBrztNjnCprlZ7ecDV а также другие видео по верстке на моем канале записанные в 2024 t.me/itdoctor_official/1231