Верстка сайта Bootstrap 5 / HTML / CSS на практике для новичков

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ธ.ค. 2024

ความคิดเห็น • 230

  • @annblok_webdev
    @annblok_webdev  4 ปีที่แล้ว +25

    Видео на русском о том, что изменилось в Bootstrap 5 - th-cam.com/video/7OabTpOJgHo/w-d-xo.html

    • @ДмитрийКононов-н7э
      @ДмитрийКононов-н7э 4 ปีที่แล้ว

      Что в вашем понимании есть " навороченный сайт"?

    • @ДокторнаПриколе
      @ДокторнаПриколе 4 ปีที่แล้ว +1

      @@ДмитрийКононов-н7э со сложными элементами

    • @annblok_webdev
      @annblok_webdev  4 ปีที่แล้ว +1

      @@ДмитрийКононов-н7э Который сильно отклоняется от сетки (не обязательно 12-ти колоночной, потому что число колонок в Bootstrap можно настраивать)

    • @ДмитрийКононов-н7э
      @ДмитрийКононов-н7э 4 ปีที่แล้ว

      @@annblok_webdev а как это отклоняетс от сетки?

    • @annblok_webdev
      @annblok_webdev  4 ปีที่แล้ว +1

      Вы это поймёте, когда встретите такой дизайн

  • @Preferred1
    @Preferred1 4 ปีที่แล้ว +22

    Редко когда можно найти видео для новичков. Все думают что многие это всё знают. Спасибо Вам за информацию которая изложена в доступной форме.

  • @tamerlanmaglaev9435
    @tamerlanmaglaev9435 2 ปีที่แล้ว +9

    Вы очень спокойно и классно все объясняете. Большое спасибо вам ! На других видео они сразу начинают писать код, не говоря какие классы писать

  • @codeman2468
    @codeman2468 2 ปีที่แล้ว +1

    Верстка на bootstrap, класс показала а тоя не знал как с доки копировать!!!

  • @bliswar
    @bliswar 4 ปีที่แล้ว +9

    Очень круто. Только начал приступать к Bootstrap, и благодаря видео многое ствновится понятным. Спасибо, классное видео.

  • @Snegurjan
    @Snegurjan 4 ปีที่แล้ว +6

    Какая же ты умничка!!!Человек слова.Сказала -сделала🤘🏼🙌🏻👍🏼🙂

  • @onebytesiteit30-75
    @onebytesiteit30-75 4 ปีที่แล้ว +6

    Как круто что делаешь видео о новинках , я все никак не доберусь до 5 версии , надо б ознакомится .
    Благодарю за видео . У тебя все полезные.
    И блииин как же тяжко такие записывать я пробовал пару раз сделать видос именно о ходе работы не очень получается.
    большой труд . еще все так объяснять

    • @annblok_webdev
      @annblok_webdev  4 ปีที่แล้ว +1

      Спасибо большое 🤗 Много записывала учебных роликов, чтобы отработать технику записи 😄

  • @PearlDpUa
    @PearlDpUa 4 ปีที่แล้ว +14

    Спасибо что так подробно всё объясняете, один из лучших туториалов что есть в сети!

  • @autodesk8518
    @autodesk8518 ปีที่แล้ว

    Ты чудо творение. Дай Бог тебе больших успехов, здоровье и счастье.

  • @ngancaokim7152
    @ngancaokim7152 4 ปีที่แล้ว +3

    Знания в области программирования, которыми вы делитесь, очень полезны, я узнаю больше дома из ваших видео

  • @ОксанаВеликая-с5ъ
    @ОксанаВеликая-с5ъ 4 ปีที่แล้ว +13

    а ведь для новичков это как раз и есть самое то.

  • @alexyuhim5290
    @alexyuhim5290 2 ปีที่แล้ว +1

    ставлю лайк, до начала просмотра. Спасибо за записи подобных роликов, надеюсь увидеть варианты адаптивной верстки.

  • @igr3943
    @igr3943 4 ปีที่แล้ว +6

    Уже нравится) а когда посмотрю, вообще супер будет!

  • @abduhamidovbakhtovar6715
    @abduhamidovbakhtovar6715 2 ปีที่แล้ว +1

    Видео максимально полезно для знакомство с Boostrap-5. Благодарю вас за ваш труд. Желаю вам всего хорошего))

  • @ТахирШарипов-р1и
    @ТахирШарипов-р1и 4 หลายเดือนก่อน

    Анна, у Вас получается все очень хорошо. Если говорить слэнгом молодежи - прикольно! При этом нет никакой рисовки, нет никакого менторского тона или, наоборот, какого-то фиглярства, присущего некоторым авторам по IT темам на ютубе. Желаю Вам в дальнейшем оставаться такой же и у Вас будет все больше подписчиков!

  • @robertproductsrp473
    @robertproductsrp473 2 ปีที่แล้ว +1

    Добрый день. Какой у вас стоит шрифт в VS Code?

  • @genrymorgan9141
    @genrymorgan9141 3 ปีที่แล้ว

    Ну вот же. Я нашел его!!! Видео где не шумит клавиатура/микрофон, и приятный голос. Отличное видео для того чтобы заснуть!

  • @svhanz
    @svhanz 4 ปีที่แล้ว +1

    Анна просто огонь! Бомбический ролик!!! Большое мерсибо!

    • @annblok_webdev
      @annblok_webdev  4 ปีที่แล้ว

      Спасибо большое 🤗

  • @СветланаГруздева-л7ю
    @СветланаГруздева-л7ю 10 หลายเดือนก่อน +1

    Анна, а как можно подключить из Bootstrap только нужный скрипт, например, modal.js?

    • @СашаАлександр-е4м
      @СашаАлександр-е4м 5 หลายเดือนก่อน +1

      Скачиваешь bootstrap и лезешь в его код, выискивая нужные файлы, подключаешь их,как файлы до css. Звучит сложно,но на деле там все просто. Можешь посмотреть на ютубе 5 мин любого видео по теме и поймёшь

  • @progerlife6690
    @progerlife6690 4 ปีที่แล้ว +7

    Супер!!)) Аня спасибо за ролик.

  • @DzmitryArtsiamkou
    @DzmitryArtsiamkou 2 ปีที่แล้ว +1

    Спасибо! Очень хороший курс! Кратко и все что нужно с нуля!!!

    • @annblok_webdev
      @annblok_webdev  2 ปีที่แล้ว +1

      Рада слышать, что видео оказалось полезным! 🥰

  • @d.travina
    @d.travina 4 ปีที่แล้ว +1

    Огромное вам спасибо за видео и ваши ценные советы! Желаю вам дальнейших успехов на ютьюб и в жизни! От меня ловите лайк.

  • @МансурПадаев
    @МансурПадаев ปีที่แล้ว +1

    Ты чууудо, спасибо тебе большое, долго не мог разобраться

  • @andrewdrex
    @andrewdrex 4 ปีที่แล้ว +8

    Как обычно всё по делу и без воды👌

  • @ValShiPhp
    @ValShiPhp ปีที่แล้ว

    Классно! Спасибо. Горизонтальная прокрутка появляется из-за переноса стрелочек

  • @TheLordoftheElements
    @TheLordoftheElements 4 ปีที่แล้ว +4

    Ух ты, ишь ты какое видео, не ожидал ,,,,.... круто , ты прикольный....Двигай дальше .

  • @OlgaOnofrey
    @OlgaOnofrey ปีที่แล้ว +1

    Аня, спасибо за видео!

  • @ОльгаЮзбашева
    @ОльгаЮзбашева 2 ปีที่แล้ว +1

    Спасибо за видео :) Разобралась с bootstrap

  • @milashmadchenko424
    @milashmadchenko424 4 ปีที่แล้ว +2

    Спасибо, Анна, все получилось и я очень рада))

  • @drochit5901
    @drochit5901 2 ปีที่แล้ว

    Спасибо тебе, добрая девушка, за столь прекрасный гайд)

  • @VOZ17
    @VOZ17 4 ปีที่แล้ว +1

    Аня, спасибо за видео. Не останавливайся и продолжай в том же духе!
    Из пожеланий больше практических видео

    • @annblok_webdev
      @annblok_webdev  4 ปีที่แล้ว

      Будет, но не постоянно. Есть и другие интересные темы))

    • @VOZ17
      @VOZ17 4 ปีที่แล้ว +1

      Анна Блок очень жаль, что не постоянно. Я понимаю, что создание таких видео достаточно трудоёмкий процесс, но благодаря им, материал усваивается очень легко и понятно, нежели у других авторов. В любом случае ждём следующие темы с нетерпением

  • @rabirai8136
    @rabirai8136 4 ปีที่แล้ว +2

    Как всегда очень полезный ролик с подробной его разборкой.

  • @ЕленаФ-щ1ш
    @ЕленаФ-щ1ш 4 ปีที่แล้ว +2

    Как приятно послушать профессионала - все четко, грамотно, доступно!

  • @amirsagindyk6854
    @amirsagindyk6854 4 ปีที่แล้ว +1

    Отличные ролики😋😋. Сегодня верстал по вашему макету 🥵🥵🥵 жуть устал , но это хорошо!

    • @annblok_webdev
      @annblok_webdev  4 ปีที่แล้ว

      С курса?

    • @amirsagindyk6854
      @amirsagindyk6854 4 ปีที่แล้ว +1

      Анна Блок ага , с курса. Нравится мне ваша it банда ( если вас так можно назвать 😂) . Дружелюбные такие и увлечённые 🤓

    • @annblok_webdev
      @annblok_webdev  4 ปีที่แล้ว

      Юхуууу 😄🤗

  • @viktoria_kiss4909
    @viktoria_kiss4909 2 ปีที่แล้ว

    Вопрос. Когда вы делали отступ я не поняла какие коды вы вставили в css. В html там вы поменяли на container-xxl. И у вас все получилось. А какие коды в css вы вставляли я так и не поняла.

  • @nereonneo
    @nereonneo 4 ปีที่แล้ว +3

    классно люблю ваши уроки

  • @ZVulkan
    @ZVulkan ปีที่แล้ว

    А почему стрелочки на разном уровне по итогу оказались? Я не докапываюсь просто заметил что одна выше, а другая ниже. Просто интересно как этого избежать, когда буду делать сам.

  • @gonetv746
    @gonetv746 4 ปีที่แล้ว +1

    Подробный и хороший разбор сайта,огромное спасибо за видео,помогло!

  • @rimazaqyan8001
    @rimazaqyan8001 4 ปีที่แล้ว +2

    Очень полезный и интересный ролик. И материал, правда, подан так,что понятен и новичкам.

  • @ЭрнестСадыков-ш3о
    @ЭрнестСадыков-ш3о 2 ปีที่แล้ว

    А вот bootstrap studio имеет смысл освоить?

  • @КалысбекРахатбекуулу
    @КалысбекРахатбекуулу 3 ปีที่แล้ว +1

    спасибо пожалуйста , за наглядный пример бутстрапа !!!

  • @ДмитрийКузьмин-ш2с
    @ДмитрийКузьмин-ш2с 4 ปีที่แล้ว +1

    Анна, спасибо Вам большое! Да, кста... Лайк не глядя, как всегда))

  • @RuslanBereza
    @RuslanBereza 4 ปีที่แล้ว +1

    Спасибо вам, Анна - все внятно и доступно рассказали и показали!!!!

  • @blackhome418
    @blackhome418 3 ปีที่แล้ว +1

    Анна спасибо вам за видео,для начинающих это видео самое то

  • @phoebeskinner8927
    @phoebeskinner8927 4 ปีที่แล้ว +1

    отличное видео, люблю смотреть видео на твоем канале

  • @Pixel_Magic
    @Pixel_Magic 3 ปีที่แล้ว +1

    Спасибо большое за видео! Развиваюсь почти только из-за вас)

  • @МішаКурилюк-м6к
    @МішаКурилюк-м6к 4 ปีที่แล้ว +1

    Спасибо как раз искал подобные видео -урок, лайк от меня и подписка

  • @johngregor5658
    @johngregor5658 4 ปีที่แล้ว +3

    Как не крути но бутстрап хорош, я лично юзал, юзаю, и буду юзать.

  • @yaroslav_besfalin
    @yaroslav_besfalin 2 ปีที่แล้ว

    Я так понимаю bootstrap типа готовое? Только нужно по себя настраивать?

  • @ВячеславМалышев-в8г
    @ВячеславМалышев-в8г 4 ปีที่แล้ว +1

    При некоторых знании и небольшом навыке, достаточно понятно!)

  • @ВикторияГлущенко-ч2ф
    @ВикторияГлущенко-ч2ф 4 ปีที่แล้ว +1

    Очень интересное и что главное полезное видео. Спасибо что поделились полезной информацией, мне очень понравилось это видео.

  • @Robbi726
    @Robbi726 4 ปีที่แล้ว +1

    Анна, такой вопрос. Правильно я понимаю рынок, что сейчас просто верстальщики практически не нужны? Ведь верстает фронт-энд. Только если в крупных проектах нужно разгрузить их и взять отдельного верстальщика?

    • @annblok_webdev
      @annblok_webdev  4 ปีที่แล้ว

      В каждой компании свои потребности

    • @Robbi726
      @Robbi726 4 ปีที่แล้ว

      Анна Блок но тенденция ведь имеется на снижение спроса на чистых верстальщиков?

    • @Beast8833
      @Beast8833 4 ปีที่แล้ว +2

      просто верстальщики никому, по крайней мере в снг, не нужны, всем нужен человек-оркестр

  • @ЛюбовьЗайцева-м6к
    @ЛюбовьЗайцева-м6к 4 ปีที่แล้ว +1

    Благодарю за обзор сайта Bootstrap 5. Спасибо за промокод. Всё понятно показали и доступно.

  • @frencolesov3794
    @frencolesov3794 4 ปีที่แล้ว +1

    Спасибо получил представление что такое Bootstrap 5

  • @Hunter-yw3ow
    @Hunter-yw3ow 4 ปีที่แล้ว +1

    Прекрасная информация спасибо Анна !!!

  • @lonelinessmode210
    @lonelinessmode210 2 ปีที่แล้ว +1

    Спасибо, очень информативно!

  • @kitsune_424
    @kitsune_424 4 ปีที่แล้ว +1

    Очень крутое видео!!!!!Спасибо Анна

    • @annblok_webdev
      @annblok_webdev  4 ปีที่แล้ว +1

      Рада, что понравилось 🤗

  • @KindCat21
    @KindCat21 4 ปีที่แล้ว

    Спасибо, Анна за видео! Максимум инфы за короткое время

  • @user-up15bb1zq31r
    @user-up15bb1zq31r 4 ปีที่แล้ว +1

    Было интересно посмотреть и послушать, узнала для себя много нового! Пожалуй, подпишусь на ваш канал!

  • @motay3
    @motay3 4 ปีที่แล้ว +1

    Спасибо, узнал основы за 30 минут!

    • @TrueDigitalStories
      @TrueDigitalStories 3 ปีที่แล้ว

      Открыл бы сайт bootstrapjs, узнал бы основы за 5 минут. 🤣 Честно говоря материал абсолютно бесполезен, для тех кто умеет читать.

  • @ExPoSeS2811
    @ExPoSeS2811 4 ปีที่แล้ว

    Ань, привет. Прости если что, я новичок. Можешь подсказать со скольки лет ты занимаешься IT?

  • @MrAramor1
    @MrAramor1 3 ปีที่แล้ว +1

    Спасибо за работу!)

  • @kritik2132
    @kritik2132 4 ปีที่แล้ว +1

    Да, пилить сайты - это очень интересно и выгодно!

    • @paf1447
      @paf1447 4 ปีที่แล้ว

      В дырляндии интернет есть?

  • @ДокторнаПриколе
    @ДокторнаПриколе 4 ปีที่แล้ว +2

    Буду делать 2 сайта на днях с использованием этого метода. Спс

  • @prorocklife9783
    @prorocklife9783 2 ปีที่แล้ว

    Спасибо за видео, буду учиться)

  • @tekinosx2815
    @tekinosx2815 4 ปีที่แล้ว +4

    Однозначно лайк!

  • @marinella9470
    @marinella9470 4 ปีที่แล้ว +1

    Сколько ещё интересного вы нам приготовили?Всегда что то новое!Лайк!Будем учиться.

  • @tasty-food-channel
    @tasty-food-channel 3 ปีที่แล้ว

    Большое спасибо за тему сайта!

  • @ПростоБро
    @ПростоБро 3 ปีที่แล้ว

    Тыж моя умничка, спасибо!

  • @surengalstyan86
    @surengalstyan86 3 ปีที่แล้ว

    извините ,а можно(возможно) создать веб страницу, без style.css документа-то есть все в html?

  • @AlekseyKlenin
    @AlekseyKlenin 4 ปีที่แล้ว

    А как насчёт видео по реализации push offcanvas menu на bootrstrap 5?

  • @virusmark007
    @virusmark007 3 ปีที่แล้ว

    Смотрю ваш материал сейчас, делаю как у вас, но в контейнере все элементы появляются только слева и не растягиваются на всю ширину. В чем может быть проблема?

    • @annblok_webdev
      @annblok_webdev  3 ปีที่แล้ว

      Скиньте разметку через codepen

  • @legendnomber1751
    @legendnomber1751 3 ปีที่แล้ว

    Умница) С меня лайк и подписка на твой канал))

  • @larisaalex
    @larisaalex 4 ปีที่แล้ว +1

    Интересное познавательное видео, много нового и полезного узнала для себя.

  • @delacroics
    @delacroics 3 ปีที่แล้ว

    Огромное спасибо, все по существу и понятно.

  • @shertskoff6852
    @shertskoff6852 4 ปีที่แล้ว +6

    Прикольно с котом карусель, я карусель думал что только во весь экран используется.
    У меня на канале тоже записал видеоурок по Bootstrap, но я конечно не так круто всё обьясняю))

    • @andykud63
      @andykud63 3 ปีที่แล้ว

      Прикол в том что jQueryInterface встроен в BS5

  • @Лучшиеотрывкиизфильмов-ц2н
    @Лучшиеотрывкиизфильмов-ц2н 4 ปีที่แล้ว +1

    Как же это трудно для новичка! Чтобы я делал без ваших обучающих роликов!?

  • @НікВасилєв
    @НікВасилєв ปีที่แล้ว

    почему вишуал студио кАд?))) когда правильно код!

  • @SAD1NG
    @SAD1NG 4 ปีที่แล้ว

    объяснили хорошо как пользоваться, спасибо

  • @MagellanLG
    @MagellanLG 4 ปีที่แล้ว +1

    Побольше таких видосов...

  • @СергейДемин-г5в
    @СергейДемин-г5в 3 ปีที่แล้ว

    Я конечно ничего против не имею, но то же самое можно сделать в btstrp 4. Ничего из новых технологий не объяснила, а только лишь использовала элементы которые в большинстве своём не отличаются от btstrp 4

  • @isok.atyrau
    @isok.atyrau 4 ปีที่แล้ว +1

    Все отлично, понятно!!! Хочется купить Фронтендбук в бумажном варианте, не планируете распечатку???

    • @annblok_webdev
      @annblok_webdev  4 ปีที่แล้ว

      Нет, печатать больше не планирую

    • @isok.atyrau
      @isok.atyrau 4 ปีที่แล้ว

      @@annblok_webdev придется купить электронную версию и самому сделать блокнот))))

  • @АлексейАкуу
    @АлексейАкуу 2 ปีที่แล้ว

    Пояснили хорошо спасибо, особенно, за то что показали откуда этот код брать. Но пришлось погуглить : Карусель не работала (надо было скрипт js подключить). И не понял как активировать кнопки чтобы они что-то открывали( я про кнопки Link в nav bar).

  • @svhanz
    @svhanz 4 ปีที่แล้ว

    А если я хочу бутстрап сохранить файлом и его подключать, а не тащить подключение посредством тырнета, то как это сделать?

    • @_thecoffee_
      @_thecoffee_ 3 ปีที่แล้ว

      Скачать его с официального сайта

  • @Expertdog
    @Expertdog 3 ปีที่แล้ว

    Хорошее видео, ставлю лайк! Особенно для меня, как для новичка. Скажите, а как быть если уже есть страничка и ее нужно переделать использую Bootstrap. Тогда как его прописывать, а самое главное куда?

    • @annblok_webdev
      @annblok_webdev  3 ปีที่แล้ว

      Лучше переписать с нуля на bootstrap, чем добавлять уже в существующую верстку его

  • @soundmegabitspace1433
    @soundmegabitspace1433 4 ปีที่แล้ว +1

    Полезный видеоматериал с меня лайк а будет ли видео про то как сделать корзину на JavaScript ?хотя я понимаю что это для каждого индивидуальная тема можно сказать так но было бы интересно увидеть .

  • @annakharytontseva2136
    @annakharytontseva2136 3 ปีที่แล้ว

    Спасибо, видео помогло)))

  • @Dmytro_Losiev
    @Dmytro_Losiev 3 ปีที่แล้ว +1

    Материал - золото!

  • @AlexeySofree
    @AlexeySofree 4 ปีที่แล้ว

    И за это платят? Сколько платят за это (вилка)?

  • @hooligan5643
    @hooligan5643 3 ปีที่แล้ว +1

    Спасибо большое 😊

  • @АндрейЧ-ы3й
    @АндрейЧ-ы3й 4 ปีที่แล้ว +1

    Вопрос от новичка: если сайт построить на стилях, расположенных на других сайтах, что произойдёт, если эти внешние ресурсы станут недоступны или вообще исчезнут?

    • @annblok_webdev
      @annblok_webdev  4 ปีที่แล้ว

      Тогда стили перестанут подтягиваться и визуал поломается

    • @АндрейЧ-ы3й
      @АндрейЧ-ы3й 4 ปีที่แล้ว

      @@annblok_webdev Что и следовало ожидать. Значит лучше всё нужное хранить в директории самого сайта. Но я пока так и не понял из документации, как установить Bootstrap 5 в директорию сайта.

    • @annblok_webdev
      @annblok_webdev  4 ปีที่แล้ว

      Установите через npm

    • @АндрейЧ-ы3й
      @АндрейЧ-ы3й 4 ปีที่แล้ว

      @@annblok_webdev Понять бы, что за булочка, и с чем её едят. )))

    • @atmalive
      @atmalive 2 ปีที่แล้ว

      @@АндрейЧ-ы3й Скопируйте минимальный конфиг и пропишите его в html

  • @almatmakhanbet3502
    @almatmakhanbet3502 3 ปีที่แล้ว

    там все кнопки работають?

  • @andykud63
    @andykud63 3 ปีที่แล้ว

    Анна, просьба указывать основной плейлист для каждого видео. А так лайк.

  • @ruslansergazin8239
    @ruslansergazin8239 4 ปีที่แล้ว +2

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

    • @annblok_webdev
      @annblok_webdev  4 ปีที่แล้ว +2

      Это уже устоявшийся пользовательский паттерн - кликать на лого, чтобы попасть на главную. Обычно, если лого никуда не ведёт, у пользователя мозг ломается))

  • @marilynavila5922
    @marilynavila5922 4 ปีที่แล้ว +1

    здорово! очень хорошо

  • @siablo009
    @siablo009 4 ปีที่แล้ว

    А покажи, где bootstrap лучше не использовать!? Про какие не типизированные ты говоришь...

  • @hat7092
    @hat7092 4 ปีที่แล้ว +1

    Всегда мечтал свой сайт сверстать, попробую, вдруг получится.

  • @АлександрК-ш
    @АлександрК-ш 2 ปีที่แล้ว

    "Пример из видео": ссылка не работает.

  • @khusravsaidasanov7130
    @khusravsaidasanov7130 2 ปีที่แล้ว +1

    Можно по медленнее, я записываю [с]
    В остальном всё круто 👍🏻🙏🏻

  • @seowestcom
    @seowestcom 4 ปีที่แล้ว +8

    Реклама хостинга конечно взбесила, но за урок благодарю

    • @vitlmet
      @vitlmet 3 ปีที่แล้ว +1

      так отблагодари автора за его труды! Тебя бесплатно обучают, а ты ещё недовольное рекламой минутной