Верстка сайта для начинающих. Подробное объяснения. Часть 1 Подготовка и верстка шапки на HTML и CSS

Вёрстка сайта 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 Обзор макета
00:21 Где я взял макет
00:43 Что будет в этом видео
01:20 Где скачать всё необходимое для вёрстки
03:00 Подготовка графики. Скачивание картинок и иконок из Figma.
28:15 Начало вёрстки. Создание и подключение необходимых файлов.
31:40 Подключение шрифтов из Google Fonts.
37:30 Что такое шапка сайта?
39:30 Разметка шапки в html
52:30 Стилизация шапки с помощью css
01:27:37 Что такое контейнер и как его создать
01:33:00 Выравнивание элементов в одну строку через flexbox
01:37:50 Присоединяйся в чат разработчиков
Начни путь веб-разработчика уже сегодня!
С вами был Никита Щегольков, школа веб-разработки Веб Про.
Данные видеоуроки были бы интересно всем, кто ищет: верстка сайта с нуля, адаптивная верстка сайта, верстка сайта для начинающих.
#burgerlanding #webpro #вебпро #html #css #верстка #версткасайта #версткасайтаснуля #адаптивнаяверсткасайта #версткасайтадляначинающих #созданиесайта #каксоздатьсайт #адаптив

[@spicyeric9063]

Я шокирован тем как доходчиво вы объясняете, красивой грамотной речью, приятным голосом. Вас хочется слушать. Ваш проффесионализм как верстальщика так и преподавателя вызывает уважение. Пожалуйста, продолжайте делать то, что делаете.

[@WebProSchool]

Благодарю! Такие комментарии вдохновляют и мотивируют двигаться дальше. Спасибо за обратную связь :)

[@user-xn5nd3fq6t]

Много видео посмотрел по верстке, но ты действительно объясняешь доходчиво и понятно! Спасибо! Ждем больше видео теперь по языкам программирования!

[@muzzzychenk0]

верстаю уже больше года, конечно все что было в видео я знал, но именно вы помогли научиться практиковать правильно эти знания, спасибо!

[@Plombiros]

И что как успехи за год?сам верстаешь уже?

[@user-jw4sr2ey5d]

спасибо за хорошее объяснение с примерами.

[@user-iw7mj1ci5e]

Хорошо объясняете, на простом языке, как раз для начинающих. Спасибо 👍

[@user-cl9ek1ss9r]

Все предельно понятно. Спасибо.

[@domakook753]

Здравствуйте! Всё просто всё подробно, спасибо.

[@TopTop-qg1oj]

воуууууууууууу)))это очень круто!!!куда ты пропал??что то новых роликов давно не видно

[@user-cq6yh9lo9h]

Очень доходчиво!!

[@fromrussia7135]

Автор, благодарю тебя за обучение. Не останавливайся и не слушай хейтеров!

[@WebProSchool]

Благодарю за поддержку. В ближайшее время выйдут новые видео :)

[@user-kd7fp3pe6r]

Очень хороший урок😊Спасибо огромное

[@whole_lotta_redd]

Я хочу сказать тебе огромное спасибо! За твою проделанную работу, ты очень сильно помог разобраться во многих вещах очень доходчиво. Я только начал учить html и css и много каких вещей было непонятно, я буду продолжать смотреть твои видео и надеюсь , благодаря твоей работе, я смогу делать свою работу с каждым разом только лучше и легче! Ещё раз огромное спасибо!

[@WebProSchool]

Благодарю за приятные слова 🙏 Удачи в обучении)

[@whole_lotta_redd]

@@WebProSchool спасибо огромное!

[@sleepspacepiece]

Красавчик!

[@WebProSchool]

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

[@vikrinov6022]

Отличное объяснение. Даже на платном курсе так не объясняют.😊

[@WebProSchool]

Благодарю 🙏

[@user-ri7bv3km3f]

ты просто лучший

[@karmawar]

Максимально понятно

[@Middlefront]

Спс за видео❤ просто нету нормальных видосов😅

[@nonemeboabs]

Почему то при задании max-width для контейнера элементы начали максимально сжиматься. Я попытался разобрать твой готовый код, но так и не понял в чем была проблема. Сам же просто задал width такой же как и max-width и все заработало. Кто-нибудь может объяснить в чем была проблема?

[@user-zf9vz8om3j]

Всё было прекрасно, только когда я услышал фразу: "Надеюсь ничего не забыл" , то вспомнил один момент который стоило бы затронуть )) Забыл назвать комбинацию клавиш для форматирования кода по код-стайлу. Лично меня этот момент сразу заинтересовал) Если кому-то нужно, то это комбинация SHIFT + OPTION + F (на Mac) / SHIFT + ALT + F (на Windows) Всем спасибо) 🙂

[@WebProSchool]

@@user-zf9vz8om3j да, либо правой клавишей мыши по коду - Форматировать документ

[@user-wb2vs9hg5k]

А что делать если в зип файле содержится макет с расширением psd и его нельзя импротировать в фигму, что делать в такой ситуации?

[@Abdurakhmanki]

А ссылку на макет

[@user-vj9jb2pj3h]

ждем мобильную верстку!)

[@ksenimal]

а ресеты не надо подключать сразу?

[@user-fn6tb8gn5j]

В обновленной фигме не вижу вкладку инспект, где найти ее?

[@GrekRND]

я так понял теперь это платная фича

[@user-dy9el8pj9o]

Не уверен что ссылке в хеде нужен класс active, тк. скорее всего opcity: 1 выставляется псевдоклассу :hover Если конечно мы не закрепляем хедер

[@Croopic]

Я не понимаю как решить проблему:перекидываю файл макета в фигму и пишет:Importing to figma design ❌ maket Burger Landing.fig Unsupported file format. Помогите пожалуйста разобраться с этим

[@ghfjtyh6464]

разобрался, как решить эту проблему?

[@user-fn6xx7db1r]

Это семантическая вёрстка?

[@olegger7436]

в обновленной фигме инспект убрали, и теперь оригинальную картинку не получается стащить, или они куда в другое место эту функцию засунули, кто знает?

[@WebProSchool]

К сожалению, пока простого пути не нашёл. Можно просто фотку вытащить из фрейма и убрать обрезание с помощью crop image. Но это долго и видимо пока можно обойтись без оригинала и использовать export того контента, который представлен. Также все материалы из видео (оригиналы) можно получить в телеграме.

[@stasalsakhanov435]

SHIFT + D нажми на клаве, откроется режим разработчика.

[@miyuki5273]

@@stasalsakhanov435 за него надо платить ГЕНИЙ

[@tortik_0162]

@@stasalsakhanov435 и ничего там не будет) Просто показывается, что есть такая то фотка, с ней ничего не сделать и нет такого, как в ролике

[@user-tu9uv6zl6y]

Мобильная верстка будет?

[@WebProSchool]

Сейчас идет голосование в телеграме на этот счёт

[@musicformedidation]

у меня такая проблема что не получается сделать Home светлее уже 3 раза повторяю то что у вас в коде но не получается

[@WebProSchool]

Продублируйте свой вопрос в чат в телеграме и прикрепите архив с версткой, я помогу t.me/webproschool_chat

[@Croopic]

Что делать если нету eCSStractor Run?

[@eliaaykkk6275]

здравствуйте, нашли? а то я тоже найти не смогла

[@user-dy9el8pj9o]

Добавить. В плагинах для VScode можно его найти

[@alexandr6427]

😄

[@user-rm5wi9tu8u]

когда вторая часть?

[@WebProSchool]

Видео выходят по четвергам в 17:00 по Москве.

[@Chupa_coach]

Не могу скачать материалы!) Требует платную подписку, что делать?

[@WebProSchool]

Ни у кого не требует, у вас требует) Не вводите людей в заблуждение, пожалуйста

[@Chupa_coach]

@@WebProSchool Не ввожу, разобрался, не пугайтесь так за свой проект) Всё в порядке)

[@Chupa_coach]

@@WebProSchool Учусь в онлайн-школе SkillBox и параллельно подпитываюсь на разных площадках, Вам большое спасибо! Очень информативно и ценно, классная фишка с тем, что бы не множить кол-во классов. В целом полезно увидеть другой взгляд на картину от человека не из упомянутой школы) Продолжайте в том же духе, респект 🤝

[@WebProSchool]

@@Chupa_coach 🙏

[@truork8957]

блин макет конечно красивый но пока его делал захотел кушать(

[@user-jz4sw9zb3r]

+ мобильная вёрстка

[@dogvscatfunny9956]

очередная ерунда с навязкой подписаться .

[@Professor_CAHEK]

Ну для новичков хорошо, подробно обьясняет

[@dondragon6949]

dogvscatfunny9956 предложи лучше и без рекламы}

[@dogvscatfunny9956]

@@dondragon6949 Мне ерундой такой страдать и позориться не охота как то)

[@dondragon6949]

бесплатно нигде нет) наша плата подписка и продвижение канала) так шо для новичка это то шо треба)))!!!

[@user-rs6lw1xs6s]

Я заметил в файле css - нету префиксных вендорв - думаю что при отображение сайта на macbok - и афонах будить баги да ? . Так как некоторые свойства css не подерживаеться без префикса

[@egorrublev5529]

воды на ценый океан и маленькую речьку

[@WebProSchool]

Видео для начинающих, соответственно и разжевываю все моменты для новичков. При этом объясняю все шаги, а не лью воду. Если у вас огромный опыт за плечами,то возможно не стоит смотреть видео для начинающих.

[@user-dd1hp1ph3b]

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

[@user-vj9jb2pj3h]

ждем мобильную верстку!)

[@user-vj9jb2pj3h]

ждем мобильную верстку!)