Спасибо! Очень познавательно. Правда, поначалу немного испугали своей скоростью. Но к концу видео привыкаешь к этому. Спасибо за фишки в написании быстрого кода!
Можно упростить реализацию sticky footer. 1) В классе .wrapper заменить min-height: 100% на min-height: 100vh. Это позволит не писать width: 100% для тегов html и body. 2) Вместо flex использовать grid. Классу .wrapper понадобится только 2 свойства: display: grid; grid-template-rows: min-content 1fr min-content. Соответственно, тегу main ничего писать не нужно.
@@andreysgra не сказал бы, что ваш вариант проще... по крайней мере, для меня) наверное, дело привычки... я привык использовать вариант, который показал.
Пожалуйста) Честно говоря, не смогу. С препроцессорами я работал еще на заре их появления, лет так 15 назад. Немного поработав, не увидел для себя особой выгоды их использования. На практике в реальных проектах, когда нужно что-то изменять в уже готовом проекте, так они и вовсе лишние. Поэтому, поигравшись с новой модной штукой тогда, я для себя решил, что она мне не очень и нужна. С тех пор и не использую. С появлением новых возможностей CSS, как мне кажется, надобность в препроцессорах вообще минимальна (мое мнение, которое не навязываю).
@@perstj5746 да, как-то Firefox для меня более привычен. Chrome также иногда использую, но на постоянной основе вряд ли на него перейду, Firefox мне удобнее и привычнее.
Это плагин Live Server для редактор VSCode. Его можно установить из редактора (кнопка Extensions). На всякий случай ссылка на плагин: marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Здравствуйте! На странице показывается заголовок Hello, world!, который я прописал в HTML (не в JS!). На 4:40 базовую верстку я скопировал из документации Bootstrap и в этой верстке как раз и есть заголовок Hello, world! А вот то, что я вывел в консоль через JS, строку Hello, она и выводится в консоль (не на страницу!) на отметке времени 8:24. Посмотрите внимательнее, на 8:20 я как раз и открываю консоль.
Пожалуйста) Если работаете локально, на своем компьютере разрабатываете проект, тогда, конечно же, быстрее будет подключаться локальная версия файла, который Вы скачали к себе на компьютер. Но если речь о проекте, который расположен уже на хостинге, тогда для большинства пользователей быстрее будет работать подключение через CDN. В отдельном видео могу объяснить принцип работы подключения через CDN, чтобы было понятнее, почему этот вариант предпочтительнее.
Підкажіть, в модальному вікні bootstrap 5 додав поле типу text де відкривається календар AIR DATEPICKER. Модальне вікно перебиває календар і він відкривається на другому плані. Які налаштування потрібно змінити, щоб календар був поверх модального вікна. Дякую
З допомогою правила z-index можна підняти потрібний елемент вище по осі. Тому для потрібного елемента потрібно встановити вищий z-index. .air-datepicker-global-container { z-index: 9999; }
Добрый вечер, Артем! Мог бы, если бы у меня был макет) потому и делаю без макета, что у меня его нет (в уроке об этом говорил, вроде). Относительно сетки в макете, то она часто 12-колоночная, как в Bootstrap. Поэтому просто смотрите на количество колонок в макете для нужного элемента и столько же колонок используете в верстке. Ничего сложного)
А какая разница? Тут, как говорится, от перемены мест слагаемых - сумма не меняется. Это раз. Ну а второе - подвал я не верстал в этом уроке, а лишь обозначил его, чтобы прижать к низу. Ну а верстка подвала как раз уже и происходит в конце верстки главной страницы, конкретнее - в 8-ом уроке.
Варианта два: 1. Код все же не один в один. В этом случае можете взять код из моих исходников, чтобы исключить данный вариант. 2. Отсутствует связь с CDN, который используется для подключения Bootstrap. В этом случае можно использовать другой CDN или же просто скачать Boostrap с офсайта и подключить локально. Других вариантов проблемы не вижу. Чтобы подсказать точнее - нужно увидеть Ваш код. Если не разберетесь - выложите его куда-то, чтобы можно было его посмотреть.
Написать свою Цмску это уже огромный плюс, ведь сайт надо отдать заказчику, а товары в магазин и описание добавлять будет он, голый вид страниц это не сайт, нужна админ панель
Сайты бывают разные) Если это визитка или лендинг, то для таких сайтов, как правило, админка и не нужна. Но если это интернет-магазин или любой другой сайт, контент которого может изменяться, тогда да, для такого сайта нужна CMS. В данном плейлисте будет только верстка. Но на канале есть плейлисты по посадке верстки на OpenCart и WooCommerce.
@@matroskin978 а помимо компонентов коммерции, к примеру новостные блоги, многостраничные сайты с элементами продаж, сайты объявлений, все это проекты, которые требуют полноценное добавление контента. Поэтому хотелось бы узнать как на голую обертку, верстку, добавить полноценную админку, как у популярных Цмс типа Жумлы
Либо писать свою CMS, либо использовать готовую. Например, WordPress. По WordPress есть плейлист на канале. В нем создается интернет-магазин. Можете посмотреть его. Принцип будет таким же, как и для прочих CMS. По написанию собственной CMS у меня были курсы, но все они коммерческие. Бесплатных уроков пока не делал по этой теме.
@@matroskin978 Ворд пресс и Джумла это конструкторы, функционал найти можно , но как правило компоненты платные и на инглише. Не всегда подходящие под заказ. Нужны глубокие познания Java Script и PHP. а там и Ajax, React и бла бла бла, так в чем смысл одностраничной верстки, если нет реализации самого главного, админ панели. Верстать для себя не актуально, на заказ тоже, как клиент будет добавлять контент. Поэтому я думаю это обязательно для любого сайта.
Уроки по верстке и бутстрапу от вас всегда нужно и интересно. Спасибо.
Пожалуйста)
наконец я нашел где не просто пишут код а объясняют даже если ты в html css js не шибко силен , уж за это огромное спасибо
Пожалуйста 🙂
как раз собрался шаблон переверстать с 4 версии а тут ваши уроки как раз вовремя нашёл ваш канал.
Слышу этот голос, понимаю, сейчас будет много полезной информации
Благодарю ☺
Спасибо! Очень познавательно. Правда, поначалу немного испугали своей скоростью. Но к концу видео привыкаешь к этому. Спасибо за фишки в написании быстрого кода!
Пожалуйста 😉
Урок супер просто! Всё видно слышно понятно. Спасибо большое. Лайк и подписон однозначно.
Спасибо 🙂
спасибо за ваши уроки! информативно!
И Вам спасибо за отзыв)
хороший плейлист и уроки, как раз хочу подтянуть bootstrap5, лайк и подписка
Спасибо 🙂
Спасибо, как всегда полезно)
Пожалуйста ;)
Большое спасибо за классный урок
Андрей спасибо! Очень понятно объясняешь. Подписался.
Спасибо)
спасибо за видео, все супер понятно
@@dashuned пожалуйста 🙂
Шикарно! Спасибо.
Можно упростить реализацию sticky footer. 1) В классе .wrapper заменить min-height: 100% на min-height: 100vh. Это позволит не писать width: 100% для тегов html и body. 2) Вместо flex использовать grid. Классу .wrapper понадобится только 2 свойства: display: grid; grid-template-rows: min-content 1fr min-content. Соответственно, тегу main ничего писать не нужно.
@@andreysgra не сказал бы, что ваш вариант проще... по крайней мере, для меня) наверное, дело привычки... я привык использовать вариант, который показал.
спасибо за урок)
Пожалуйста)
спасибо добрый человек
Пожалуйста, добрый человек 🙂
Большое спасибо за Ваши уроки. Хочу Вас попросить , не могли бы Вы сделать видеоуроки по SASS для новичков?
Пожалуйста)
Честно говоря, не смогу. С препроцессорами я работал еще на заре их появления, лет так 15 назад. Немного поработав, не увидел для себя особой выгоды их использования. На практике в реальных проектах, когда нужно что-то изменять в уже готовом проекте, так они и вовсе лишние. Поэтому, поигравшись с новой модной штукой тогда, я для себя решил, что она мне не очень и нужна. С тех пор и не использую.
С появлением новых возможностей CSS, как мне кажется, надобность в препроцессорах вообще минимальна (мое мнение, которое не навязываю).
спасибо.. очень познавательно
Спасибо)
Нештяк парень ,🤙🤝
Спасибо)
@@matroskin978 mozila firefox удобен для вас чем Гугл .
@@perstj5746 да, как-то Firefox для меня более привычен. Chrome также иногда использую, но на постоянной основе вряд ли на него перейду, Firefox мне удобнее и привычнее.
подскажите, пожалуйста, как сделать эту кнопку "go live" и запустить проект чтобы видеть сайт как у вас на 8:30
Это плагин Live Server для редактор VSCode. Его можно установить из редактора (кнопка Extensions). На всякий случай ссылка на плагин:
marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Андрей красавчик
Спасибо 😊
Здравствуйте. Подскажите пожалуйста, почему у Вас браузер показывает Hello, world! 8m.38sec., хотя Вы прописали в main.js : console.log('Hello');
Здравствуйте!
На странице показывается заголовок Hello, world!, который я прописал в HTML (не в JS!). На 4:40 базовую верстку я скопировал из документации Bootstrap и в этой верстке как раз и есть заголовок Hello, world!
А вот то, что я вывел в консоль через JS, строку Hello, она и выводится в консоль (не на страницу!) на отметке времени 8:24. Посмотрите внимательнее, на 8:20 я как раз и открываю консоль.
Автор, спасибо. Хотел спросить, есть ли разница в скорости прогрузки страницы для пользователя при использовании cdn или установки bootstrap локально?
Пожалуйста)
Если работаете локально, на своем компьютере разрабатываете проект, тогда, конечно же, быстрее будет подключаться локальная версия файла, который Вы скачали к себе на компьютер. Но если речь о проекте, который расположен уже на хостинге, тогда для большинства пользователей быстрее будет работать подключение через CDN. В отдельном видео могу объяснить принцип работы подключения через CDN, чтобы было понятнее, почему этот вариант предпочтительнее.
ХАРОШШШШ
Підкажіть, в модальному вікні bootstrap 5 додав поле типу text де відкривається календар AIR DATEPICKER. Модальне вікно перебиває календар і він відкривається на другому плані.
Які налаштування потрібно змінити, щоб календар був поверх модального вікна. Дякую
З допомогою правила z-index можна підняти потрібний елемент вище по осі. Тому для потрібного елемента потрібно встановити вищий z-index.
.air-datepicker-global-container {
z-index: 9999;
}
@@matroskin978 Дякую.
@@matroskin978 Дуже дякую, все вийшло, не знав до якого класу потрібно було прописувати z-index
Будь ласка :)
Исходники к уроку - github.com/matroskin978/bootstrap5-eshop/tree/0fe41a62083f90dd7493b212c430d0932226c917
Добрый вечер можете сделать видео по макету psd или figma и объяснить сетку на psd макете как её использовать в Bootstrap 5
Добрый вечер, Артем!
Мог бы, если бы у меня был макет) потому и делаю без макета, что у меня его нет (в уроке об этом говорил, вроде).
Относительно сетки в макете, то она часто 12-колоночная, как в Bootstrap. Поэтому просто смотрите на количество колонок в макете для нужного элемента и столько же колонок используете в верстке. Ничего сложного)
Спасибо!
А не проще ли верстать подвал в конце верстки сайта, вместо того чтобы таким образом через флекс прижимать его вниз?
А какая разница? Тут, как говорится, от перемены мест слагаемых - сумма не меняется. Это раз. Ну а второе - подвал я не верстал в этом уроке, а лишь обозначил его, чтобы прижать к низу. Ну а верстка подвала как раз уже и происходит в конце верстки главной страницы, конкретнее - в 8-ом уроке.
@@matroskin978 ничего против не имею, просто лично мне удобнее делать футер полностью в конце верстки, не обозначая его как на ролике
Дело вкуса ;)
@@matroskin978 сколько людей столько же мнений)
100%!
У меня не получается добавить иконку
Что-то делаете не так. К уроку есть ссылка на исходники.
Код один в один как у вас но браузеры в упор не видят подключеный бутстрап
Варианта два:
1. Код все же не один в один. В этом случае можете взять код из моих исходников, чтобы исключить данный вариант.
2. Отсутствует связь с CDN, который используется для подключения Bootstrap. В этом случае можно использовать другой CDN или же просто скачать Boostrap с офсайта и подключить локально.
Других вариантов проблемы не вижу. Чтобы подсказать точнее - нужно увидеть Ваш код. Если не разберетесь - выложите его куда-то, чтобы можно было его посмотреть.
@@matroskin978 Спасибо Андрей уже разобрался , проблема как часто бывает была в кавычке )) продолжаю учебу по твоим урокам .
@@84Health успехов! 😉
Написать свою Цмску это уже огромный плюс, ведь сайт надо отдать заказчику, а товары в магазин и описание добавлять будет он, голый вид страниц это не сайт, нужна админ панель
Сайты бывают разные)
Если это визитка или лендинг, то для таких сайтов, как правило, админка и не нужна. Но если это интернет-магазин или любой другой сайт, контент которого может изменяться, тогда да, для такого сайта нужна CMS.
В данном плейлисте будет только верстка. Но на канале есть плейлисты по посадке верстки на OpenCart и WooCommerce.
@@matroskin978 а помимо компонентов коммерции, к примеру новостные блоги, многостраничные сайты с элементами продаж, сайты объявлений, все это проекты, которые требуют полноценное добавление контента. Поэтому хотелось бы узнать как на голую обертку, верстку, добавить полноценную админку, как у популярных Цмс типа Жумлы
Либо писать свою CMS, либо использовать готовую. Например, WordPress. По WordPress есть плейлист на канале. В нем создается интернет-магазин. Можете посмотреть его. Принцип будет таким же, как и для прочих CMS. По написанию собственной CMS у меня были курсы, но все они коммерческие. Бесплатных уроков пока не делал по этой теме.
@@matroskin978 Ворд пресс и Джумла это конструкторы, функционал найти можно , но как правило компоненты платные и на инглише. Не всегда подходящие под заказ. Нужны глубокие познания Java Script и PHP. а там и Ajax, React и бла бла бла, так в чем смысл одностраничной верстки, если нет реализации самого главного, админ панели. Верстать для себя не актуально, на заказ тоже, как клиент будет добавлять контент. Поэтому я думаю это обязательно для любого сайта.
+