Адаптивная верстка сайта с нуля по макету из Figma #1 Подготовка проекта
Вставка
- Опубліковано 14 лис 2024
- Курс адаптивная верстка сайта с нуля по макету из Figma нацелен на то чтобы научить вас создать верстку сайта с нуля. По макету из Figma я покажу шаг за шагом как создается адаптивная верстка сайта. Адаптивная верстка сайта это верстка заточенная под разные устройства такие как смартфоны и планшеты. По макету из Figma делается верстка сайта в редакторе кода с использованием языка HTML и CSS.
В этом уроке мы рассмотрим макет сайта, который будем верстать из Figma. Ознакомимся с базовыми элементами фигмы. Скачаем редактор кода Visual Studio Code и я покажу какие плагины нам понадобятся для работы. Экспортируем макет сайта из Figma для дальнейшей верстки Pixel Perfect и создадим проект на компьютере и подготовим базовую структуру файлов и каталогов для комфортной работы над сайтом.
⚡️ Скачать готовый код вёрстки сайта из курса "Верстка сайта с нуля по макету из Figma": boosty.to/itdo...
Курс "Верстка сайта с нуля по макету из Figma": • Верстка сайта с нуля п...
Макет сайта Figma: drive.google.c...
⚡️ Эксклюзив на Boosty - boosty.to/itdo...
💡 Telegram канал - t.me/itdoctor_...
🎥 Курсы на Stepik - stepik.org/use...
💰 Донаты на ЮMoney - sobe.ru/na/itd...
ВКонтакте - itdocto...
Яндекс Дзен - zen.yandex.ru/...
Rutube - rutube.ru/chan...
#html #css #figma #flexbox #grid #webdevelop #webdev #itdoctor
Макет сайта Figma: drive.google.com/file/d/1gSTpLp4TfoLMiGzmSVfUgQnvhYwcgfmL/view?usp=sharing
нельзя было ссылку на сайт, что за разрешение fig?
@@mhntgfmjhg figma
Четко, ясно, подробно, не затягивая - объяснение супер понятное. Огробное спасибо.
Спасибо за оценку
Мастер, как всегда на высшем уровне, спасибо!
Спасибо за оценку. рекомендую так же новые уроки записанные в 2024 году t.me/itdoctor_official/1231
Спасибо за такой прекрасный и подробный курс🙏
Спасибо что оценили
Я не смотрел это видео, но лайк все равно поставлю, поскольку я знаю, насколько у вас качественные уроки. А что касается лично меня, то я сейчас изучаю ваши уроки по натяжке верстки на вордпресс.
Удачи вам!
Спасибо
Уроки бомба, смотрим дальше!
Вам большое благодарю!
Спасибо. Уже весь курс доступен полностью так что вам повезло и не придется ждать
Спасибо за труд! Очень полезно!
Рад что оценили
красотища! лукас от сеошника-профи СЕООНЛИ
Спасибо
Дивлюсь ваш курс по js. Дякую:)
спасибо
Держитесь там!
Огромное спасибо! Очень полезное видео! Рекомендос)
Спасибо
Как долго я вас искал, искренне благодарен
рад что оценили
Благодарю Вас!❤️🙏🏼
суупер-так подробно, спасибо)
Пожалуйста
Давненько не было верстки, спасибо
рад что понравилось
Спасибо за урок, очень полезно
Рад что понравилось. Продолжение следует
Вот такой контент я люблю)))
спасибо
Молодец спасибо огромное
Пожалуйста!
Очень интересно, продолжай в том же духе.
спасибо
Спасибо за ваши старания ❤
Спасибо что оценили
@@ITDoctor можете скинуть ссылку с сайта фирмы на макет пожалуйста 🙏
@@ITDoctor почему-то файл не импортируется
Спасибо, прохожу курс на Udemy, пока все понятно
Пожалуйста
Спасибо большое !!!
пожалуйста
Спасибо,супер!!!!!!!👍👍👍
пожалуйста
Круто👍👍👍
спасибо
Спасибо за уроки. Подписался
Вам спасибо!
Благодарю!
Спасибо что цените!
This is really cool man continue!
Спасибо
Спасибо
пожалуйста
Спасибо!
спасибо! максимально круто и подробно!
Рад что нравится
Хорошо объясняете, спасибо)
Пожалуйста
Желательно растянуть на больше уроков, но видео короткие так очень хорошо смотрится👍
будет от 8 до 12 уроков я думаю
@@ITDoctor 👍
👍
спасибо
Thank you doctor 😁
You are welcome!
Большое спасибо!
Пожалуйста
Грустно, что у такого хорошего канала так мало подписчиков.
Спасибо за поддержку. Не считаю что это мало. конечно не сотни тысяч и не миллионы. но это сфера обучения именно обучения а не шоу под видом программирования где просмотров много потому что просто посмотреть видео легко. а тут именно на результат все нацелено, надо смотреть и делать самому, а этого хотят не многие. Все хотят просто стать программистом за два дня и зарабатывать, но работать и учиться при этом желающих в разы меньше. Поэтому и столько подписчиков я считаю.
@@ITDoctor В любом случае вы помогаете нам джунам стать middle and senuior developers), за что лично я вам благодарен.
@@NIKOLARUS1 спасибо за поддержку
Подскажите пожалуйста чем отличается обычная вёрстка от вёрстки под Битрикс?
Здравствуйте, какая примерная цена за вёрстку вот этого сайта? И сколько уйдёт на это времени примерно?
Сколько уйдет времени вы можете понять выполнив подобную работу как в этом курсе но уже самостоятельно. А цены проверить на фриланс биржах. Все индивидуально. Вы можете и 100 000 установить цену за свою работу, но найдете ли вы клиента? При хорошем маркетинге можно и так делать, но обычно это стоит в разы меньше, может даже в 10 раз. Но опять таки от сложности зависит. Одностраничник за 8-10К можно сделать за 4 часа. А если там много страниц и все сложнее то и 20 и 30 и больше может стоить.
@@ITDoctorспасибо всё понял
Жду новую часть
Как вы попали на это видео? Оно ещё не доступно
@@IsmailUseinov зашёл через плейлисты
Ахах
@@VladoSSSka интересно
Заметил у вас редактор кода Kate. Можете о нём что-нибудь сказать? Интересуюсь, потому что когда-то пробовал linux openSUSE с графическим окружением KDE и там по умолчанию. идёт этот редактор кода. В нём разбираться не стал, потому что VC Code удобнее. Но в целом любопытно: использует ли его?
Отдельный вопрос: можно ли заниматься вёрсткой на linux, ведь большая часть профессиональных программ вроде Photoshop, AvaCode и Figma устанавливаются на Windows или MacOS.
Figma есть и на линукс, ну или на крайний случай из браузера. Сейчас обычно её хватает поэтому можно и на линуксе.
Про Kate я тоже узнал на KDE когда сидел в Kubuntu и теперь использую и на Винде его вместо Notepad++. Не потому что он плохой а просто хотел что то кроссплатформенное и Kate как раз работает и там и там и примерно что то вроде Notepad++. Но как редактор кода я его не использую. А больше как крутой блокнот с разными функциями для обычных текстовых файликов. Хотя функций в нем много но не вижу смысла писать там код когда есть VS Code для всех платформ.
@@ITDoctor спасибо за оперативный и развёрнутый ответ.❤🙏
Будет курс про натяжку вёрстки на WooCommerce?
в ближайшее время не планировал
Вопрос. Есть ли метод защиты от безответственного заказчика, а именно, возможна же ситуация, когда заказчик получил работу, но не оплатил её? Т.е. внедрить какой-то код, который по истечению времени просто уничтожит сайт если эту функцию не отключить. Ну или другие более-менее надёжные способы. Спасибо.
Хорошая идея для реализации.
предоплата минимум в 50%
и все пароли от хостингов у разработчика, до тех пор пока не получите всю остальную сумму. а потом передаём данные клиенту, и он может сменить пароли если хочет.
Я этот макет верстал в декабре 2020 года)))
Мир тесен
Обои! 😍😍😍 А где скачать такие?:)
wallpaper engine -> steam
Спасибо за урок!
подскажите с чем может быть связана проблема что у меня liveserver изменения текста отображает в онлайне, а изменения css например background style он не делает. То есть в live нет цветов, при этом если открыть просто обычным способом цвета применяются...?
И еще подскажите как сделать настройку макета view only чтобы не сдвигать слои?
не сталкивался с таким не разу. может переустановка поможет или в другом браузере проверить
@@ITDoctor я вроде поборол эту проблему сегодня. Дело в том, что в пути подключения css файла я правой кнопкой копировал путь и вставлял все. Там и русские буквы в пути были и наклон / не правильный. А если поставить ./ а дальше появляется дериктория папок и выбор файла.
Помогите мне) пжлст. Я скачиваю макет по ссылке, но он не открывается. И пишет что не возможно прочитать файл. Что он не является правильным точечным рисунком((.
Через веб версию попробуйте если до этого с десктопной и наоборот, должно работать, не у кого еще такого не было, по крайней мере никто не писал что есть проблемы с этим макетом
@@ITDoctor Спасибо за совет, проблема решена) Буду учиться.
Помогите, как между изображениями svg сделать расстояние
в чем проблема?
svg {
margin: 10px;
}
Добрый день! А этот курс из нескольких уроков и одно видео на 7ч (в конце плейлиста) это один и тот же материал?)
Добрый день. Да. После выхода всех уроков курса объединил все в один и сделал оглавление в виде таймингом для удобного поиска и перехода по главам. Ну кому то удобней в отдельных небольших видео смотреть.
@@ITDoctor поняла!) спасибо вам большое за ваш труд!))
@@mariia__art спасибо что оценили
Доктор я не разбираюсь в фигме! Что мне делать?
смотреть уроки. продолжение следует
Я прошу Вас ,Катало́г
спасибо что не безразличны. но вы же понимаете что взрослый человек даже при всем желании вряд ли сможет переучиться, ну можно конечно но это очень сложно и нужно следить за собой долгое время чтобы перепривыкнуть к этому. если больше 25 лет ты говорил так как говорил, сейчас взять и начать говорить по другому маловероятно. ну я буду стараться
я канечно извеняюсь, но а как макет посмотреть, по ссылке гугл диск пишет что просмотр не доступен (
вам просматривать и не нужно. там есть кнопка скачать. посмотреть это просто предпросмотр в браузере. скачайте по синей кнопочке и смотрите все файлы уже у себя на компьютере.
все, тысяча извинений ) я разобрался, спасибо, просто после скачивания нужно было открыть фигму и через импорт указать скачанный файлик
@@iamzvir777 рад что все прлучилось
почему я ставлю (!) и у меня ничего не выходит 😢
я поняла: когда нажмете на «расширение имен файлов» и начнете менять название на index.html , удалите перед этим названием “.txt”
ua-cam.com/play/PLuY6eeDuleIOeeIx3j7AP4Z9ojmrwZPCp.html
Ну и при чем тут фигма и адаптивная верстка, рассказали про существование проектов в фигьа и о том, где начинать верстку и только
Дальше смотрите видео из плейлиста. Это не отдельное видео а целый последовательный курс.
Чувак,лучше бы я тебе деньги за обучение заплотил
У меня вы можете и бесплатно многому научиться на канале
Не о чем не понравилось.
Спасибо!
Пожалуйста