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

⚡️ Макет можно получить через донат:

✌️ Материалы видео:

[travelerjimny]

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

[mistressTatiana]

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

[rottweiler]

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

[upravdelami]

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

[AnnaIsHere]

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

[daulet]

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

[cinematic_musicTrailer]

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

[AKATSUKI_]

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

[MestagaN]

Почему в данном примере использовались только блоки <div> без <header>, <nav>, <footer>, <aside>, <section>? Как семантически будет правильнее?

[ANONEMASTER]

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

[andrejsmihailovs]

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

[serenitiSever]

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

Вот честно. Если бы мне попался вот такой "макет", я бы сверстал его быстрее, без bootstrap, было бы меньше кода, вёрстки, а выглядело и работало бы быстрее и лучше 😉

[AnnaIsHere]

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

[Rita-eici]

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

[nurzhanovchanel]

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

[MarvelBad]

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

[qzetsny]

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

[semen_spider]

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

[pandashow]

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

[web]

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