Burger Landing 2 - Верстка приветственной секции с фоновой картинкой и секции с карточками (Flexbox)

Рет қаралды 5,035

{WEB PRO} - Школа веб-разработки, создание сайтов

Күн бұрын

Вёрстка сайта Burger Landing из Figma с самого нуля с очень подробными объяснениями каждого действия. Данный макет подойдёт для новичков. Верстка сайта позволит нам попрактиковать знания html, css, бэм, адаптив, а также положить такой прекрасный макет в портфолио.
🚀 НАЧНИ ОБУЧЕНИЕ В ШКОЛЕ WEB PRO. Получить первый урок, тест и домашнее задание можно совершенно бесплатно по ссылке ниже:
t.me/webproschool_bot?start=l...
Ссылки на вёрстку других макетов на канале:
📱Ссылка на плейлист верстки макета NoTab на Flexbox:
• Вёрстка тестового зада...
🍏 Верстка макета Organic Juicy на Grid:
• Верстка летнего, ярког...
✅ Верстка макета Velocity на Flexbox:
• Адаптивная верстка сай...
👨‍💻 Мой список плагинов и расширений для редактора кода VS Code:
• ТОП 10 плагинов в VS C...
❗️САМЫЕ ПОЛЕЗНЫЕ КАНАЛЫ ДЛЯ ВЕРСТАЛЬЩИКОВ: t.me/addlist/yNnyx5mjWrAwYzJi
💜 Сайт школы WEB PRO webproschool.ru/
📚 Материалы для верстки сайта и макет сайта можно получить в телеграме, написав боту слово "код" без кавычек: t.me/webproschool_bot
🎁 Готовый код с уроков можно получить в телеграме, написав боту слово "готкод" без кавычек: t.me/webproschool_bot
Ищи школу WEB PRO в соц. сетях:
🚀 Группа ВК: webproschool
🔥 Телеграм канал: t.me/webproschool
💬 Телеграм чат для общения веб-разработчиков: t.me/webproschool_chat
🔔 Бонусные материалы и уведомления от школы: t.me/webproschool_bot
Таймкоды:
00:00 В этом видео
01:30 Вёрстка приветственной секции
35:35 Вёрстка секции с карточками
56:25 Итоги урока и что ждать в следующем видео
Начни путь веб-разработчика уже сегодня!
С вами был Никита Щегольков, школа веб-разработки Веб Про.
Данные видеоуроки были бы интересно всем, кто ищет: верстка сайта с нуля, адаптивная верстка сайта, верстка сайта для начинающих.
#burgerlanding #webpro #вебпро #html #css #верстка #версткасайта #версткасайтаснуля #адаптивнаяверсткасайта #версткасайтадляначинающих #созданиесайта #каксоздатьсайт #адаптив

Пікірлер: 13

@WebProSchool 11 ай бұрын

🚀 НАЧНИ ОБУЧЕНИЕ В ШКОЛЕ WEB PRO. Получить первый урок, тест и домашнее задание можно совершенно бесплатно по ссылке ниже: t.me/webproschool_bot?start=link_7P0svXUmMT

@kritiyan9056 10 ай бұрын

У тебя самый лучший гайд по верстке) Ты действительно мыслишь как новичок, и когда я задаюсь в голове вопросом - ты автоматически через несколько минут отвечаешь на него. Спасибо тебе

@WebProSchool 10 ай бұрын

Благодарю 🙏

@LanaFox669 2 ай бұрын

Я пересмотрела все видео на ютубе, но тут такой приятный парень и так классно и понятно все объясняет, сейчас 2 часа ночи а я все еще верстаю) взяла бы я курсы? Конечно же да !!!!!

@WebProSchool 2 ай бұрын

Благодарю за обратную связь 🙏 В закреплённом комментарии есть возможность начать обучение в школе WEB PRO. Буду рад вас в ней увидеть :)

@user-gg2ye5gw2h 11 ай бұрын

Начал верстать с первого сайта на канале, скоро и к этому приступлю) Нравится подробное разъяснение и то, что у тебя есть определённая последовательность выполнения проекта)

@denys_kd2373 11 ай бұрын

Отличный урок! Спасибо! мобильная версия - нужна)

@html_css_it 11 ай бұрын

Очень полезные видео!

@rusvak8209 11 ай бұрын

Спасибо огромное за такой полезный контент. У вас прямо талант преподавания) ПС: А разве на моменте 18:26 нельзя было .welcome .container { убрать или задать необходимый margin}? Или с margin это не работает?

@WebProSchool 11 ай бұрын

Спасибо) Наверняка есть различные решения, но на тот момент мне приглянулся именно этот вариант, именно он проскочил в голове. Можете попробовать протестировать и ваш вариант тоже)

@tobesunset820 2 ай бұрын

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

@reghan2936 10 ай бұрын

Почему шапке не задали абсолютное позиционирование? При адаптиве потом будет изменяться высота шапки → надо будет и менять верхний margin у главного блока. Не проще задать 1 раз абсолют и всё?

@petraceig1329 4 ай бұрын

В нынешнее время лучше sticky использовать