Верстка сайта по макету из Figma без Dev Mode в бесплатной версии
Рет қаралды 4,483
Күн бұрынУрок по верстке сайта по макету из Figma поможет вам научиться создавать веб-страницы, используя готовый дизайн из программы Figma. Вы узнаете, как правильно переносить элементы дизайна на HTML и CSS, чтобы ваш сайт выглядел точно так же, как в макете. В ходе урока вы научитесь работать с различными элементами веб-страницы, такими как заголовки, текстовые блоки, изображения и кнопки. Вы также узнаете, как использовать CSS для стилизации элементов и создания адаптивного дизайна. В результате вы получите готовую веб-страницу, которая будет выглядеть точно так же, как в макете из Figma.
📌 Полезные материалы и задания к этому уроку: stepik.org/113393
💾 Репозиторий с кодом: github.com/morphIsmail/figma_...
00:00:00 5 способов жить без Dev Mode
00:02:03 Начинаем верстать по макету из Figma
00:04:50 Структура проекта
00:07:13 Обзор макета
00:09:03 Начинаем писать код шапки и настраиваем контейнер
00:15:28 Пишем CSS для Header и работа с Perfect Pixel
00:25:21 Адаптивная версия для Header
00:34:32 Верстаем раздел с текстом, экспорт SVG, иерархия в коде
00:45:51 Верстаем раздел Services
00:57:48 Верстаем раздел Team
01:14:57 Размещение на GitHub Pages и тест со смартфона
⚡️ Эксклюзив на 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/
#figma #html #css #itdoctor
@ITDoctor 3 ай бұрын
Этот новый урок доступен вам БЕСПЛАТНО в курсе Сайт на Wordpress, Верстка сайта и перенос на CMS ( stepik.org/113393 ) в модуле "Верстка из Figma без Dev Mode". На Stepik доступны задания и дополнительные материалы, а так же видео разбито на отдельные фрагменты для вашего удобства, чтобы не смотреть большое видео за один раз.
@user-cm1om1oo3p 3 ай бұрын
Пишет: 404.
@ITDoctor 3 ай бұрын
@@user-cm1om1oo3p спасибо исправил. из-за круглых скобок написанных слитно ссылка поламалась.
@user-hj1eh8dk9p 3 ай бұрын
То, что ITDoctor прописал. Понятно, доходчиво, сразу на конкретном примере.
@ITDoctor 3 ай бұрын
Спасибо что оценили!
@user-nh9tw3ei9t 3 ай бұрын
Исмаил, спасибо! Информативно, понятно, доступно. Всех Вам благ!
@ITDoctor 3 ай бұрын
Спасибо, взаимно!
@user-kb4kd2vd7v 3 ай бұрын
Спасибо за ваш труд😊
@user-cm1om1oo3p 3 ай бұрын
Спасибо огромнейшее. С Ваших материалов началось моё знакомство с IT-индустрией. Конкретно с вёрстки.
@ITDoctor 3 ай бұрын
Спасибо, рад слышать!
@_pheax 3 ай бұрын
Спасибо вам за урок.
@ITDoctor 3 ай бұрын
всегда пожалуйста
@tohrrogeil4847 3 ай бұрын
на гитхабе для этого проекта, в файле main.css, на строках 13 и 14 заданы max-width:1444px и width:100% для container. Свойство width:100% будет излишним , так блочный элемент занимает все доступное пространство(по ширине) по дефолту. Я прав?
@ITDoctor 3 ай бұрын
нет. и я рассказывал почему мы так сделали. и еще недавно вышло видео там тоже говорил про это kzfaq.info/get/bejne/g9V5fpqI2bvapKM.html если вы начнете делать адаптив то поймете сами в чем косяк. 100% говорит нам что на маленьких экранах будет занимать всю ширину. а 1440 это максимум, тоесть больше этого не будет точно. а вот меньше может быть и будет занимать весь экран. на смартфонах например. ну можно и по другому делать конечно это не единственно верный способ. можно потом писать в медиа это. но зачем если легче сразу один раз задать для контейнера.
@user-hw4xf1bu3p 3 ай бұрын
Привет, сделай как нибудь вёрстку сайта с помощью SASS, и Gulp пожалуйста, буду очень благодарен.
@ITDoctor 3 ай бұрын
Спасибо за предложение
@UDAV_ 3 ай бұрын
Платная подписка только на группу же? Нельзя купить на свой аккаунт и использовать его во всех проектах. Или я не прав?
@ITDoctor 3 ай бұрын
Dev Mode сейчас в платной подписке. Можете сами проверить у вас работает этот режим или нет?
@azamatmussauatov7533 3 ай бұрын
Я уже задолбался в джаваскрипт е , появляется постоянно unexpected input error, и у меня дальше не идет джаваскрипт из за этого???
@oldiBerezko_ 3 ай бұрын
Закинь в ИИ и узнай.
@ITDoctor 3 ай бұрын
в вашем вопросе видны эмоции но самой формулировки вопроса и адекватного объяснения сути не вижу. помочь в таком случае тоже трудно t.me/itdoctor_official/962
@Web..223 3 ай бұрын
Привет, я вам очень благодарен, но был бы ещё больше благодарен вам если вы покажите нам, вашим ученикам вёрстку с использованием SASS и gaup🙏
@ITDoctor 3 ай бұрын
у меня есть подобные уроки на канале хоть они и записаны пару лет назад. но по сути сильно ничего не поменялось. новые может тоже запишу. но не стал бы прям ждать, а воспользовался уже тем что есть просто извлек бы для себя оттуда максимум пользы и применял. Спасибо что написали ваши пожелания!
@Web..223 3 ай бұрын
@@ITDoctor Спасибо вам, не каждый отвечает на вопросы, а просто игнорит,а вам я уже задаю не один вопрос и вы отвечаете за это огромное спасибо, а что касается моего вопроса я обязательно посмотрю и извлеку максимум пользы и буду с удовольствием применять 🙂, ещё раз спасибо
@Web..223 3 ай бұрын
@@ITDoctor сможете если не сложно скинуть ссылку на эти видио уроки пожалуйста
@ITDoctor 3 ай бұрын
@@Web..223kzfaq.info/sun/PLuY6eeDuleIMEIav0T-g0VBM52C3cAhLC&si=sJx8IynJV7lBlH8M kzfaq.info/sun/PLuY6eeDuleIM2_X9rA_5DDE0rX9cjUQoX&si=VD_y9SN6veqIwrvx kzfaq.info/sun/PLuY6eeDuleIM-cQvHBy4jQnGH0fVZ_RhK&si=pxco8X2UZogl8zNm И на канале ещё много другого можно найти в разделе плейлистов, там подписано все
@Web..223 3 ай бұрын
@@ITDoctor Спасибо
@user-df8vq4kd5j 3 ай бұрын
Здравствуйте. В вашем курсе вы объясняете почему нужно ставить max-width, width 100%, и этого типа значения. Нечего непонятно просто когда и как их ставить и зачем? Почему нельзя просто писать обычно width и hight? И есть пояснени по поводу велечин изменрения vh, em и т.д. ?
@ITDoctor 3 ай бұрын
max это значит может быть меньше но не больше этого значения. то есть контента мало и ширина может быть уже. а если контента больше то ширина больше не станет а просто текст перейдет на новые строки. изучайте основы перед тем как браться за что то сложнее. есть плейлист по основам css kzfaq.info/sun/PLuY6eeDuleINJ5hIlBJWopSWHWDJYz_XW а так же отдельное видео на интересующую вас тему kzfaq.info/get/bejne/kNuCfbac29usn4U.htmlsi=UXdhSufjyg6q4g46 а также пошаговые планы обучения (бесплатно) и если ничего не пропускать и шаг за шагом разбираться то таких вопросов на данной стадии уже не будет t.me/itdoctor_official/943
@user-df8vq4kd5j 3 ай бұрын
@@ITDoctor здравствуйте. Спасибо посмотрю.
@user-sc8uy5eh2s Ай бұрын
Водянистая вода, всю инфу можно вместить и в 30 минут 😮💨
@usuratonkach1 Ай бұрын
Вот все говорят можно уместить, а ты купи верблюда
@ITDoctor Ай бұрын
однажды всю инфу будут за секунду загружать в мозг и не придется тратить время, смотреть на воду, стараться и учиться. Если доживете буду рад за вас.
Marat Oralgazin
Рет қаралды 433 М.
Go Gizmo!
Рет қаралды 27 МЛН
Александр Ламков — Friendly Frontend
Рет қаралды 28 М.
Marat Oralgazin
Рет қаралды 433 М.