Тёмный

Верстка сайта по макету из Pixso, бесплатный аналог Figma с Dev Mode 

ITDoctor
Подписаться 69 тыс.
Просмотров 4,9 тыс.
50% 1

💡 Продолжение этого урока + тесты и задание (макет): stepik.org/course/113393
Урок по верстке сайта по макету из Pixso поможет вам научиться создавать веб-страницы, используя готовый дизайн из программы Pixso. Вы узнаете, как правильно переносить элементы дизайна на HTML и CSS, чтобы ваш сайт выглядел точно так же, как в макете. В ходе урока вы научитесь работать с различными элементами веб-страницы, такими как заголовки, текстовые блоки, изображения и кнопки. Вы также узнаете, как использовать CSS для стилизации элементов и создания адаптивного дизайна. В результате вы получите готовую веб-страницу, которая будет выглядеть точно так же, как и на макете в Pixso.
💾 Репозиторий: github.com/morphIsmail/pixso_...
00:00:00 Вступление
00:01:21 Знакомство с Pixso, загрузка, авторизация, обзор
00:08:30 Пишем разметку html первого раздела и работа с SVG иконками
00:18:43 Подробно про SVG иконки и отличия разных способов подключения
00:27:35 Оформление базовых стилей CSS, просмотр всех шрифтов на макете, работа с Google Fonts
00:37:42 Perfect Pixel в браузере, оформление стилей в соответствии с макетом
00:47:40 Оформление стилей для раздела Features и проверка на разных размерах экрана
01:02:10 Про полезные материалы, ссылка на GitHub как пользоваться всеми ресурсами
⚡️ Эксклюзив на Boosty - boosty.to/itdoctor
💡 Telegram канал - t.me/itdoctor_official/4
🎥 Курсы на Stepik - stepik.org/users/387773773/teach
ВКонтакте - itdoctorstudio
Яндекс Дзен - zen.yandex.ru/itdoctor
Rutube - rutube.ru/channel/23500045/
#pixso #html #css #itdoctor

Опубликовано:

 

7 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 22   
@ITDoctor
@ITDoctor 2 месяца назад
💡 Продолжение этого урока + тесты и задание (макет): stepik.org/course/113393
@YxTbI39Pa8CTE
@YxTbI39Pa8CTE 2 месяца назад
Незнал, "free tools" 👍
@user-kb4kd2vd7v
@user-kb4kd2vd7v 2 месяца назад
Отлично, спасибо 😊
@ITDoctor
@ITDoctor 2 месяца назад
ПОжалуйста
@newal2006
@newal2006 2 месяца назад
Перешел сразу на неё, как только фигма опаскудилась
@iuseronline
@iuseronline 2 месяца назад
круто) оч полезно
@ITDoctor
@ITDoctor 2 месяца назад
Спасибо, рад что нравится
@user-lz4ob7gj4p
@user-lz4ob7gj4p 2 месяца назад
СПАСИБО!!!🎉🎉🎉
@ITDoctor
@ITDoctor 2 месяца назад
Всегда пожалуйста!
@merdanbaydzhanov8495
@merdanbaydzhanov8495 2 месяца назад
Спасибо 👍👍👍
@ITDoctor
@ITDoctor 2 месяца назад
Спасибо за оценку
@saas3240
@saas3240 2 месяца назад
А это программа работает без интернета ? Я сказал установщик программу и у меня программа не работает корректно 😢
@ITDoctor
@ITDoctor 2 месяца назад
я не пробовал даже. интернет есть везде, а без него работать смысла мало очень.
@user-df8vq4kd5j
@user-df8vq4kd5j 2 месяца назад
Здравствуйте. Вообще не понимаю про то как выровнять макет. Не получается как у вас. У меня монитор 1440х2560. Может не так что то ставлю. Сложно даётся pixel perfect в общем.
@ITDoctor
@ITDoctor 2 месяца назад
у вас вертикальный монитор? или вы просто написали наоборот расширение?
@ITDoctor
@ITDoctor 2 месяца назад
посмотрите еще это видео там тоже про это может что то новое узнаете для себя ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-LJR55ocpOZo.html это ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-MoIK7WtUvto.html и это ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ZGeCNkW7FKw.html
@user-df8vq4kd5j
@user-df8vq4kd5j 2 месяца назад
@@ITDoctor обычный монитор 2к
@user-df8vq4kd5j
@user-df8vq4kd5j 2 месяца назад
@@ITDoctor да разрешение наоборот написал
@ITDoctor
@ITDoctor 2 месяца назад
@@user-df8vq4kd5j ознакомьтесь с тремя ссылками которые я вам дал выше. Там все на эту тему верстки. Попробуйте вникнуть полностью все посмотреть
@user-mw4um7vo4q
@user-mw4um7vo4q 2 месяца назад
А где верстка по БЭМ?
@ITDoctor
@ITDoctor 2 месяца назад
не в этом уроке
Далее