Адаптивная верстка интернет-магазина на Bootstrap 5. Урок 1

В первом видео мы создадим проект, подключим Bootstrap, используя ссылки CDN, а также набросаем структуру главной страницы сайта.
Наиболее популярным CSS-фреймворком на сегодняшний день является Bootstrap. Поэтому знать его и уметь его использовать - будет несомненным плюсом для верстальщика. В данном цикле уроков мы сверстаем сайт интернет-магазина, используя последнюю версию Bootstrap 5.
Исходники к уроку - github.com/mat...

[@alexdreamer11]

Уроки по верстке и бутстрапу от вас всегда нужно и интересно. Спасибо.

[@matroskin978]

Пожалуйста)

[@devidbrown8176]

Шикарно! Спасибо.

[@autogarages]

как раз собрался шаблон переверстать с 4 версии а тут ваши уроки как раз вовремя нашёл ваш канал.

[@deleted1219]

наконец я нашел где не просто пишут код а объясняют даже если ты в html css js не шибко силен , уж за это огромное спасибо

[@matroskin978]

Пожалуйста 🙂

[@Павел-у6м4г]

Слышу этот голос, понимаю, сейчас будет много полезной информации

[@matroskin978]

Благодарю ☺

[@sergeykondratev5721]

Спасибо, как всегда полезно)

[@matroskin978]

Пожалуйста ;)

[@SERGex8]

спасибо за ваши уроки! информативно!

[@matroskin978]

И Вам спасибо за отзыв)

[@user_Vell]

Урок супер просто! Всё видно слышно понятно. Спасибо большое. Лайк и подписон однозначно.

[@matroskin978]

Спасибо 🙂

[@Alex_Pav0208]

Большое спасибо за классный урок

[@vadim_romanov]

хороший плейлист и уроки, как раз хочу подтянуть bootstrap5, лайк и подписка

[@matroskin978]

Спасибо 🙂

[@cherepashki]

спасибо добрый человек

[@matroskin978]

Пожалуйста, добрый человек 🙂

[@Zloy_Barmaley]

Андрей спасибо! Очень понятно объясняешь. Подписался.

[@matroskin978]

Спасибо)

[@ЯрославБелый-е4н]

Большое спасибо за Ваши уроки. Хочу Вас попросить , не могли бы Вы сделать видеоуроки по SASS для новичков?

[@matroskin978]

Пожалуйста) Честно говоря, не смогу. С препроцессорами я работал еще на заре их появления, лет так 15 назад. Немного поработав, не увидел для себя особой выгоды их использования. На практике в реальных проектах, когда нужно что-то изменять в уже готовом проекте, так они и вовсе лишние. Поэтому, поигравшись с новой модной штукой тогда, я для себя решил, что она мне не очень и нужна. С тех пор и не использую. С появлением новых возможностей CSS, как мне кажется, надобность в препроцессорах вообще минимальна (мое мнение, которое не навязываю).

[@АртурПоздняк-я9х]

спасибо за урок)

[@matroskin978]

Пожалуйста)

[@Keep_change]

спасибо.. очень познавательно

[@matroskin978]

Спасибо)

[@СергейТабунчик-ш2й]

Спасибо!

[@megadeath9056]

Андрей красавчик

[@matroskin978]

Спасибо 😊

[@matroskin978]

Исходники к уроку - github.com/matroskin978/bootstrap5-eshop/tree/0fe41a62083f90dd7493b212c430d0932226c917

[@N1htmare]

ХАРОШШШШ

[@perstj5746]

Нештяк парень ,🤙🤝

[@matroskin978]

Спасибо)

[@perstj5746]

​@@matroskin978 mozila firefox удобен для вас чем Гугл .

[@matroskin978]

@@perstj5746 да, как-то Firefox для меня более привычен. Chrome также иногда использую, но на постоянной основе вряд ли на него перейду, Firefox мне удобнее и привычнее.

[@era_ai777]

Здравствуйте. Подскажите пожалуйста, почему у Вас браузер показывает Hello, world! 8m.38sec., хотя Вы прописали в main.js : console.log('Hello');

[@matroskin978]

Здравствуйте! На странице показывается заголовок Hello, world!, который я прописал в HTML (не в JS!). На 4:40 базовую верстку я скопировал из документации Bootstrap и в этой верстке как раз и есть заголовок Hello, world! А вот то, что я вывел в консоль через JS, строку Hello, она и выводится в консоль (не на страницу!) на отметке времени 8:24. Посмотрите внимательнее, на 8:20 я как раз и открываю консоль.

[@АртёмДавыдов-ы5э]

Добрый вечер можете сделать видео по макету psd или figma и объяснить сетку на psd макете как её использовать в Bootstrap 5

[@matroskin978]

Добрый вечер, Артем! Мог бы, если бы у меня был макет) потому и делаю без макета, что у меня его нет (в уроке об этом говорил, вроде). Относительно сетки в макете, то она часто 12-колоночная, как в Bootstrap. Поэтому просто смотрите на количество колонок в макете для нужного элемента и столько же колонок используете в верстке. Ничего сложного)

[@AlbertCartel]

Автор, спасибо. Хотел спросить, есть ли разница в скорости прогрузки страницы для пользователя при использовании cdn или установки bootstrap локально?

[@matroskin978]

Пожалуйста) Если работаете локально, на своем компьютере разрабатываете проект, тогда, конечно же, быстрее будет подключаться локальная версия файла, который Вы скачали к себе на компьютер. Но если речь о проекте, который расположен уже на хостинге, тогда для большинства пользователей быстрее будет работать подключение через CDN. В отдельном видео могу объяснить принцип работы подключения через CDN, чтобы было понятнее, почему этот вариант предпочтительнее.

[@linzaznal8574]

подскажите, пожалуйста, как сделать эту кнопку "go live" и запустить проект чтобы видеть сайт как у вас на 8:30

[@matroskin978]

Это плагин Live Server для редактор VSCode. Его можно установить из редактора (кнопка Extensions). На всякий случай ссылка на плагин: marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

[@AndriiP86]

Підкажіть, в модальному вікні bootstrap 5 додав поле типу text де відкривається календар AIR DATEPICKER. Модальне вікно перебиває календар і він відкривається на другому плані. Які налаштування потрібно змінити, щоб календар був поверх модального вікна. Дякую

[@matroskin978]

З допомогою правила z-index можна підняти потрібний елемент вище по осі. Тому для потрібного елемента потрібно встановити вищий z-index. .air-datepicker-global-container { z-index: 9999; }

[@AndriiP86]

@@matroskin978 Дякую.

[@AndriiP86]

@@matroskin978 Дуже дякую, все вийшло, не знав до якого класу потрібно було прописувати z-index

[@matroskin978]

Будь ласка :)

[@denmatvienko1398]

Написать свою Цмску это уже огромный плюс, ведь сайт надо отдать заказчику, а товары в магазин и описание добавлять будет он, голый вид страниц это не сайт, нужна админ панель

[@matroskin978]

Сайты бывают разные) Если это визитка или лендинг, то для таких сайтов, как правило, админка и не нужна. Но если это интернет-магазин или любой другой сайт, контент которого может изменяться, тогда да, для такого сайта нужна CMS. В данном плейлисте будет только верстка. Но на канале есть плейлисты по посадке верстки на OpenCart и WooCommerce.

[@denmatvienko1398]

@@matroskin978 а помимо компонентов коммерции, к примеру новостные блоги, многостраничные сайты с элементами продаж, сайты объявлений, все это проекты, которые требуют полноценное добавление контента. Поэтому хотелось бы узнать как на голую обертку, верстку, добавить полноценную админку, как у популярных Цмс типа Жумлы

[@matroskin978]

Либо писать свою CMS, либо использовать готовую. Например, WordPress. По WordPress есть плейлист на канале. В нем создается интернет-магазин. Можете посмотреть его. Принцип будет таким же, как и для прочих CMS. По написанию собственной CMS у меня были курсы, но все они коммерческие. Бесплатных уроков пока не делал по этой теме.

[@denmatvienko1398]

@@matroskin978 Ворд пресс и Джумла это конструкторы, функционал найти можно , но как правило компоненты платные и на инглише. Не всегда подходящие под заказ. Нужны глубокие познания Java Script и PHP. а там и Ajax, React и бла бла бла, так в чем смысл одностраничной верстки, если нет реализации самого главного, админ панели. Верстать для себя не актуально, на заказ тоже, как клиент будет добавлять контент. Поэтому я думаю это обязательно для любого сайта.

[@БаночкаТушёнки]

А не проще ли верстать подвал в конце верстки сайта, вместо того чтобы таким образом через флекс прижимать его вниз?

[@matroskin978]

А какая разница? Тут, как говорится, от перемены мест слагаемых - сумма не меняется. Это раз. Ну а второе - подвал я не верстал в этом уроке, а лишь обозначил его, чтобы прижать к низу. Ну а верстка подвала как раз уже и происходит в конце верстки главной страницы, конкретнее - в 8-ом уроке.

[@БаночкаТушёнки]

@@matroskin978 ничего против не имею, просто лично мне удобнее делать футер полностью в конце верстки, не обозначая его как на ролике

[@matroskin978]

Дело вкуса ;)

[@БаночкаТушёнки]

@@matroskin978 сколько людей столько же мнений)

[@matroskin978]

100%!

[@84Health]

Код один в один как у вас но браузеры в упор не видят подключеный бутстрап

[@matroskin978]

Варианта два: 1. Код все же не один в один. В этом случае можете взять код из моих исходников, чтобы исключить данный вариант. 2. Отсутствует связь с CDN, который используется для подключения Bootstrap. В этом случае можно использовать другой CDN или же просто скачать Boostrap с офсайта и подключить локально. Других вариантов проблемы не вижу. Чтобы подсказать точнее - нужно увидеть Ваш код. Если не разберетесь - выложите его куда-то, чтобы можно было его посмотреть.

[@84Health]

@@matroskin978 Спасибо Андрей уже разобрался , проблема как часто бывает была в кавычке )) продолжаю учебу по твоим урокам .

[@matroskin978]

@@84Health успехов! 😉

[@chenese_product_tj]

У меня не получается добавить иконку

[@matroskin978]

Что-то делаете не так. К уроку есть ссылка на исходники.