🔥 Верстка сайта с нуля для начинающих | Bootstrap 5, HTML, CSS, Figma
HTML-код
- Опубликовано: 29 апр 2021
- ✅ Надежный хостинг FirstVDS! Скидка 25% на первый месяц на любой тариф: firstvds.ru/s/tpv3004
⚡️ Макет можно получить через донат:
1) по подписке (доступ ко всем макетам) boosty.to/annblok
2) по подписке (доступ ко всем макетам) donut/tpverstak
3) разовая оплата через крипту с получением одного макета new.donatepay.ru/@annblok (в комментариях напишите email)
✌️ Материалы видео:
Bootstrap 5 - getbootstrap.com/docs/5.0/get...
Код - github.com/annblok/Bootstrap-...
Демо - annblok.github.io/Bootstrap-5...
Плейлисты с практикой - • Создание сайтов на пра...
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/
![Moneybagg Yo - WHISKEY WHISKEY [feat. Morgan Wallen] (Official Audio)](http://i.ytimg.com/vi/kJamyq0WplE/mqdefault.jpg)
Приглашаю на бесплатный марафон "Основы веб-разработки" - frontendblok.com/marathons/web-marathon
Сначала показалось"Всем привет, меня зовут Анна Булка "))))))
Комментарий года 😂
Булочку хочешь?
Не только ты так услышал)
Булка)))))
Молодчина ,Аня ! Старательно и очень понятно !
Какое прекрасное объяснение всего и вся довольно простым языком, уже пересморела много роликов. Спасибо!
Спасибо, рада слышать ☺️
Спасибо очень полезно и информативно.
Спасибо большое за урок! вы наверное и так знаете, но если что в фигме можно установить плагин Font Fascia
, после его запуска в макете появится окно со всеми шрифтами которые использовались в макете, а то не удобно чекать каждый текст
Спасибо)))
Спасибо, я таки сделал курсач!!
18:55 А как мы поняли, что image накладывается "именно на этот тег" (кстати, какой, shop-item01?)
1) Для верхних блоков, можно было использовать class="card" и не париться так с CSS
2) Для переноса строк вверх/вниз в VSC лучше использовать не копи-паст, а alt-стрелки
Card бы подошёл в случае, если бы не пришлось ничего позиционировать. Максимум только если использовать, как структуру.
Спасибо! Anna
Большое спасибо! Задали е...чую домашку на курсах, а препод в духе:"Надо сделать как я показывал". Показывать может и показывал, но курс плохо построен и видео фиг найдёшь по названиям (называют как хотят). Показал в один день, а применять знания оказалось нужным к другой лекции!
Спасибо) Интересно было провести такой эксперимент который показывает намного ли быстрее верстать бутстрап или без него какой то макет. И бутстрап только в основном для лендингов хорош?
Мне кажется хорош для админок, чем для лендосов. Хотя и там и там можно использовать.
Почему в данном примере использовались только блоки без , , , , ? Как семантически будет правильнее?
В каждом видео своя цель, почему сделано так, а не иначе. Верстать на реальных проектах надо с семантикой.
а если будет 4к или 8к монитор? то все эти отступы в пикселях будут равны фактически 0
В строчный тег "a", вроде как нельзя вставлять блочный элемент. "div"
Такая милашечкааааа 🔥🔥🔥😍😍😍😍😍😍
меня все видео парило одно: 357px это ширина, а не высота😢
Будет отдельный курс bootstrap?
Полезная информация
Здравствуйте. Подскажите название вашей темы на VS code, очень красивая и приятная для глаз)
Здравствуйте, Night Owl
Анюта ты прекрасна!!!!!
Спасибо)
спасибо, сделал.
спасибо!
Привет всем.а откуда взять макет?
Там у изображений есть другой экспорт, чтобы вытянуть оригинал изображения (без надстроек)
Добрый вечер хотелось бы урок как сверстать шаблон магазина на Bootstrap 5,
Забыли точки :c
Но за урок большое спасибо!
Ви лутший преподователь по програмир.
Здравствуйте, ответьте пожалуйста, не могу нигде найти, можно ли начинать верстать в планшете, или здесь нужен минимум ноутбук?
А как ты планируешь видеть результат верстки для больших экранов, верстая на планшете? Хотя если это будет гигантский планшет эпл, то может и пойдет
@@yurok1991 дело в том, что моя знакомая работает заграницей, и она сказала, что там верстают чуть ли не на смартфонах, хотя я тоже в этом сомневаюсь. А самый распространённый экран ноутбуков это 14 и 15.6 дюймов, такой пойдёт?
Подойдёт. Я могу понять доработать что-то на маленьком экране, но прям с нуля делать - странным кажется.
@@yurok1991 конечно, лучше сразу приобрести правильную технику, чем мучиться потом
@@saltedcaramel7505 так у тебя есть например в хроме панель разрабов, там выставляешь для устройства full hd и все, будет тебе эмуляция, хотя мне коллеги говорили что на фаерфоксе именно эмулятор лучше
Хорошо бы довести этот макет до адаптива, чтобы пример был прям вообще завершенный. И декор элемент доверстать. Интересно сколько платят на фрилансе за такую верстку?
ОООООО вот тут уже по прикольней, а почему так мало то? Еще есть что нибуть?
Надеюсь голубые глаза, это не цвет линз, а собственные 😍😍😍😍😍🔥🔥🔥🔥🔥🔥🔥🔥
Добрый день если можете сделать урок сверстать полнолицый шаблон интернет магазин на Bootstrap 5
Что то как то замороченно, а почему мы не написали сначало строка ров а потом там же 3 картинки и потом допустим мд-3 и получили бы 3 колонки а потом уж как то в колонках уже картинки и текст ставили Что то не понятно
Сегодня я расскажу вам как создавать Анну Блок
#Анна {
Color: white;
Look : beautiful;
IQ: 300
}
После IQ точку с запятой забыл.
здравствуйте. что то не нашла макета в материалах урока
В описании под видео
Замечательная "🔥 Верстка сайта с нуля для начинающих". Особенно, если по 5 раз все менять, особо ничего не объяснять, только и остается что тупо скопировать и самому искать в комментариях что к чем...
Соглашусь но скажу чуть мягче. Видео из серии: смотрите как я верстаю, комментирую но ничего не объясняю. На данном этапе мне как начинающему многое непонятно. Но в будущем обязательно буду обращаться к урокам Анны за примерами. Зачёт, подписка.
А я не пониме.Тут показано як для користувача,а як для власника сайта це зробити,як магазин,як йому цей сайт злити і куди?
Всё же шаблонизатор в этом случае рулит!
А где точки в заднем плане. В фигме же есть
Забыла закрепить 😬Доделала и выгрузила сюда github.com/annblok/Bootstrap-5-Example
Для блока с ценой лучше использовать не col-8 и col-4, а col и col-auto
Извините, а можно узнать, почему?
@@l1na233 ну, потому что дав цене col-4 мы жестко ограничили, и допустим более длинная цена в какой то момент может не поместится. А используя col-auto - блок с ценой подгонится по ширине так, чтобы всё влазило. А "col" для левого блока с текстом сделает его на всю оставшуюся ширину, не зависимо от того, сколько будет занимать цена. В общем более гибкий и предусмотрительный вариант, при смене наполнения будет
Привет! где этот макет находится у тебя, чтобы можно было картинки вытащить!...????
⚡ Макеты можно получить через донат:
1) по подписке (доступ ко всем макетам) boosty.to/annblok
2) по подписке (доступ ко всем макетам) vk.com/donut/tpverstak
3) разовая оплата через крипту с получением одного макета new.donatepay.ru/@958090 (в комментариях напишите email)
Эта информация прямо под видео
После просмотра видео, пришел к выводу, что скорее всего Bootstrap использовать в верстке не буду. Чистота и читабельность кода пропадает. Может я ошибаюсь (скорее всего). Опытные верстальщики, объясните: нужен Bootstrap или нет?
Я бы не сказала, что его использование обязательно, по сути зависит от компании и привычек написания кода в сложившейся команды. Из последнего, где мне было удобно его использовать - это написание админки под свои задачи. Создание структуры с Bootstrap было быстрее, чем прописывать все стили вручную. Как таковой дизайн мне не требовался.
@@annblok_webdev спасибо за ответ. В компаниях работать не планирую, а вот ваши видео, Анна, смотреть планирую. Молодец! Можно пожелание? Объясняйте немного подробнее, почему делаете так, а не иначе.
зависит от макета, иногда можно самому написать в стилях свойства для .row и .col и юзать их там где надо, а есть макеты где все сделано под бутстрап, читабельность кода это конечно хорошо, но если работаешь на фирме, то платят за жопочасы и нужно как то балансировать
Надеюсь вы или кто-то из опытных ребят ответят тут мне на мой крик души)).
Я в прошлом графический дизайнер, специализировался на наружной рекламе, но увидев код понял что хочу заниматься именно этим. Я начал смотреть твои курсы с самого начала (HTML, CSS). И если с HTML мне всё понятно то с CSS сложилась какая-то не понятная ситуация. Вроде всё понятно, всё ясно, но начать что-то верстать мне крайне тяжело, потомучто css никак не укладывается у меня в голове, я не могу сложить свое рода представление и карту в своей голове что именно мне нужно сделать чтобы тот или иной элемент был в том месте в котором мне и нужно. Если к примеру я знаю что мне нужно сделать в Figma для расстановки всех графических элементов или например в illustrator поставить все графические элементы на свои места, то в css для меня это превращается в какой-то адский ад. Я крайне загорелся желанием стать как минимум хорошим верстальщиком но когда я понял что не могу уложить в голове понимание css у меня стали опускаться руки, надеюсь я такой не единственный и есть люди у которых подобные проблемы)) Я три раза пересмотрел урок по CSS,вроде все теги понятны и с английским у меня все нормально, но на практике я не могу сложить картинку в голове. Знаю что первым советом будет именно практиковаться, но я это и делаю но что-то идёт не так. Спасибо если кто ответит.
На каких курсах вы обучались? Платных или смотрели ролики на канале?
@@annblok_webdev и ваши смотрел и канал фрилансер по жизни
Marvel OneTwoThree на старте самообучения всегда будет что-то не получаться и казаться, что делаете что-то не правильно. После каждого нового свёрстанного проекта будете смотреть на свой предыдущий и думать - «да как я вообще там мог верстать? Сейчас бы я сделал лучше». Поэтому практика, практика и ещё раз практика 👍🏻 но если вам нужна система в знаниях, то помогут курсы. Именно на платном обучении идёт теория + практика, чтобы получать знания и сразу их закреплять. На сайте frontendblok.com можете изучить все предложения (все майские будут скидки)
@@annblok_webdev спасибо большое за ответ, это мотивирует!
Практикуйся , у меня лично так , всё розбирается по ходу дела )))Я 5 дней не мог понять как пользоваться этими флексами вроде бы и понятно и все ясно , но когда сам верстал не понимал нужен ли контейнер и т.д смотрел видосы ежедневно и всё равно не мог понять , а потом подумал пофиг буду делать как я умею и после того как я начал не втыкать видео и верстать по примеру как на видео , а именно сам думать я научился верстать флексами . Так что больше практики и всё получится)
Как же я ждал когда она дойдёт до точек. Но нет. Слилась в конце. Видимо это было сложно сверстать 😊 я где-то лет 5 назад так костылил с вёрсткой. И на тот момент была весомая причина. Флексы, гриды, гапы были не так развиты. Сейчас из всего только у gap есть проблемы. Сафари не понимает что такое gap в flex и в grid. А в целом такая вёрстка сейчас очень даже доступна. А учитывая возможности Tailwind CSS я до сих пор воспринимаю bootstrap 5 как что-то посредственное и не серьёзное. Хотя отдам должное, выпилить jQuery было хорошей идеей, так они оторвались от древностей и bootstrap можно легко внедрить в React.js или в Angular, или во Vue.js
Вот честно. Если бы мне попался вот такой "макет", я бы сверстал его быстрее, без bootstrap, было бы меньше кода, вёрстки, а выглядело и работало бы быстрее и лучше 😉
Покажи.
Сейчас уже вышла полностью официальная версия, да?
Да
а зачем bS, там надо отключить всю шнягу, он грузит всю библиотеку по умолчанию. Так вот а зачем BS. Просто гридами быстрее было бы и проще. Точнее вотттак можно: в head borderbox а в BS5 задать изначальный отступ и колонки размер. А еще было бы неплохо адаптивы сразу включать. Так как не бывает только пс версии. Сейчас сразу адаптив как само сабой.
Жаль ссыль на сам макет не оставили
а зачем создавать отдельный класс nosale и прописывать ему в стилях visibillity: hidden ? когда можно просто этот спан убрать из разметки?
мне кажется это не имеет значения, поскольку на макете я вижу инет магаз, а там скорей всего будет юзаться php, следовательно будут условия что то вроде if($product->sale_price) ......тут span..........
@@evgeniyprowork да согласен, если будет можно у одного блока влключить этот класс, то должна быть возможность у всех это сделать
@@icycrusty именно, оно обычно все эти лейблы пишутся через условия, да и вообще в карточке условий полно, на каждый чих, оно же как, товар может быть в наличии а может быть и нет, а еще запасы заканчиваться могут, также отображаться старая цена без скидки перечеркнутая и рядом новая, да там моментов куча, а верстку то делать надо сразу на все))
Вопрос: зачем подключать всю библеотеку бутстрапа, если вы используете от туда пару класов только, которые можна и так написать. А так по сути размер сайта сразу стает большой. Если это для примера, как работать на нём то ок, но потом все клиенты пишут сделайте на бутстрапе как будто это прям обязательно
Есть еще вариант подключать отдельные стили, которые отвечают за конкретные функции и тогда размер будет минимальным. Чаще всего используют сетку Bootstrap, не подтягивая ничего лишнего.
Ребятаа🥲 почему у меня блоки не в строчку получились а вертикально?((((
Нужно видеть код, чтобы ответить на вопрос
🤙🤙🤙
Если честно, мне кажется что это всё лишняя заморочка, на чистом css это напишется в 2 раза быстрее. Возможно это из-за того, что bs это узкоспециализированной инструмент для своих задач, а не для обычной вёрстки
bs по сути для всего. как и любой другой css+js framework. ваша "нелюбовь" к bs - скорее всего от плохого знания данного фреймворка. разработка на любом фреймворке всегда в разы быстрее чем писать код в ручную) зачем писать то, что уже написано?
А что за редактор? Как называется?
VS Code
А, что за тема VSCode?
Night Owl
@@annblok_webdev пасибо
как получить макет за разовый донат? Уже оплатила
забыла почту в коментарии указать(
Хотелось с той картинкой svg
зачем использовать бутстрап в 2021?
Для прототипирования, а также больших проектов, где за основу берётся UI components от Bootstrap и на его основе делается свой. Например Angular + Bootstrap или Angular + NG Bootstrap
если бы еще объясняла что к чему относится, было бы не плохо, не понятно зачем тупо комментировать свои действия
Просто зря потраченное время!! Это клеим, это вставляет ,это копируем, что это ,это пишем? Для чего? Что за функцию это выполняет?? Сама себе толкует что то, сама только видимо и понимает.Было бы 0 вопросов, если б не было подписи "для начинающих"! Урок назвать надо "скопируй как я и вставь , а потом сам разберись".
Чувак😅, это bootstrap, с ним только так и работают. А чтобы понимать что происходит тебе нужно знать хотя бы на начальном уровне css и html
Старый подписчик Лартена?
Какой bootstrap в 2021? Когда есть tailwind CSS 🙄
Об этом уже есть видео ruclips.net/video/skSpvzyEljo/видео.html
в элементоре за 5 минут на всё про всё сделал бы.