Вёрстка адаптивного сайта для новичков по БЭМ с адаптивностью

Рет қаралды 10,493

Күн бұрын

В этом видео я показываю вёрстка сайта по готовому макету. Использую HTML, CSS, БЭМ, Flexbox и Grid. Вы узнаете, как верстать сайт по БЭМ, ведь это то практический пример использования этой методологии. Приятного просмотра 😇.
📌 Основы БЭМ: • БЭМ - простыми словами...
📌 Макет: cutt.ly/xwJ0TUJh
👁‍🗨 Телеграм канал: t.me/frontend_du2
👁‍🗨 Discord сервер: / discord
👁‍🗨 VK: frontend_du2
👁‍🗨 Дзен: dzen.ru/frontend_it
Тайм-коды:
00:00 - Интро
00:44 - Макет
02:51 - БЭМ-компоненты
07:26 - Создание проекта
08:21 - Верстка компонентов
01:09:39 - Вёрстка главной страницы
01:10:28 - Шапка
01:22:09 - Секция "Hero"
01:33:37 - Секция "Обратная связь"
01:41:13 - Секция "Каталог"
01:50:26 - Футер

Пікірлер: 68

@user-ys2et3kc8c 4 күн бұрын

Все супер круто!!! Спасибо вам ОГРОМНОЕ!!! 👍👍👍100% буду использовать.

@alex_dudukalo 17 сағат бұрын

Я рад, что видео было для вас полезным. Спасибо за комментарий 😇

@user-dt9ek2hq8n 5 ай бұрын

Как всегда - шикарно!!!

@user-xl4gy4dl4q 3 ай бұрын

Огромная благодарность за Вашу работу

@user-wf4np1ne2c 5 ай бұрын

Наконец-то добрался к видосу, урааа))

@relaxdeepsleepmusic3608 5 ай бұрын

Легко усваиваемый контент, для изучения вёрстки то что нужно.

@alephanta 4 ай бұрын

Потрясающий урок по БЭМ. Много благодарностей!

@jekakavaltchuk2714 6 күн бұрын

Классное видео, спасибо за контент)

@sergius_yo 5 ай бұрын

Прекрасный ролик, Александр! Сижу делаю вместе с Вами!!! Всё понятно и просто. И кстати, поздравляю с 10-ю тысячами подписчиков😃

@user-fh6kz1gp8m 4 ай бұрын

Спасибо! Очень полезное видео🙂

@andreyfedyukin8360 5 ай бұрын

Супер! 👍 Спасибо))

@presquevu5281 2 ай бұрын

Огромное спасибо. Спокойно и без суеты. Благодаря Вам понял что такое БЭМ. Однозначно подписка.

@archybro7977 3 ай бұрын

Добрый день, подача видео и содержание шикарно! Дополнил знаний, подглядел некоторые приемы. Теперь стало понятнее) За тэг picture!

@serrybakov 3 ай бұрын

Спасибо Александр! Грамотно и доходчиво. Подпишусь и жду следующих видео!

@alex_dudukalo 3 ай бұрын

Спасибо за ваш комментарий :) Я рад, что видео вам понравилось и что вы присоединились :) Думаю, канал сможет предложить вам интересный контент :)

@_Alhimik_ Ай бұрын

Отличное видео!

@Ruslan93Nazarov 5 ай бұрын

Спасибо за отличный материал! Очень понравилась подача. Из интересующего было бы здорово увидеть ролик про единицы измерения. Что чаще используют в реальных проектах px или rem. Что больше подходит адаптивности и всё в таком духе!

@krashovotv4437 5 ай бұрын

Видео как всегда супер! Учусь вместе с вами, лучшая подача знаний!

@alex_dudukalo 5 ай бұрын

Спасибо вам :) Рад, что видео было полезным и интересным :)

@user-zj5dw5ep1u 3 ай бұрын

Единственное видео, благодаря которому вообще поняла смысл БЭМ, а также его назначение! Спасибо огромное! Теперь уже руки чешутся переделать домашку на скилбоксе правильно))

@igors7305 5 ай бұрын

Спасибо, Александр! Проверил и упорядочил свои познания в верстке. Возьму на вооружение интересные приёмы из этого видео.

@alex_dudukalo 5 ай бұрын

Очень рад, что видео было вам полезным. Да, я сам часто верстаю компоненты отдельно и потом собираю верстку всей страницы :)

@dobriikompotik 5 ай бұрын

Хорош, спасибо за видео!) в следующий раз расскажи правильный порядок для свойств в сss, пожалуйста.

@SandyWinman 26 күн бұрын

Спасибо Саша. Давно не было от Вас новых видео. Все ждут!

@alex_dudukalo 25 күн бұрын

Спасибо за комментарий :) Июнь планируется продуктивный в части записи видео ) Думаю, скоро будет на канале )

@gm_Maker 4 ай бұрын

Топ, спасибо! :)

@McGaROrEP 5 ай бұрын

Все круто очень хорошее объяснение

@redbread_official 5 ай бұрын

Очень неплохой ролик, освежил у себя знания в голове по БЭМ и подчерпнул пару полезных лайфхаков)

@alex_dudukalo 5 ай бұрын

Очень рад, что видео было для вас полезным :) Спасибо, что оставили комментарий, это очень помогает и вдохновляет.

@user-iv6hg2pc8l 3 ай бұрын

Асмр верстка 😊 Полезное с приятным

@olegdp 5 ай бұрын

Спасибо. Урок понравился. Наименование классов по БЭМ стало понятнее. Да, материал усваивается легко.

@alex_dudukalo 5 ай бұрын

Спасибо за ваш отклик 😍. Я очень рад, что видео вам понравилось. Будем продолжать

@user-go4bz9wm3n 5 ай бұрын

спасибо!!! То что надо

@igorwagner7176 2 ай бұрын

видео полезное!

@user-vo1bf7gl5t 5 ай бұрын

Александр, видео турбо пушка. Хотелось бы больше видео по JS с реализацией каких-нибудь мини проектов, на подобие игры в пары. Есть огромная проблема с тем, с чего начинать делать проект. Может с просмотром ваших уроков придет осознание😂 А то я никогда не сяду делать дипломку по базовому js😢

@user-jq6tr6rr8v 5 ай бұрын

Спасибо большое!!!

@user-mr2tq5mg5i 2 ай бұрын

очень полезно!!!

@alex_dudukalo 2 ай бұрын

Спасибо за отзыв :)

@Af1n0chka 3 ай бұрын

Хочется видео о теге пикчер и теге дисплей. И в целом порядке записи тегов. Видео очень полезное, спасибо!

@user-xl4gy4dl4q 4 ай бұрын

Здравствуйте. Вы замечательный преподаватель. Спасибо. И... я за урок по тэгу

@user-rj9cq3nz8h 5 ай бұрын

Спасибо!

@kontorasb2754 5 ай бұрын

Привет! Как всегда супер! А подскажи что за настройка, чтоб класс первым подставлялся, у меня тоже пунктик по этому поводу))

@YouMeNow88 5 ай бұрын

А почему нет уроков с 0 до верстки макета? Просто какша в плейлисте. Спасибо

@balcony_warrior 5 ай бұрын

Здравствуйте. Подскажите пожалуйста, как часто общая структура сайта (именно основные, большие блоки страницы) строится с помощью гридов с учетом колоночной системы? Вот это разбиение на 12\16 колонок и т.д. Мне это показалось немного душноватым, но я именно так делать не пробовал, возможно оно и удобно. Пока что я гриды использовал только для более мелких компонентов, типа карточек. Хотя на макетах в фигме часто вижу эти колонки (а может они именно дизайнерам нужны были).

@alex_dudukalo 5 ай бұрын

Здравствуйте, очень хороший вопрос. Кажется это пошло с времен бутстрапа. Эта библиотека появилась еще до гридов в CSS. И там это было необходимостью. Возможно дизайнеры делают такую сетку по этой причине. Бутстрап уже редко используются, но привычка осталась :) Возможно есть другое мнение...

@balcony_warrior 5 ай бұрын

@@alex_dudukalo Понял, благодарю за ответ!

@dmitriydikunov7400 4 ай бұрын

имеет ли смысл начинать учить это сейчас, или ИИ вытиснет ?

@alex_dudukalo 4 ай бұрын

Это дискуссионный вопрос, но я считаю что имеет :)

@profesor2009 5 ай бұрын

как сохранить фото из макета? у меня только фото с текстом сохраняется, перепробовал все и в режиме дизайнера и режиме разработчика.

@profesor2009 4 ай бұрын

@@lexuschert из этого видео, я все таки нашел как скачать фото, у меня все время скачивалось с кнопкой и текстом.

@user-vu9nz5bc7x 5 ай бұрын

Спасибо за урок! Разве БЭМ не подразумевает стили каждого блока реализовывать в отдельном файле? Вообще не понятно как организовывать файловую структуру стилей по БЭМ, на чистом CSS почти никто не пишет, т.к. в одном файле получается каша.

@BotKarma66 5 ай бұрын

На чистом CSS никто этим в здравом уме не будет заниматься. Все используют сборщики например Галп, потому,что там настраиваешь все под свою работу и он автоматом за тебя все действия выполняет в работе , кто то пишет в общем файле style.scss а тока media файл выносят отдельно и потом все автоматом ипортируется в общий файл и сжимается в финале. Либо под каждый блок разбивают scss и потом это так же ипортируется в один файл и сжимается.

@user-vu9nz5bc7x 5 ай бұрын

@@BotKarma66 Я про тоже что на CSS никто писать не будет, а вот как организуется файловая структура по БЭМ в SCSS ни где нет.

@BotKarma66 5 ай бұрын

@@user-vu9nz5bc7x Бэм это именование классов для понятия кода, что во что вложенно, чтоб ты понимал что пишет другие разработчики и ты сам. Больше это ничего не подразумевает .

@UchimVmeste. 3 ай бұрын

Как буд-то два раза верстаешь один и тот же макет. Лучше бы сразу все сверстал. И очень много модификаторов и переменных. Новичков может запутать легко.

@user-ck3hl9kk1r 25 күн бұрын

А как понять по макету какая кнопка это фокус, а какая при нажатие и т.д?

@alex_dudukalo 25 күн бұрын

Обычно в макете это указывается или же уточняется у дизайнера :)

@DreamingWithAndrew 4 ай бұрын

Помогите, не понимаю в чем разница с inline-block и без него

@alex_dudukalo 4 ай бұрын

Элемент с inline-block имеет свойства блочного элемента и инлайнового. Рекомендую посмотреть тему "Блочная модель"

@Shlomo_87-th 4 ай бұрын

может ли автор помочь: в этом видосе чел прикручивае фон двумя классами kzfaq.info/get/bejne/nJOZpaeC3NqVnGg.html мне нихрена не понятна логика, почему фон так встает именно если прикручивать псевдокласс с похожими свойствами как и имг, есть ли способ попроще без танцев с бубнами?)

@true227 5 ай бұрын

По факту этот бэм вам нафиг не потребуется.

@sh0ny 5 ай бұрын

Module css forever

@egorrublev5529 5 ай бұрын

неплохо очень доступно лампово продолжай дальше

@dmitrysh7227 5 ай бұрын

Прости если воспримешь не очень надеюсь будет как мотивация. Я понимаю что канал для так кто только начал, но все очень слабо....Учи сразу как использовать gulp, webpack, git, препроцессоры, посмотрел 1 видео о js и вообще разочаровался, в данных реалиях это просто не о чем(опять таки не хочу обидеть). На видео в привью канала ты говоришь что ты "профессиональный разработчик" но материал... сложилось впечатление что ты даже не джун, и коммерческого опыта у тебя вообще нету, в плане что сейчас просто html верстка мало кому нужна. Не могу сказать что по верстке они что то не узнают, подчеркнут, но это просто очень слабо( Еще раз не считай за сильную критику, просто это все вообще не соответствует реалиям на данный момент)

@alex_dudukalo 5 ай бұрын

Дмитрий, спасибо за ваш комментарий, раскрывающий важные моменты. Да, несомненно знание сборщика, препроцессора, системы контроля версий, flow, фреймворки - это то, чего требует рынок для того, что бы занять начальную позицию. Но, это видео действительно для новичков. Если включить, например в это видео, препроцессор (а он очень хорошо подходит при работе с БЭМ), то это будет ссылка на другой материал. И зрителю придется смотреть материал по препроцессорам. Фокус БЭМ теряется. Что бы упросить и сделать материал понятным, я спрашиваю себя: - Какая тема видео? - БЭМ, - Что нужно, что бы зритель понял тему и мог использовать БЭМ? - Основы верстки и CSS, - нужен ли препроцессор, чтобы понять основы БЭМ? - нет. Есть разные методики обучения. Если говорить о конечной цели: пройти техническое собеседование и устроиться на работу, то нужно соответствовать рынку, то, на мой взгляд, если человек не научился и не понял, то он вообще не придет на это собеседование. Я считаю, что моя первая задача, помочь понять тему и помочь научиться учиться самостоятельно. Я не рассказываю о препроцессоре и сборщике в этом видео, но надеюсь, что после просмотров тема БЭМ будет понятна. В любом методе обучения есть плюсы и минусы, думаю время расставит все на свои места :) Спасибо вам за такой интересный комментарий

@user-cn4rg9my5f 4 ай бұрын

Александр продолжайте делать ролики в своей манере. Помимо Вас очень много контента для знающих. Найти детальное описание для тех, кто только учится сложно. А мелочей много. Но их никто (кроме Вас) не разжёвывает, считают, что и так понятно. Если понятно, всегда можно промотать или выключить @@alex_dudukalo

@Se7eN_time 3 ай бұрын

@alex_duduklo ⁠ я научился базовым js только посмотрев ваши видео ) думал что никогда не пойму js и хотел на пол пути даже бросить учиться , к счастью нашел ваши видео ! Просто спасибо что вы есть… Хотелось бы попросить вас можете добавить видео как работать с GULP и SCSS/SASS . Непременно буду ждать )