Анализ, вёрстка десктопа, рефакторинг, оптимизация, доступность

  Рет қаралды 57,106

Просто: разработка

Просто: разработка

Күн бұрын

В рамках этого видео: анализ макета, вёрстка десктоп версии сайта, рефакторинг, оптимизация, доступность. Здесь есть много Flexbox, Grid CSS, Lighthouse, W3C анализ.
=======================================
Стоит изучить перед просмотром:
Вёрстка сайта ч. 1 (это видео) - • Анализ, вёрстка дескто...
Вёрстка сайта ч. 2 (смотреть следующим) - • Анализ, вёрстка адапти...
Вёрстка сайта ч. 3 (а потом вот это) - • Подключение Бургер мен...
Дополнения и горячие клавиши VS Code - • Лучшие дополнения vsco...
Grid CSS - • Введение в CSS Grid. Р...
Flexbox - • Последовательность (or...
Макет:
www.figma.com/file/8T4byFDAV5...
=======================================
Таймлайн:
00:00 Анализ макета
06:21 Формирование общей структуры
28:55 Шапка / Header
1:00:31 Подвал / Footer
1:04:02 Блок 1. Hero image
1:41:27 Блок 2. Customers
1:46:48 Блок 3. Plan and manage
2:05:42 Блок 4. Features
2:33:04 Блок 5. Statistics
2:45:44 Блок 6. Blog
3:31:36 Блок 7. Quotes
3:48:47 Блок 8. FAQ
4:12:15 Блок 9. Get started
4:26:46 Блок 10. Newsletter
4:39:32 Рефакторинг, оптимизация, танцы с бубном
5:38:11 Улучшение доступности / Accessibility

Пікірлер: 243
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
😎 Получить исходники и другие преимущества - boosty.to/prostorazrabotka ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/
@pastyrMisha
@pastyrMisha 3 жыл бұрын
Просто чувствуется большой опыт! Спасибо Вам за то, что делитесь знаниями с нами в этих видео бесплатно. Лучший туториал однозначно! Потому что лучшее обучение - это практика, а здесь только она)
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Благодарю
@Noomeron1
@Noomeron1 3 жыл бұрын
Лысый из IBM 6 часов без остановки показывает как надо.. смотреть без регистрации и смс! А если серьёзно - спасибо за титанический труд. В рутубе, к сожалению, мало контента такого качества. Продолжайте в том-же духе, успехов!
@messi10532
@messi10532 3 жыл бұрын
Это нереально качественно. Просто золото для обучения верстке. Спасибо огромное!
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Спасибо)
@keksinjo
@keksinjo 3 жыл бұрын
Вложенность - зло в стилях, а так да, очень классно
@Zak0532
@Zak0532 3 жыл бұрын
@@keksinjo Ну лысому дядьке лучше знать))
@j-lewis
@j-lewis 3 жыл бұрын
@@Zak0532 Это точно, мастера подмастерья не учат.
@user-ve7tx3ud6n
@user-ve7tx3ud6n 3 жыл бұрын
Виталий спасибо Вам за ваш титанический труд. Здоровья Вам и Процветания каналу.
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Благодарю
@surr3955
@surr3955 3 жыл бұрын
Вот это я понимаю! Показательный пример качественной верстки.
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Спасибо
@user-zq2zo5un2z
@user-zq2zo5un2z 3 жыл бұрын
"Я сказал костыли? Я имел ввиду грамотное технологическое решение" Я запомнил это😂😂😂
@placid3495
@placid3495 3 жыл бұрын
Мне этого не хватало! Спасибо! Смотрю с огромным удовольствием!
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Благодарю
@isols7761
@isols7761 3 жыл бұрын
Наконец-то качественное видео про вёсртку с полного нуля! Спасибо Виталий😁
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Благодарю -)
@uiuxengineer
@uiuxengineer 3 жыл бұрын
Виталий, благодарю вас за труд! Обязательно посмотрю всё видео!
@user-ks8zi2wp8e
@user-ks8zi2wp8e 3 жыл бұрын
Теперь с нетерпением жду вторую часть!!! Спасибо за годный контент!
@koshakkoshakov7104
@koshakkoshakov7104 3 жыл бұрын
Очень круто! С нетерпением жду следующую часть! Очень нравится такой формат.
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Отлично)
@badmad8234
@badmad8234 3 жыл бұрын
Это первый курс в открытом рунете на эту тему с таким качеством материала и субъекта преподносящего его
@ildargalileo3141
@ildargalileo3141 3 жыл бұрын
Такое чувство , когда потратив 6 часов на это видео сэкономишь 100-ни часов в будущем. Огромный респект тебе Виталий за то, что ты делаешь для подписчиков!!!
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Очень приятно такое слышать (читать)! Спасибо.
@user-ti9jw3im1p
@user-ti9jw3im1p 3 жыл бұрын
Спасибо за видео! В голове сложилась определенная схема работы по верстке. Мне очень не хватало именно такого системного подхода
@constantinem.8269
@constantinem.8269 3 жыл бұрын
Вау! Ещё не смотрел, но тут лайк не глядя. Огромное вам спасибо, за такой контент!
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Благодарствую -)
@user-lw1ur3uy2k
@user-lw1ur3uy2k 3 жыл бұрын
Благодарю, для новичка это кладезь знаний. Всех благ желаю.
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Спасибо
@user-ff3lc1et3u
@user-ff3lc1et3u 3 жыл бұрын
Видео просто нереально космоподобное, кладезь ценной информации, титанический труд
@aleksandrsilkin8594
@aleksandrsilkin8594 3 жыл бұрын
Просто большое спасибо, что делитесь с нам опытом!
@saharaprotocol
@saharaprotocol Жыл бұрын
Спасибо Виталий за понятный, полезный и систематизированный материал на Вашем канале.
@vitaliypasiuta8636
@vitaliypasiuta8636 3 жыл бұрын
Я только неделю назад хотел сверстать этот макет) Спасибо за ролик
@j-lewis
@j-lewis 3 жыл бұрын
Я много разной вёрстки у разных учителей посмотрел, но это.. Это просто next level, blown mind! Очень круто и структурировано. Настоящий высокопрофессиональный подход, такой фиг где увидешь! Спасибо большое, и хотелось бы ещё хотя бы один свёрстанный маэстро макетик увидеть и желательно с натяжкой на WP, если время найдётся. Чтобы закрепить материал так сказать. Буду использовать как подручное пособие для своей вёрстки!
@drknss3021
@drknss3021 3 жыл бұрын
Вау! Вот это подарок!!! Просто супер!)
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Благодарю -)
@lisofsky8151
@lisofsky8151 3 жыл бұрын
1 месяц назад (изменено) Просто чувствуется большой опыт! Спасибо Вам за то, что делитесь знаниями с нами в этих видео бесплатно. Лучший туториал однозначно! Потому что лучшее обучение - это практика, а здесь только она) написал Михаил
@lackevil3730
@lackevil3730 3 жыл бұрын
Спасибо за опыт! Всё очень круто получилось! Классный формат, хорошо что начали пилить такие ролики
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Такой формат уже был на канале...
@user-mf2we4gb8w
@user-mf2we4gb8w 3 жыл бұрын
Виталий ты лучший, спасибо за такой контент)))
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Спасибо
@anv7259
@anv7259 3 жыл бұрын
кучу новых фишек для себя открыл!спасибо
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Спасибо
@chesterammo1362
@chesterammo1362 3 жыл бұрын
Виталий, спасибо огромное за ваш труд! Взорву свой pomodoro)))
@nikolay6143
@nikolay6143 3 жыл бұрын
Спасибо большое за такую большую проделанную работу. Занимаюсь фронтом уже больше пяти лет и всегда интересно посмотреть решение типовых задач с ракурса другого разработчика.
@peterkulko
@peterkulko 3 жыл бұрын
Очень крутой и полезный контент! Можно больше?)
@user-bg6ec6uj7p
@user-bg6ec6uj7p 3 жыл бұрын
Дорогой Виталий! Изучаю верстку три месяца и в голове была настоящая каша. Только после просмотра этого ролика сложился паззл! Работа вами проделана титаническая, но это именно то, что надо! Молодец! Подписка однозначно! Считаю, что эта информация сэкономила мне часов 100! Успехов вам! Хотела дополнить - Виталий единственный из всех авторов по этой теме (а посмотрела я ее - море!) учит не просто как делать, но и как размышлять! Отличная подача материала. Сама четыре лендинга заваяла после просмотра - это, оказывается не сложно, когда Виталий объяснил!
@Phoenix-uz4fp
@Phoenix-uz4fp 3 жыл бұрын
Огромное спасибо за видео!
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
И вам спасибо за просмотр.
@maximkaushan
@maximkaushan 3 жыл бұрын
О, топ контент подъехал) Ещё и вовремя
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Спасибо
@eanewmahariel2279
@eanewmahariel2279 3 жыл бұрын
Какая классная напоминалочка для лайков)) грех не поставить.. и не отмотать на 5 секунд назад :D
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Спасибо)
@assetzh
@assetzh 3 жыл бұрын
Как круто, спасибо. Лайк, коммент
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Благодарю
@user-cj2bq3xz4s
@user-cj2bq3xz4s 3 жыл бұрын
Вы великолепны!
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Благодарю -)
@K1appy
@K1appy 3 жыл бұрын
Спасибо за такой мощный видос
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Благодарю
@alexey_horbunov
@alexey_horbunov 3 жыл бұрын
Спасибо огромное, бомба, буду прорабатывать
@belonit48
@belonit48 Жыл бұрын
Спасибо. Очень полезный урок
@user-ut3re8nd1p
@user-ut3re8nd1p 3 жыл бұрын
Спасибо что делитесь своим опытом))
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Благодарю -)
@oleksandrchervonnyi6347
@oleksandrchervonnyi6347 3 жыл бұрын
Крутой контент, автор отлично объясняет ! Лучше бесплатное видео по верстке, удачи в развитии вашего канала !
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Спасибо
@j-lewis
@j-lewis 3 жыл бұрын
И небесплатное тоже.
@Ny.da.labno_2.0
@Ny.da.labno_2.0 3 жыл бұрын
пушка,топ видео,уже смотрю
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
У вас на это как раз есть все выходные -)
@williamhanna1794
@williamhanna1794 3 жыл бұрын
Очень круто!)
@andyvoice
@andyvoice 3 жыл бұрын
супер контент! в топы!
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Благодарю
@JesseJames-mh5kb
@JesseJames-mh5kb 3 жыл бұрын
Спасибо за ваш титано-адамантивый труд. Лейкоцит.
@flyinghome1139
@flyinghome1139 3 жыл бұрын
Спасибо за ваш труд. Сразу лайк.!
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Благодарю
@ViTheBraviest
@ViTheBraviest 3 жыл бұрын
Нормально. Будет под что покушать и поспать)
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
У меня что, настолько успокаивающий голос?))
@user-bq7vu7gh3q
@user-bq7vu7gh3q 3 жыл бұрын
Оч крутой ролик! Было бы круто, если бы вы сделали курсы по html, css и js, для меня как для новичка во всем этом - это очень интересно.
@SergiiBespalko
@SergiiBespalko 3 жыл бұрын
спасибо, очень круто
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Благодарю
@user-tr8xi3ik3c
@user-tr8xi3ik3c 3 жыл бұрын
Очень качественный, понятный и усваиваемый контент. Благодарю за ваш труд. Как будет время засяду.
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Спасибо
@user-pt3xo4nc3f
@user-pt3xo4nc3f 3 жыл бұрын
Мне вообще по кайфу Frontend) Что не понимаю: 1. Начинаю копаться с самого начала, начало начал когда только добавили данную функцию. Узнаю про неё все. 2. Вырезаю из цветной бумаги данную функцию и подписываю. 3. При начале вёрстки собираю сначала все на белой доске. Занимает минут 10 от силы. 4. На ИЗИ верстаю)). Спасибо за Ваш труд. Узнал не много, но для меня даже крохи инфы очень полезны.
@kotlancer
@kotlancer 3 жыл бұрын
Пока лайк и комментарий, посмотрю чуть позже ^^
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Чего ждать-то? Как раз выходные.. -)
@Zak0532
@Zak0532 3 жыл бұрын
Спасибо за видео! Было бы круто узнать о том как ты так круто работаешь с текстом!)
@Zak0532
@Zak0532 3 жыл бұрын
извиняюсь, с кодом
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Одно из первых видео на канале про VS Code
@bulldog8597
@bulldog8597 3 жыл бұрын
Это были лучшие 6 часов моей жизни
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Спасибо))
@boldureans
@boldureans 3 жыл бұрын
Ну наконец-то
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
А я все жду, жду, когда же ты придёшь...)
@VIMPdev
@VIMPdev 3 жыл бұрын
Ашка)) Думаю олды вспомнят. Раньше был сериал "Чародеи. Страна великого дракона". И там была злая чародейка Ашка). Аж скупую слезу пустил, когда вспомнил)
@ivandelibaltov1850
@ivandelibaltov1850 3 жыл бұрын
Шикарно! Большое спасибо за такой качественный контент.
@miraigrafit7865
@miraigrafit7865 3 жыл бұрын
Круто 🔥
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Спасибо
@masterswift9700
@masterswift9700 3 жыл бұрын
good job!
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Thx
@user-wn6lw8wi3h
@user-wn6lw8wi3h 2 жыл бұрын
Грамотное технологическое решение, хахахахах. Большое вам спасибо за уроки)
@Religion__
@Religion__ 3 жыл бұрын
Крутой канал
@dennisdovziy2775
@dennisdovziy2775 3 жыл бұрын
Огромная благодарность за контент! Не лучше ли обнуление margin и padding сделать глобально для селектора * ?
@jeniasuvorov6231
@jeniasuvorov6231 3 жыл бұрын
Очень крутое видео, с удовольствием выполнил данный макет, с учетом подхода Автора:) Хотелось бы немножко обьяснить преимущества использования переменных в качестве Пикселей)
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Смотрите следующую часть -)
@alisareys3200
@alisareys3200 3 жыл бұрын
Очень полезно и интересно. А когда будет продолжение?
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Как только оно появится, подписчики телеграм канала узнают первыми) Вы знаете, что делать)
@lion1687
@lion1687 3 жыл бұрын
Крутяк 👍
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Спасибо
@user-qo9sh6do6h
@user-qo9sh6do6h 3 жыл бұрын
Что дает использование переменной $base в проекте?
@geek2060
@geek2060 3 жыл бұрын
супер видео, лайк подписка сразу! но вот только я не пойму, классы по БЭМ-у написаны все?
@privet_baget
@privet_baget 3 жыл бұрын
Тут макет не по БЭМу, дизайнер набросал кучу разношерстной фигни (типикал десигнер), которую сложно выделить во вменяемые компоненты. Поэтому и верстать с использованием БЭМ наименований классов считаю в данном случае нецелесообразным - слишком громоздко получится.
@whicencer8819
@whicencer8819 3 жыл бұрын
Виталий, можете пожалуйста мне объяснить почему задаёте отступы внутренние для section-inner, если по макету видно что отступы у section-outer(или margin'ы для иннера)
@TheTexPro
@TheTexPro 3 жыл бұрын
Отличное видео! Спасибо большое. Подчерпнул для себя много нового. Такой вопрос - чем объясняется необходимость указывать размерность по типу $base, исходя из того, что можно использовать скажем "rem", или даже "px" так как в макетах дизайнеры редко заморачиваются над отступами и одной размерностью (целостностью, кратностью) ?
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Ответ в сообществе
@thedarkside8380
@thedarkside8380 3 жыл бұрын
Еще будет про вёрстку?)
@falconstreams6277
@falconstreams6277 3 жыл бұрын
А почему в этот раз без Бэма и файл .scss в папке css лежит?
@user-ti5hg7oj8s
@user-ti5hg7oj8s 3 жыл бұрын
сайтама от веба спасибо тебе
@alinafitisova3176
@alinafitisova3176 3 жыл бұрын
Супер, я жду подобных роликов! Может запишешь как-то видео о кросбраузерности, в особенности интересует большой список не поддерживаемых свойств css браузерами Safari, mobile/desktop?
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Нечего там записывать. Большая часть вопросов снимается ресурсом caniuse.com и модулем autoprefixer. Остальные вопросы решаются в частном порядке.
@j-lewis
@j-lewis 3 жыл бұрын
@@prosto_razrabotka спасибо за инфо!
@othersidesss1
@othersidesss1 Жыл бұрын
Виталий, ты делаешь качественный контент! Спасибо! Почему забросил??
@user-ps6hx3id5i
@user-ps6hx3id5i 3 жыл бұрын
Круть
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Спасибо
@user-tn1yc1ij8d
@user-tn1yc1ij8d 3 жыл бұрын
Supereee
@maxskurski1138
@maxskurski1138 3 жыл бұрын
2:02:06 уютнейший кабинет ))) круто
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Спасибо
@qutbiddinmakhmudov4088
@qutbiddinmakhmudov4088 3 жыл бұрын
Спасибо за видео. Только один вопрос будет ли ссылка на репозиторий этого проекта. Просто нету времени смотреть полностью) Хотелось бы код изучить)))
@xkomiks
@xkomiks 3 жыл бұрын
Плюс
@user-in7wu6sb5r
@user-in7wu6sb5r 3 жыл бұрын
Виталий, хотелось бы узнать, а где-то можно взять исходники этой странички, хотелось бы самому сверстать?
@user-in7wu6sb5r
@user-in7wu6sb5r 3 жыл бұрын
Ой, уже нашел, простите
@volodymyrkashaniy43
@volodymyrkashaniy43 3 жыл бұрын
6 часов, нихрена себе
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Сам в шоке -)
@hemodon
@hemodon 3 жыл бұрын
На одном макете в Фигме сейчас 13 человек. Жах. Необходимо всегда делать Duplicate to your draft...
@mikitagrudkowski9634
@mikitagrudkowski9634 2 жыл бұрын
А в чем преимущества такого рефакторинга цветов? Расскажите если не сложно
@dmitrygerasimov4473
@dmitrygerasimov4473 3 жыл бұрын
Добрый день, подскажите как вы скопировали все цвета на 4:50?
@biLLie_wiLLie
@biLLie_wiLLie 2 жыл бұрын
Автору спасибо! Но хочется спросить - в реальной верстке вы же делите код? header.scss, footer.pug и прочее ...
@prosto_razrabotka
@prosto_razrabotka 2 жыл бұрын
Зависит от масштаба проекта. В подобном не стал бы
@mishashmidt0
@mishashmidt0 3 жыл бұрын
Виталий скажи, если мы придерживаемся методологии БЭМ, почему мы отделяем блок от элемента дефисом ?
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Я не исключаю, что я где-то мог ошибиться, но скорее всего у меня дефисом отделён класс (блок) с несколькими словами, а не отделение блока от элемента
@user-ed1zt3ke3r
@user-ed1zt3ke3r 3 жыл бұрын
Оптимизация:D
@lamer492
@lamer492 3 жыл бұрын
О боже, на кончиках HTML5 12 из 10!
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
-))
@stixxpro
@stixxpro 2 жыл бұрын
Здравствуйте я полный Ноль ) . Хотел под видео руку поднабить ну и выяснилось что ни Гулпфайла у меня нет ни прочие файлы как у вас в подготовке я не имею. думаю в процессе где то выковыряю у вас и перепешу ))
@user-rs3wn9wi3b
@user-rs3wn9wi3b 3 жыл бұрын
Сделай, пожалуйста, ролик про полезные горячие клавиши в VS code. Уж очень ловко получается и экономит много времени, а то всю жизнь пользоваться сплошными кнтрл в +кнтрл с и клацать мышкой не комильфо) за раннее спасибо за труд!
@user-rs3wn9wi3b
@user-rs3wn9wi3b 3 жыл бұрын
Досмотрел до 17 минуты ,оказывается такой ролик уже есть. Ложная тревога
@bibblebabl
@bibblebabl 3 жыл бұрын
А разве макеты сейчас не верстаются mobile first? Сначала мобилка, планшет и уже в конце десктоп?
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
В данном вопросе нет Сейчас, Тогда, Потом. Есть разные подходы. И мобайл фирст один из них...
@lifegood7156
@lifegood7156 2 жыл бұрын
Здравствуйте почему вы на stats поставили number h2 а потом скачок видео а потом получается div вы еще после этого по этому поводу ни чего не говорили
@denisd9992
@denisd9992 3 жыл бұрын
может быть, я прослушал(или не досмотрел), но в чем выгода использовать $base: 4px? при адаптации?
@user-gf5xq6hv3f
@user-gf5xq6hv3f 3 жыл бұрын
если надо будет изменить все в большую или меньшую сторону то надо будет изменить ТОЛЬКО эту переменную и увеличится или уменьшится все пропорционально и не надо будет бегать и искать 1000 параметров
@user-zt8oj3zv9b
@user-zt8oj3zv9b 3 жыл бұрын
выгоды нет. в медиа запросе нельзя изменить сасс переменную. Даже если можно было бы то не бывает дизайнов где надо все синхронно масштабировать
@user-zt8oj3zv9b
@user-zt8oj3zv9b 3 жыл бұрын
@@user-gf5xq6hv3f такое надо бывает никогда
@user-gf5xq6hv3f
@user-gf5xq6hv3f 3 жыл бұрын
@@user-zt8oj3zv9b оно мб и так но если вдруг то...вот например заказчик говорит хочу версию для слабовидящих...
@paulnikon5580
@paulnikon5580 3 жыл бұрын
на 20ой минуте речь идёт о центрировании .wrapper-inner Для тех, у кого не произошло изменение при установке margin: 0 auto; проверте подключен ли у вас SASS. То есть, нужно: 1. установить плагин Live SASS compiler в VS Code, перезагрузить приложение. 2. Так, как у вас уже подключен styles.css в файле index.html, то нажмите клавишу WATCH SASS в нижней панели VS Code. 3. Плагин сгенерирует файл styles.css и styles.css.map в папку проекта /CSS А то я начал искать синтаксические ошибки, думал, что я тут пропустил или ещё что...А дело было в отсутствии плагина.
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Да, вы пропустили момент, где я в самом начале показал мой конфиг галпа и сказал, что его задача - компилировать сасс и рестартить страницу. Так что дело в отсутствии внимательности, а не плагина.
@paulnikon5580
@paulnikon5580 3 жыл бұрын
@@prosto_razrabotka да, я пропустил, спасибо за ответ. Вы делаете хороший контент, спасибо!
@j-lewis
@j-lewis 3 жыл бұрын
Гы. В помойку ваши плагины. Только Gulp!
@akitmentorconsultant4696
@akitmentorconsultant4696 3 жыл бұрын
А можно ли увидеть саму получившуюся HTML и CSS? А то не возможно получается использовать видео как справочник без самого "справочника"
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Да, исходники есть на Бусти. Ссылка в описании
@opex9979
@opex9979 3 жыл бұрын
Хм, а вы тут использовали методологию ITCSS о которой говорили в интервью с бородой? Если да, то я ее исполнение немного по другому представлял с ваших слов
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Где вы тут хоть под каким-то углом что-то похожее на ITCSS углядели?
@opex9979
@opex9979 3 жыл бұрын
@@prosto_razrabotka Я не сказал что увидел, спрашивал же
@admeliorem2136
@admeliorem2136 3 жыл бұрын
Прошу, снимите пожалуйста ещё один ролик по вёрстке сайта с нуля, если у вас будет на то время
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
А эти 3 части уже изучили?
@admeliorem2136
@admeliorem2136 3 жыл бұрын
@@prosto_razrabotka Я просмотрел ролик флэш верстка landing page, но поскольку начал изучать этот ролик, то решил выразить свой восторг под этим видео, что бы не возвращаться к прежнему ролику.
@j-lewis
@j-lewis 3 жыл бұрын
(1:22:17) Кто кодит вместе с Виталием: На видео промотался кусочек, где Виталий вставляет цвет заголовков в CSS для heading'ов, поэтому я например сперва понять не мог, почему у меня цвет отличается. Надо добавить цвет. ;)
@zephyr2383
@zephyr2383 3 жыл бұрын
у меня возник вопрос, ты так же и с настоящими заказами поступаешь? я имею ввиду там отступы по макету одни а ты ставишь свои, понятное дело что твои отступы от секций правильные , потому что они стандартизированы и одинаковы, не как в макете, но делаешь ли ты так с настоящими макетами? просто я учу верстку и думал что нужно один в один делать макет даже если он с точки зрения верстки не правильный, или у тебя просто нет возможности дизайнеру указать на эти ошибки и что бы он их справив так как это тестовый макет?)
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Да, и с настоящими так же поступаю.
@zephyr2383
@zephyr2383 3 жыл бұрын
@@prosto_razrabotka мощно XD
@j-lewis
@j-lewis 3 жыл бұрын
Этим и отличается новичок от мастера. Мастер не только сам делает правильно, но и исправляет попутно ошибки других, в данном случае дизайнера макета.
@faizulla5838
@faizulla5838 3 жыл бұрын
Привет, а как на вторую часть попасть?
@prosto_razrabotka
@prosto_razrabotka 3 жыл бұрын
Нужно быть подписанным на телеграм канал, чтоб не пропустить новый выпуск -)
@user-qm5fv5by5z
@user-qm5fv5by5z 3 жыл бұрын
Привет, зачем section- вначале везде?
@j-lewis
@j-lewis 3 жыл бұрын
Надо же поделить сайт на секции. Обычная тема.
ПООСТЕРЕГИСЬ🙊🙊🙊
00:39
Chapitosiki
Рет қаралды 34 МЛН
He tried to save his parking spot, instant karma
00:28
Zach King
Рет қаралды 19 МЛН
Super gymnastics 😍🫣
00:15
Lexa_Merin
Рет қаралды 14 МЛН
Eigenes Webserver Dashboard | Ep.1
46:51
Code Buff
Рет қаралды 4
Responsive web design in 37 minutes + layout. You don’t need Bootstrap!
36:44
Фрілансер по життю
Рет қаралды 1 МЛН
CSS свойствах необходимые начинающему / CSS уроки
49:48
Просто: разработка
Рет қаралды 88 М.
Как сделать Плагин на JS?
36:20
Просто: разработка
Рет қаралды 7 М.
[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета
1:06:37
ПООСТЕРЕГИСЬ🙊🙊🙊
00:39
Chapitosiki
Рет қаралды 34 МЛН