Тёмный

#1 Верстка сайта с нуля по шаблону | Header & Main 

EduCatter — Канал о Веб-Программировании
Просмотров 6 тыс.
50% 1

Привет!
Это новая серия уроков на канале - Верстаем вместе, где ты точно так же можешь повторять за мной шаг за шагом каждое действие, чтобы набраться опыта и в будущем верстать все более сложные сайты!
В этом видео я показывай шаг за шагом процесс создания сайта по шаблону - Акватерапия "РитмСтайл". Это только одно из множества видео, дальше будет окончательная верстка, адаптация под мобильные устройства и загрузка на хостинг. То есть мы пройдем вместе весь путь создания сайта. А чтобы не пропустить новые части подпишись!
Дизайны привьюшек и красивые арты у Аркадия:
yan9boy - Пишите в личку!
deslgn_46 - Его паблик Вк
Тайм-коды:
00:00 - Начало
03:00 - Подготовка, шрифты
05:24 - Вёрстка
06:25 - Header
14:50 - Main
Все ссылки:
Ссылка на шаблон: www.figma.com/file/wV8ONg4Jiz...
Ссылка на папку с проектом: drive.google.com/drive/folder...
Ссылка на шрифт El Messiri: fonts.google.com/specimen/El+...
Ссылка на шрифт Proxima Nova: github.com/elliakou/proxima-n...
Социальные сети:
Телеграм канал: t.me/educatter
ВК: banderolo
Сотрудничество:
steyer.ilya@yandex.ru
Разработка сайтов под ключ - sitesmatch.ru
Не забудь подписаться!

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

 

8 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 23   
@skipok6667
@skipok6667 5 месяцев назад
Очень хорошее видео, всё красиво и понятно, ждём следующие видео.
@THEwolf476
@THEwolf476 3 месяца назад
Отлично! Подробно и понятно. Спасибо! (У меня на выполнение этого урока ушло 4 часа ))
@SergiyPolar
@SergiyPolar 5 месяцев назад
Я продолжу задавать вопросы, если позволите :-) Зачем юзать вложеность, ведь лучше юзать БЭМ методологию, меньше шанс заруинить вёрсику, а так же будет проще при адаптиве. Почему лого в png, а не в svg формате? Опять же, почему было бы хорошо использовать svg в лого - показать возможные проблемы в отображении яблочного Safari... P.S. Да, я душнила, но все же лучше сразу учиться верстать правильно.
@ketr2157
@ketr2157 5 месяцев назад
Столкнулся с проблемой, что картинка background-image не отображается. Качал в разных форматах. Закидывал в разные папки. Пробовал различные пути к этой картинке, полный прям с диска "c" и через /, ./, ../. Если делать через style в body тоже 0 реакции. Стили с style.css работают. Обычные img src отображаются. В чем проблема , может поможет кто ? Уже качаю open server. Когда-то сталкивался с этой проблемой и не помню как решил, вроде через open. Но все же кто-то что-то может знает ?
@maximich99
@maximich99 5 месяцев назад
🎉🎉🎉
@Petrovi_-tv5et
@Petrovi_-tv5et 5 месяцев назад
Добавьте еще адоптивку , будет интересно 🎉
@EduCatterOfficial
@EduCatterOfficial 5 месяцев назад
Обязательно
@Brod234
@Brod234 5 месяцев назад
Спасибо! когда дальше?)
@karenveranyan9857
@karenveranyan9857 Месяц назад
Для дипломной работы подойдёт?
@Absolute_p2p
@Absolute_p2p 5 месяцев назад
почему файл фигма спрашивает парол,? напишите парол пожалуста
@EduCatterOfficial
@EduCatterOfficial 5 месяцев назад
Попробуйте еще раз! Все работает
@EduCatterOfficial
@EduCatterOfficial 5 месяцев назад
www.figma.com/file/wV8ONg4Jiz8W0ZhGq3NZ7X/Aqua?type=design&node-id=0%3A1&mode=design&t=bAibAIq5hiHxdZDN-1
@Kirusha_top
@Kirusha_top 5 месяцев назад
у меня фигма не дает ничего делать с шаблоном, только перетаскивает и переключить не получается
@EduCatterOfficial
@EduCatterOfficial 5 месяцев назад
Можете написать мне в моем телеграм канале, мы решим ваш вопрос!
@user-yt6li5wf5m
@user-yt6li5wf5m 5 месяцев назад
Каким образом можно обратиться к паролю. Если честно. первый раз вижу. чтобы Фигма пароль к сайту запрашивала.
@EduCatterOfficial
@EduCatterOfficial 5 месяцев назад
Попробуйте ещё раз! Вот ссылка: www.figma.com/file/wV8ONg4Jiz8W0ZhGq3NZ7X/Aqua?type=design&node-id=0%3A1&mode=design&t=bAibAIq5hiHxdZDN-1
@user-yt6li5wf5m
@user-yt6li5wf5m 5 месяцев назад
Благодарю, макет открылся.@@EduCatterOfficial
@SergiyPolar
@SergiyPolar 5 месяцев назад
А для чего у нас два файла с одинаковым содержимым подключены? fonts.css и fonts.min.css отличаются лишь тем, что файл .min.css содержит сжатую версию кода, для более быстрого чтения браузером. Так же правилом хорошего тона будет хранить ВСЕ файлы и шрифты локально, а не подгружать с репозитория. Я понимаю что это не реальный проект, но такие вещи стоет хотя-бы проговаривать.
@ShineiEdits
@ShineiEdits 5 месяцев назад
Наверное что бы не путаться стильями
@SergiyPolar
@SergiyPolar 5 месяцев назад
@@ShineiEdits тут достаточно одного файла, подключать оба - ухудшаать скорость загрузки страницы. Поскольку стили написаны не нами и лезть ковырять нам явно ничего не нужно - достаточно подключить fonts.min.css
@SergiyPolar
@SergiyPolar 5 месяцев назад
@@ShineiEdits и это я ещё за web accessibility душнить не начал. Тоже лучше сразу брать в привычку следить за доступностью сайта (не знаю как по постсоветскому пространству (давно с нашими не работал), а вот с зарубежными заказчиками без этого вы ничего не заработаете)
@KirCuursed
@KirCuursed 5 месяцев назад
а js будет присутствовать?
@EduCatterOfficial
@EduCatterOfficial 5 месяцев назад
Конечно же
Далее