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

[@annblok_webdev]

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

[@travelerjimny]

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

[@Ку-куЕпта-ь8о]

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

[@yurok1991]

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

[@rushen8148]

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

[@КостяШевкин-з5х]

Булка)))))

[@rottweiler4201]

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

[@mistressTatiana]

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

[@annblok_webdev]

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

[@AnnaIsHere]

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

[@upravdelami]

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

[@annblok_webdev]

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

[@СагитМирвалиев]

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

[@mellowaybeats]

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

[@luxarmiger5729]

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

[@MestagaN]

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

[@annblok_webdev]

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

[@daulet4222]

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

[@АндрейБелов-л5п]

Спасибо)))

[@_pheax]

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

[@dipsake4102]

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

[@htywyj]

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

[@iddqd777]

Ещё и умная

[@Мухаммадурозов-я6е]

Спасибо! Anna

[@serenitiSever]

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

[@AnnaIsHere]

Покажи.

[@AKATSUKI_2517]

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

[@maksimmakarov9319]

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

[@олегдорожников]

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

[@AnnaIsHere]

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

[@nurzhanovchanel]

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

[@htywyj]

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

[@turnikmem]

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

[@Андрей-х6е6ъ]

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

[@l1na233]

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

[@Андрей-х6е6ъ]

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

[@ДокторнаПриколе]

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

[@andrejsmihailovs9394]

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

[@AnnaHurma]

Спасибо)

[@immortal_i]

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

[@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 дней не мог понять как пользоваться этими флексами вроде бы и понятно и все ясно , но когда сам верстал не понимал нужен ли контейнер и т.д смотрел видосы ежедневно и всё равно не мог понять , а потом подумал пофиг буду делать как я умею и после того как я начал не втыкать видео и верстать по примеру как на видео , а именно сам думать я научился верстать флексами . Так что больше практики и всё получится)

[@hariomtatsat108]

спасибо!

[@grufilm]

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

[@АртёмДавыдов-ы5э]

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

[@dannesterenko8161]

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

[@ANONEMASTER]

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

[@bykoff]

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

[@user-pc8vs9jw2x]

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

[@web2905]

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

[@annblok_webdev]

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

[@АртёмДавыдов-ы5э]

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

[@ОлесяАсанова-к4к]

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

[@annblok_webdev]

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

[@AlexandrMakarov13]

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

[@gennadymakar325]

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

[@vadimkulikovvideo]

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

[@ИгорьПопцов-л4о]

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

[@dmitrybelyaev6286]

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

[@mirjalolkhudratov9210]

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

[@annblok_webdev]

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

[@luxarmiger5729]

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

[@annblok_webdev]

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

[@luxarmiger5729]

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

[@evgeniyprowork]

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

[@adaewandrei]

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

[@pandashow9156]

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

[@user-pc8vs9jw2x]

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

[@ЮлияРябоконь-и9ъ]

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

[@annblok_webdev]

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

[@annblok_webdev]

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

[@alphatech_a1]

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

[@annblok_webdev]

Да

[@farapovorotnikov1579]

🤙🤙🤙

[@komdiv4906]

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

[@annblok_webdev]

VS Code

[@dmaksiuta]

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

[@annblok_webdev]

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

[@Rita-ei4ci]

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

[@rim_shot_]

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

[@itadaki84]

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

[@annblok_webdev]

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

[@saltedcaramel7505]

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

[@yurok1991]

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

[@saltedcaramel7505]

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

[@yurok1991]

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

[@saltedcaramel7505]

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

[@evgeniyprowork]

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

[@nan234]

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

[@tovjukov]

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

[@annblok_webdev]

Night Owl

[@tovjukov]

@@annblok_webdev пасибо

[@Dik131WZD]

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

[@SofiaGamova]

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

[@SofiaGamova]

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

[@ЕлизаветаЛысенко-ъ3ю]

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

[@annblok_webdev]

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

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

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

[@detro1821]

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

[@vladyslavyermolayev8186]

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

[@wensisd853]

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

[@МихаилСветлов-м3ю]

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

[@ОлегТроев]

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

[@annblok_webdev]

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