Верстка сайта Bootstrap 5 / HTML / CSS на практике для новичков
HTML-код
- Опубликовано: 1 авг 2024
- 🤗 Зарегистрируйся на хостинге TimeWeb: bit.ly/3iZLdCx
🎁 И получи бонус 179 рублей на счет по промокоду: ANNBLOK
Домен в зоне .ru/.рф в подарок! Напиши кодовое слово ANNBLOK в поддержку
Документация Bootstrap 5 - v5.getbootstrap.com/
Пример из видео - cw74958.tmweb.ru
Таймкоды:
00:00 Вступление
01:11 Хостинг TimeWeb
02:36 Шаг 1 Создание аккаунта на хостинге
04:03 Шаг 2 Подготовка файлов к верстке
05:24 Шаг 3 Подключение Bootstrap
07:17 Шаг 4 Верстка сайта с Bootstrap
29:14 Шаг 5 Перенос файлов на хостинг
30:56 Итоги
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/
Видео на русском о том, что изменилось в Bootstrap 5 - ruclips.net/video/7OabTpOJgHo/видео.html
Что в вашем понимании есть " навороченный сайт"?
@@user-ys9jv5mr9c со сложными элементами
@@user-ys9jv5mr9c Который сильно отклоняется от сетки (не обязательно 12-ти колоночной, потому что число колонок в Bootstrap можно настраивать)
@@annblok_webdev а как это отклоняетс от сетки?
Вы это поймёте, когда встретите такой дизайн
Редко когда можно найти видео для новичков. Все думают что многие это всё знают. Спасибо Вам за информацию которая изложена в доступной форме.
Вы очень спокойно и классно все объясняете. Большое спасибо вам ! На других видео они сразу начинают писать код, не говоря какие классы писать
Знания в области программирования, которыми вы делитесь, очень полезны, я узнаю больше дома из ваших видео
Очень круто. Только начал приступать к Bootstrap, и благодаря видео многое ствновится понятным. Спасибо, классное видео.
Спасибо вам, Анна - все внятно и доступно рассказали и показали!!!!
Какая же ты умничка!!!Человек слова.Сказала -сделала🤘🏼🙌🏻👍🏼🙂
🤗🤗🤗
Спасибо что так подробно всё объясняете, один из лучших туториалов что есть в сети!
Как круто что делаешь видео о новинках , я все никак не доберусь до 5 версии , надо б ознакомится .
Благодарю за видео . У тебя все полезные.
И блииин как же тяжко такие записывать я пробовал пару раз сделать видос именно о ходе работы не очень получается.
большой труд . еще все так объяснять
Спасибо большое 🤗 Много записывала учебных роликов, чтобы отработать технику записи 😄
Очень полезный и интересный ролик. И материал, правда, подан так,что понятен и новичкам.
Как всегда очень полезный ролик с подробной его разборкой.
При некоторых знании и небольшом навыке, достаточно понятно!)
Спасибо большое за видео! Развиваюсь почти только из-за вас)
Очень интересное и что главное полезное видео. Спасибо что поделились полезной информацией, мне очень понравилось это видео.
Уже нравится) а когда посмотрю, вообще супер будет!
😂
Жизааааа
Спасибо, Анна, все получилось и я очень рада))
Верстка на bootstrap, класс показала а тоя не знал как с доки копировать!!!
Аня, спасибо за видео. Не останавливайся и продолжай в том же духе!
Из пожеланий больше практических видео
Будет, но не постоянно. Есть и другие интересные темы))
Анна Блок очень жаль, что не постоянно. Я понимаю, что создание таких видео достаточно трудоёмкий процесс, но благодаря им, материал усваивается очень легко и понятно, нежели у других авторов. В любом случае ждём следующие темы с нетерпением
Спасибо, Анна за видео! Максимум инфы за короткое время
Супер!!)) Аня спасибо за ролик.
🤩
Спасибо! Очень хороший курс! Кратко и все что нужно с нуля!!!
Рада слышать, что видео оказалось полезным! 🥰
Спасибо как раз искал подобные видео -урок, лайк от меня и подписка
ставлю лайк, до начала просмотра. Спасибо за записи подобных роликов, надеюсь увидеть варианты адаптивной верстки.
Было интересно посмотреть и послушать, узнала для себя много нового! Пожалуй, подпишусь на ваш канал!
Прекрасная информация спасибо Анна !!!
Спасибо как раз искала подобные видео -урок, лайк от меня .
классно люблю ваши уроки
Однозначно лайк!
Подробный и хороший разбор сайта,огромное спасибо за видео,помогло!
Анна, спасибо Вам большое! Да, кста... Лайк не глядя, как всегда))
Материал - золото!
Благодарю за обзор сайта Bootstrap 5. Спасибо за промокод. Всё понятно показали и доступно.
Огромное спасибо, все по существу и понятно.
Ух ты, ишь ты какое видео, не ожидал ,,,,.... круто , ты прикольный....Двигай дальше .
Огромное вам спасибо за видео и ваши ценные советы! Желаю вам дальнейших успехов на ютьюб и в жизни! От меня ловите лайк.
Прикольно с котом карусель, я карусель думал что только во весь экран используется.
У меня на канале тоже записал видеоурок по Bootstrap, но я конечно не так круто всё обьясняю))
Прикол в том что jQueryInterface встроен в BS5
Спасибо тебе, добрая девушка, за столь прекрасный гайд)
Интересное познавательное видео, много нового и полезного узнала для себя.
Аня, спасибо за видео!
объяснили хорошо как пользоваться, спасибо
Ты чудо творение. Дай Бог тебе больших успехов, здоровье и счастье.
Видео максимально полезно для знакомство с Boostrap-5. Благодарю вас за ваш труд. Желаю вам всего хорошего))
спасибо пожалуйста , за наглядный пример бутстрапа !!!
а ведь для новичков это как раз и есть самое то.
Буду делать 2 сайта на днях с использованием этого метода. Спс
Ну вот же. Я нашел его!!! Видео где не шумит клавиатура/микрофон, и приятный голос. Отличное видео для того чтобы заснуть!
Спасибо за работу!)
Спасибо большое 😊
Спасибо, узнал основы за 30 минут!
Открыл бы сайт bootstrapjs, узнал бы основы за 5 минут. 🤣 Честно говоря материал абсолютно бесполезен, для тех кто умеет читать.
Спасибо, очень информативно!
Анна просто огонь! Бомбический ролик!!! Большое мерсибо!
Спасибо большое 🤗
Спасибо получил представление что такое Bootstrap 5
Спасибо за видео :) Разобралась с bootstrap
Ты чууудо, спасибо тебе большое, долго не мог разобраться
Как приятно послушать профессионала - все четко, грамотно, доступно!
Большое спасибо за тему сайта!
отличное видео, люблю смотреть видео на твоем канале
Классно! Спасибо. Горизонтальная прокрутка появляется из-за переноса стрелочек
Как не крути но бутстрап хорош, я лично юзал, юзаю, и буду юзать.
здорово! очень хорошо
Спасибо большое
Побольше таких видосов...
Анна спасибо вам за видео,для начинающих это видео самое то
Рада слышать! 😍
Спасибо за видео, буду учиться)
спасибо за туториал
Сейчас посмотрю
Тыж моя умничка, спасибо!
Да, пилить сайты - это очень интересно и выгодно!
В дырляндии интернет есть?
Спасибо, видео помогло)))
Очень крутое видео!!!!!Спасибо Анна
Рада, что понравилось 🤗
Как обычно всё по делу и без воды👌
Спасибо вам большое
this video amazed me thank you
Спасибо!
Отличные ролики😋😋. Сегодня верстал по вашему макету 🥵🥵🥵 жуть устал , но это хорошо!
С курса?
Анна Блок ага , с курса. Нравится мне ваша it банда ( если вас так можно назвать 😂) . Дружелюбные такие и увлечённые 🤓
Юхуууу 😄🤗
Как же это трудно для новичка! Чтобы я делал без ваших обучающих роликов!?
спасибо
Сколько ещё интересного вы нам приготовили?Всегда что то новое!Лайк!Будем учиться.
Анна, просьба указывать основной плейлист для каждого видео. А так лайк.
Полезный видеоматериал с меня лайк а будет ли видео про то как сделать корзину на JavaScript ?хотя я понимаю что это для каждого индивидуальная тема можно сказать так но было бы интересно увидеть .
Всегда мечтал свой сайт сверстать, попробую, вдруг получится.
Умница) С меня лайк и подписка на твой канал))
Добрый день. Какой у вас стоит шрифт в VS Code?
Только начинаю
Спосибо
Вопрос. Когда вы делали отступ я не поняла какие коды вы вставили в css. В html там вы поменяли на container-xxl. И у вас все получилось. А какие коды в css вы вставляли я так и не поняла.
А почему стрелочки на разном уровне по итогу оказались? Я не докапываюсь просто заметил что одна выше, а другая ниже. Просто интересно как этого избежать, когда буду делать сам.
А как насчёт видео по реализации push offcanvas menu на bootrstrap 5?
Пояснили хорошо спасибо, особенно, за то что показали откуда этот код брать. Но пришлось погуглить : Карусель не работала (надо было скрипт js подключить). И не понял как активировать кнопки чтобы они что-то открывали( я про кнопки Link в nav bar).
А вот bootstrap studio имеет смысл освоить?
Устроился на работу.. А сам о Анне думаю))) точнее о её прекрасной вёрстке. Слюна тячет на Клаву...(рекламы конечно много) 😢
Вот кто сейчас тысячи зарабатывает, кто это всё знает. Спасибо за уроки!
Анна, а как можно подключить из Bootstrap только нужный скрипт, например, modal.js?
Скачиваешь bootstrap и лезешь в его код, выискивая нужные файлы, подключаешь их,как файлы до css. Звучит сложно,но на деле там все просто. Можешь посмотреть на ютубе 5 мин любого видео по теме и поймёшь
Все отлично, понятно!!! Хочется купить Фронтендбук в бумажном варианте, не планируете распечатку???
Нет, печатать больше не планирую
@@annblok_webdev придется купить электронную версию и самому сделать блокнот))))
Сделайте пожалуйста видео по верстке многостраничного сайта с гитом, вебпаком и препроцессорами.
пока преревариваю.что увидел)
Я так понимаю bootstrap типа готовое? Только нужно по себя настраивать?
Я лайкал, потому что видео небыло некакое платные макеты
Ань, привет. Прости если что, я новичок. Можешь подсказать со скольки лет ты занимаешься IT?
Я иногда только сетку из бутстрапа использую