Верстка сайта Bootstrap 5 / HTML / CSS на практике для новичков
HTML-код
- Опубликовано: 11 июл 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 5. Спасибо за промокод. Всё понятно показали и доступно.
Спасибо за работу!)
классно люблю ваши уроки
При некоторых знании и небольшом навыке, достаточно понятно!)
Анна просто огонь! Бомбический ролик!!! Большое мерсибо!
Спасибо большое 🤗
Спасибо тебе, добрая девушка, за столь прекрасный гайд)
Спасибо, очень информативно!
Интересное познавательное видео, много нового и полезного узнала для себя.
Однозначно лайк!
объяснили хорошо как пользоваться, спасибо
Ну вот же. Я нашел его!!! Видео где не шумит клавиатура/микрофон, и приятный голос. Отличное видео для того чтобы заснуть!
Большое спасибо за тему сайта!
Спасибо за видео :) Разобралась с bootstrap
Спасибо за видео, буду учиться)
Аня, спасибо за видео!
а ведь для новичков это как раз и есть самое то.
Спасибо большое 😊
Спасибо, видео помогло)))
Прикольно с котом карусель, я карусель думал что только во весь экран используется.
У меня на канале тоже записал видеоурок по Bootstrap, но я конечно не так круто всё обьясняю))
Прикол в том что jQueryInterface встроен в BS5
Верстка на bootstrap, класс показала а тоя не знал как с доки копировать!!!
Спасибо! Очень хороший курс! Кратко и все что нужно с нуля!!!
Рада слышать, что видео оказалось полезным! 🥰
Спасибо, узнал основы за 30 минут!
Открыл бы сайт bootstrapjs, узнал бы основы за 5 минут. 🤣 Честно говоря материал абсолютно бесполезен, для тех кто умеет читать.
Видео максимально полезно для знакомство с Boostrap-5. Благодарю вас за ваш труд. Желаю вам всего хорошего))
Буду делать 2 сайта на днях с использованием этого метода. Спс
Как обычно всё по делу и без воды👌
Анна спасибо вам за видео,для начинающих это видео самое то
Рада слышать! 😍
Очень крутое видео!!!!!Спасибо Анна
Рада, что понравилось 🤗
здорово! очень хорошо
спасибо пожалуйста , за наглядный пример бутстрапа !!!
Тыж моя умничка, спасибо!
Анна, а как можно подключить из Bootstrap только нужный скрипт, например, modal.js?
Ты чудо творение. Дай Бог тебе больших успехов, здоровье и счастье.
Спасибо получил представление что такое Bootstrap 5
Материал - золото!
Спасибо вам большое
Побольше таких видосов...
спасибо за туториал
Спасибо большое
this video amazed me thank you
Умница) С меня лайк и подписка на твой канал))
Добрый день. Какой у вас стоит шрифт в VS Code?
Спасибо!
Классно! Спасибо. Горизонтальная прокрутка появляется из-за переноса стрелочек
Как не крути но бутстрап хорош, я лично юзал, юзаю, и буду юзать.
Отличные ролики😋😋. Сегодня верстал по вашему макету 🥵🥵🥵 жуть устал , но это хорошо!
С курса?
Анна Блок ага , с курса. Нравится мне ваша it банда ( если вас так можно назвать 😂) . Дружелюбные такие и увлечённые 🤓
Юхуууу 😄🤗
Вопрос. Когда вы делали отступ я не поняла какие коды вы вставили в css. В html там вы поменяли на container-xxl. И у вас все получилось. А какие коды в css вы вставляли я так и не поняла.
Как приятно послушать профессионала - все четко, грамотно, доступно!
А почему стрелочки на разном уровне по итогу оказались? Я не докапываюсь просто заметил что одна выше, а другая ниже. Просто интересно как этого избежать, когда буду делать сам.
А вот bootstrap studio имеет смысл освоить?
Полезный видеоматериал с меня лайк а будет ли видео про то как сделать корзину на JavaScript ?хотя я понимаю что это для каждого индивидуальная тема можно сказать так но было бы интересно увидеть .
Как же это трудно для новичка! Чтобы я делал без ваших обучающих роликов!?
Сколько ещё интересного вы нам приготовили?Всегда что то новое!Лайк!Будем учиться.
Да, пилить сайты - это очень интересно и выгодно!
В дырляндии интернет есть?
спасибо
Я так понимаю bootstrap типа готовое? Только нужно по себя настраивать?
Сейчас посмотрю
Всегда мечтал свой сайт сверстать, попробую, вдруг получится.
Анна, просьба указывать основной плейлист для каждого видео. А так лайк.
А как насчёт видео по реализации push offcanvas menu на bootrstrap 5?
Ань, привет. Прости если что, я новичок. Можешь подсказать со скольки лет ты занимаешься IT?
извините ,а можно(возможно) создать веб страницу, без style.css документа-то есть все в html?
можно
Спосибо
там все кнопки работають?
Смотрю ваш материал сейчас, делаю как у вас, но в контейнере все элементы появляются только слева и не растягиваются на всю ширину. В чем может быть проблема?
Скиньте разметку через codepen
Все отлично, понятно!!! Хочется купить Фронтендбук в бумажном варианте, не планируете распечатку???
Нет, печатать больше не планирую
@@annblok_webdev придется купить электронную версию и самому сделать блокнот))))
Пояснили хорошо спасибо, особенно, за то что показали откуда этот код брать. Но пришлось погуглить : Карусель не работала (надо было скрипт js подключить). И не понял как активировать кнопки чтобы они что-то открывали( я про кнопки Link в nav bar).
Хорошее видео, ставлю лайк! Особенно для меня, как для новичка. Скажите, а как быть если уже есть страничка и ее нужно переделать использую Bootstrap. Тогда как его прописывать, а самое главное куда?
Лучше переписать с нуля на bootstrap, чем добавлять уже в существующую верстку его
Анна, такой вопрос. Правильно я понимаю рынок, что сейчас просто верстальщики практически не нужны? Ведь верстает фронт-энд. Только если в крупных проектах нужно разгрузить их и взять отдельного верстальщика?
В каждой компании свои потребности
Анна Блок но тенденция ведь имеется на снижение спроса на чистых верстальщиков?
просто верстальщики никому, по крайней мере в снг, не нужны, всем нужен человек-оркестр
как адаптировать слайд?
Сделайте пожалуйста видео по верстке многостраничного сайта с гитом, вебпаком и препроцессорами.