🔥 Верстка сайта с нуля для начинающих | Bootstrap 5, HTML, CSS, Figma

✅ Надежный хостинг FirstVDS! Скидка 25% на первый месяц на любой тариф: firstvds.ru/s/...
⚡️ Макет можно получить через донат:
1) по подписке (доступ ко всем макетам) boosty.to/annblok
2) по подписке (доступ ко всем макетам) donut/t...
3) разовая оплата через крипту с получением одного макета new.donatepay.... (в комментариях напишите email)
✌️ Материалы видео:
Bootstrap 5 - getbootstrap.c...
Код - github.com/ann...
Демо - annblok.github...
Плейлисты с практикой - • Создание сайтов на пра...
🔵 Дзен - zen.yandex.ru/...
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstak...
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.m...
🔴 Обучение - frontendblok.com/

[@annblok_webdev]

Приглашаю на бесплатный марафон "Основы веб-разработки" - frontendblok.com/marathons/web-marathon

[@travelerjimny]

Сначала показалось"Всем привет, меня зовут Анна Булка "))))))

[@user-dg6tb2yd5b]

Комментарий года 😂

[@yurok1991]

Булочку хочешь?

[@rushen8148]

Не только ты так услышал)

[@user-xf8tk8np2h]

Булка)))))

[@rottweiler4201]

Молодчина ,Аня ! Старательно и очень понятно !

[@upravdelami]

1) Для верхних блоков, можно было использовать class="card" и не париться так с CSS 2) Для переноса строк вверх/вниз в VSC лучше использовать не копи-паст, а alt-стрелки

[@annblok_webdev]

Card бы подошёл в случае, если бы не пришлось ничего позиционировать. Максимум только если использовать, как структуру.

[@mistressTatiana]

Какое прекрасное объяснение всего и вся довольно простым языком, уже пересморела много роликов. Спасибо!

[@annblok_webdev]

Спасибо, рада слышать ☺️

[@mellowaybeats]

Сегодня я расскажу вам как создавать Анну Блок #Анна { Color: white; Look : beautiful; IQ: 300 }

[@luxarmiger5729]

После IQ точку с запятой забыл.

[@daulet4222]

Спасибо большое за урок! вы наверное и так знаете, но если что в фигме можно установить плагин Font Fascia , после его запуска в макете появится окно со всеми шрифтами которые использовались в макете, а то не удобно чекать каждый текст

[@user-hb7mx7we7j]

Спасибо)))

[@AnnaIsHere]

Большое спасибо! Задали е...чую домашку на курсах, а препод в духе:"Надо сделать как я показывал". Показывать может и показывал, но курс плохо построен и видео фиг найдёшь по названиям (называют как хотят). Показал в один день, а применять знания оказалось нужным к другой лекции!

[@user-zt2ot2wj9p]

Спасибо очень полезно и информативно.

[@Rita-ei4ci]

Просто зря потраченное время!! Это клеим, это вставляет ,это копируем, что это ,это пишем? Для чего? Что за функцию это выполняет?? Сама себе толкует что то, сама только видимо и понимает.Было бы 0 вопросов, если б не было подписи "для начинающих"! Урок назвать надо "скопируй как я и вставь , а потом сам разберись".

[@rim_shot_]

Чувак😅, это bootstrap, с ним только так и работают. А чтобы понимать что происходит тебе нужно знать хотя бы на начальном уровне css и html

[@ANONEMASTER]

меня все видео парило одно: 357px это ширина, а не высота😢

[@andrejsmihailovs9394]

В строчный тег "a", вроде как нельзя вставлять блочный элемент. "div"

[@_pheax]

спасибо, всё понятно

[@AnnaIsHere]

18:55 А как мы поняли, что image накладывается "именно на этот тег" (кстати, какой, shop-item01?)

[@semen_spider]

Такая милашечкааааа 🔥🔥🔥😍😍😍😍😍😍

[@iddqd777]

Ещё и умная

[@AKATSUKI_2517]

Замечательная "🔥 Верстка сайта с нуля для начинающих". Особенно, если по 5 раз все менять, особо ничего не объяснять, только и остается что тупо скопировать и самому искать в комментариях что к чем...

[@maksimmakarov9319]

Соглашусь но скажу чуть мягче. Видео из серии: смотрите как я верстаю, комментирую но ничего не объясняю. На данном этапе мне как начинающему многое непонятно. Но в будущем обязательно буду обращаться к урокам Анны за примерами. Зачёт, подписка.

[@MestagaN]

Почему в данном примере использовались только блоки без , , , , ? Как семантически будет правильнее?

[@annblok_webdev]

В каждом видео своя цель, почему сделано так, а не иначе. Верстать на реальных проектах надо с семантикой.

[@user-qs4yi2vq2z]

Спасибо! Anna

[@dipsake4102]

Ви лутший преподователь по програмир.

[@user-qz6et8sn1y]

Для блока с ценой лучше использовать не col-8 и col-4, а col и col-auto

[@l1na233]

Извините, а можно узнать, почему?

[@user-qz6et8sn1y]

@@l1na233 ну, потому что дав цене col-4 мы жестко ограничили, и допустим более длинная цена в какой то момент может не поместится. А используя col-auto - блок с ценой подгонится по ширине так, чтобы всё влазило. А "col" для левого блока с текстом сделает его на всю оставшуюся ширину, не зависимо от того, сколько будет занимать цена. В общем более гибкий и предусмотрительный вариант, при смене наполнения будет

[@gennadymakar325]

а если будет 4к или 8к монитор? то все эти отступы в пикселях будут равны фактически 0

[@serenitiSever]

Как же я ждал когда она дойдёт до точек. Но нет. Слилась в конце. Видимо это было сложно сверстать 😊 я где-то лет 5 назад так костылил с вёрсткой. И на тот момент была весомая причина. Флексы, гриды, гапы были не так развиты. Сейчас из всего только у gap есть проблемы. Сафари не понимает что такое gap в flex и в grid. А в целом такая вёрстка сейчас очень даже доступна. А учитывая возможности Tailwind CSS я до сих пор воспринимаю bootstrap 5 как что-то посредственное и не серьёзное. Хотя отдам должное, выпилить jQuery было хорошей идеей, так они оторвались от древностей и bootstrap можно легко внедрить в React.js или в Angular, или во Vue.js Вот честно. Если бы мне попался вот такой "макет", я бы сверстал его быстрее, без bootstrap, было бы меньше кода, вёрстки, а выглядело и работало бы быстрее и лучше 😉

[@AnnaIsHere]

Покажи.

[@pandashow9156]

если бы еще объясняла что к чему относится, было бы не плохо, не понятно зачем тупо комментировать свои действия

[@semen_spider]

Надеюсь голубые глаза, это не цвет линз, а собственные 😍😍😍😍😍🔥🔥🔥🔥🔥🔥🔥🔥

[@luxarmiger5729]

После просмотра видео, пришел к выводу, что скорее всего Bootstrap использовать в верстке не буду. Чистота и читабельность кода пропадает. Может я ошибаюсь (скорее всего). Опытные верстальщики, объясните: нужен Bootstrap или нет?

[@annblok_webdev]

Я бы не сказала, что его использование обязательно, по сути зависит от компании и привычек написания кода в сложившейся команды. Из последнего, где мне было удобно его использовать - это написание админки под свои задачи. Создание структуры с Bootstrap было быстрее, чем прописывать все стили вручную. Как таковой дизайн мне не требовался.

[@luxarmiger5729]

@@annblok_webdev спасибо за ответ. В компаниях работать не планирую, а вот ваши видео, Анна, смотреть планирую. Молодец! Можно пожелание? Объясняйте немного подробнее, почему делаете так, а не иначе.

[@evgeniyprowork]

зависит от макета, иногда можно самому написать в стилях свойства для .row и .col и юзать их там где надо, а есть макеты где все сделано под бутстрап, читабельность кода это конечно хорошо, но если работаешь на фирме, то платят за жопочасы и нужно как то балансировать

[@user-mo4jd9sq4h]

Добрый вечер хотелось бы урок как сверстать шаблон магазина на Bootstrap 5,

[@nurzhanovchanel]

Там у изображений есть другой экспорт, чтобы вытянуть оригинал изображения (без надстроек)

[@nan234]

А я не пониме.Тут показано як для користувача,а як для власника сайта це зробити,як магазин,як йому цей сайт злити і куди?

[@turnikmem]

Спасибо, я таки сделал курсач!!

[@user-cb5xj1lg1l]

Полезная информация

[@web2905]

Спасибо) Интересно было провести такой эксперимент который показывает намного ли быстрее верстать бутстрап или без него какой то макет. И бутстрап только в основном для лендингов хорош?

[@annblok_webdev]

Мне кажется хорош для админок, чем для лендосов. Хотя и там и там можно использовать.

[@mirjalolkhudratov9210]

А где точки в заднем плане. В фигме же есть

[@annblok_webdev]

Забыла закрепить 😬Доделала и выгрузила сюда github.com/annblok/Bootstrap-5-Example

[@hariomtatsat108]

спасибо!

[@user-pw4oy1dp1b]

Анюта ты прекрасна!!!!!

[@MarvelBad]

Надеюсь вы или кто-то из опытных ребят ответят тут мне на мой крик души)). Я в прошлом графический дизайнер, специализировался на наружной рекламе, но увидев код понял что хочу заниматься именно этим. Я начал смотреть твои курсы с самого начала (HTML, CSS). И если с HTML мне всё понятно то с CSS сложилась какая-то не понятная ситуация. Вроде всё понятно, всё ясно, но начать что-то верстать мне крайне тяжело, потомучто css никак не укладывается у меня в голове, я не могу сложить свое рода представление и карту в своей голове что именно мне нужно сделать чтобы тот или иной элемент был в том месте в котором мне и нужно. Если к примеру я знаю что мне нужно сделать в Figma для расстановки всех графических элементов или например в illustrator поставить все графические элементы на свои места, то в css для меня это превращается в какой-то адский ад. Я крайне загорелся желанием стать как минимум хорошим верстальщиком но когда я понял что не могу уложить в голове понимание css у меня стали опускаться руки, надеюсь я такой не единственный и есть люди у которых подобные проблемы)) Я три раза пересмотрел урок по CSS,вроде все теги понятны и с английским у меня все нормально, но на практике я не могу сложить картинку в голове. Знаю что первым советом будет именно практиковаться, но я это и делаю но что-то идёт не так. Спасибо если кто ответит.

[@annblok_webdev]

На каких курсах вы обучались? Платных или смотрели ролики на канале?

[@MarvelBad]

@@annblok_webdev и ваши смотрел и канал фрилансер по жизни

[@annblok_webdev]

Marvel OneTwoThree на старте самообучения всегда будет что-то не получаться и казаться, что делаете что-то не правильно. После каждого нового свёрстанного проекта будете смотреть на свой предыдущий и думать - «да как я вообще там мог верстать? Сейчас бы я сделал лучше». Поэтому практика, практика и ещё раз практика 👍🏻 но если вам нужна система в знаниях, то помогут курсы. Именно на платном обучении идёт теория + практика, чтобы получать знания и сразу их закреплять. На сайте frontendblok.com можете изучить все предложения (все майские будут скидки)

[@MarvelBad]

@@annblok_webdev спасибо большое за ответ, это мотивирует!

[@РоманКиевский]

Практикуйся , у меня лично так , всё розбирается по ходу дела )))Я 5 дней не мог понять как пользоваться этими флексами вроде бы и понятно и все ясно , но когда сам верстал не понимал нужен ли контейнер и т.д смотрел видосы ежедневно и всё равно не мог понять , а потом подумал пофиг буду делать как я умею и после того как я начал не втыкать видео и верстать по примеру как на видео , а именно сам думать я научился верстать флексами . Так что больше практики и всё получится)

[@dmaksiuta]

Вопрос: зачем подключать всю библеотеку бутстрапа, если вы используете от туда пару класов только, которые можна и так написать. А так по сути размер сайта сразу стает большой. Если это для примера, как работать на нём то ок, но потом все клиенты пишут сделайте на бутстрапе как будто это прям обязательно

[@annblok_webdev]

Есть еще вариант подключать отдельные стили, которые отвечают за конкретные функции и тогда размер будет минимальным. Чаще всего используют сетку Bootstrap, не подтягивая ничего лишнего.

[@user-zo6yx1du7x]

Если честно, мне кажется что это всё лишняя заморочка, на чистом css это напишется в 2 раза быстрее. Возможно это из-за того, что bs это узкоспециализированной инструмент для своих задач, а не для обычной вёрстки

[@dmitrybelyaev6286]

bs по сути для всего. как и любой другой css+js framework. ваша "нелюбовь" к bs - скорее всего от плохого знания данного фреймворка. разработка на любом фреймворке всегда в разы быстрее чем писать код в ручную) зачем писать то, что уже написано?

[@AlexandrMakarov13]

Забыли точки :c Но за урок большое спасибо!

[@grufilm]

Всё же шаблонизатор в этом случае рулит!

[@immortal_i]

спасибо, сделал.

[@bykoff]

Хорошо бы довести этот макет до адаптива, чтобы пример был прям вообще завершенный. И декор элемент доверстать. Интересно сколько платят на фрилансе за такую верстку?

[@AnnaHurma]

Спасибо)

[@user-pc8vs9jw2x]

Что то как то замороченно, а почему мы не написали сначало строка ров а потом там же 3 картинки и потом допустим мд-3 и получили бы 3 колонки а потом уж как то в колонках уже картинки и текст ставили Что то не понятно

[@user-pc8vs9jw2x]

ОООООО вот тут уже по прикольней, а почему так мало то? Еще есть что нибуть?

[@user-rp9po1ev5r]

Здравствуйте. Подскажите название вашей темы на VS code, очень красивая и приятная для глаз)

[@annblok_webdev]

Здравствуйте, Night Owl

[@saltedcaramel7505]

Здравствуйте, ответьте пожалуйста, не могу нигде найти, можно ли начинать верстать в планшете, или здесь нужен минимум ноутбук?

[@yurok1991]

А как ты планируешь видеть результат верстки для больших экранов, верстая на планшете? Хотя если это будет гигантский планшет эпл, то может и пойдет

[@saltedcaramel7505]

@@yurok1991 дело в том, что моя знакомая работает заграницей, и она сказала, что там верстают чуть ли не на смартфонах, хотя я тоже в этом сомневаюсь. А самый распространённый экран ноутбуков это 14 и 15.6 дюймов, такой пойдёт?

[@yurok1991]

Подойдёт. Я могу понять доработать что-то на маленьком экране, но прям с нуля делать - странным кажется.

[@saltedcaramel7505]

@@yurok1991 конечно, лучше сразу приобрести правильную технику, чем мучиться потом

[@evgeniyprowork]

@@saltedcaramel7505 так у тебя есть например в хроме панель разрабов, там выставляешь для устройства full hd и все, будет тебе эмуляция, хотя мне коллеги говорили что на фаерфоксе именно эмулятор лучше

[@adaewandrei]

Привет всем.а откуда взять макет?

[@user-tj4vf5je1z]

Привет! где этот макет находится у тебя, чтобы можно было картинки вытащить!...????

[@annblok_webdev]

⚡ Макеты можно получить через донат: 1) по подписке (доступ ко всем макетам) boosty.to/annblok 2) по подписке (доступ ко всем макетам) vk.com/donut/tpverstak 3) разовая оплата через крипту с получением одного макета new.donatepay.ru/@958090 (в комментариях напишите email)

[@annblok_webdev]

Эта информация прямо под видео

[@user-mo4jd9sq4h]

Добрый день если можете сделать урок сверстать полнолицый шаблон интернет магазин на Bootstrap 5

[@itadaki84]

здравствуйте. что то не нашла макета в материалах урока

[@annblok_webdev]

В описании под видео

[@dannesterenko8161]

Будет отдельный курс bootstrap?

[@SofiaGamova]

как получить макет за разовый донат? Уже оплатила

[@SofiaGamova]

забыла почту в коментарии указать(

[@vadimkulikovvideo]

а зачем bS, там надо отключить всю шнягу, он грузит всю библиотеку по умолчанию. Так вот а зачем BS. Просто гридами быстрее было бы и проще. Точнее вотттак можно: в head borderbox а в BS5 задать изначальный отступ и колонки размер. А еще было бы неплохо адаптивы сразу включать. Так как не бывает только пс версии. Сейчас сразу адаптив как само сабой.

[@komdiv4906]

А что за редактор? Как называется?

[@annblok_webdev]

VS Code

[@icycrusty]

а зачем создавать отдельный класс nosale и прописывать ему в стилях visibillity: hidden ? когда можно просто этот спан убрать из разметки?

[@evgeniyprowork]

мне кажется это не имеет значения, поскольку на макете я вижу инет магаз, а там скорей всего будет юзаться php, следовательно будут условия что то вроде if($product->sale_price) ......тут span..........

[@icycrusty]

@@evgeniyprowork да согласен, если будет можно у одного блока влключить этот класс, то должна быть возможность у всех это сделать

[@evgeniyprowork]

@@icycrusty именно, оно обычно все эти лейблы пишутся через условия, да и вообще в карточке условий полно, на каждый чих, оно же как, товар может быть в наличии а может быть и нет, а еще запасы заканчиваться могут, также отображаться старая цена без скидки перечеркнутая и рядом новая, да там моментов куча, а верстку то делать надо сразу на все))

[@farapovorotnikov1579]

🤙🤙🤙

[@user-ux7gw2uw3g]

Ребятаа🥲 почему у меня блоки не в строчку получились а вертикально?((((

[@annblok_webdev]

Нужно видеть код, чтобы ответить на вопрос

[@asiaplusrussia]

Сейчас уже вышла полностью официальная версия, да?

[@annblok_webdev]

Да

[@detro1821]

зачем использовать бутстрап в 2021?

[@vladyslavyermolayev8186]

Для прототипирования, а также больших проектов, где за основу берётся UI components от Bootstrap и на его основе делается свой. Например Angular + Bootstrap или Angular + NG Bootstrap

[@Dik131WZD]

Жаль ссыль на сам макет не оставили

[@tovjukov]

А, что за тема VSCode?

[@annblok_webdev]

Night Owl

[@tovjukov]

@@annblok_webdev пасибо

[@user-su3tw9jd5c]

в элементоре за 5 минут на всё про всё сделал бы.

[@ОльгаБілан-д3ф]

Хотелось с той картинкой svg

[@user-nt9lr3wx8m]

Какой bootstrap в 2021? Когда есть tailwind CSS 🙄

[@annblok_webdev]

Об этом уже есть видео kzbin.info/www/bejne/qZy2oamwrqqfoNE

[@wensisd853]

Старый подписчик Лартена?