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

Вёрстка сайта Burger Landing из Figma с самого нуля с очень подробными объяснениями каждого действия. Данный макет подойдёт для новичков. Верстка сайта позволит нам попрактиковать знания html, css, бэм, адаптив, а также положить такой прекрасный макет в портфолио.

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

Ссылки на вёрстку других макетов на канале:
📱Ссылка на плейлист верстки макета NoTab на Flexbox:
🍏 Верстка макета Organic Juicy на Grid:
✅ Верстка макета Velocity на Flexbox:
👨‍💻 Мой список плагинов и расширений для редактора кода VS Code:

Ищи школу WEB PRO в соц. сетях:

Таймкоды:
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 #верстка #версткасайта #версткасайтаснуля #адаптивнаяверсткасайта #версткасайтадляначинающих #созданиесайта #каксоздатьсайт #адаптив

[silkfade]

Я рил в шоке, как вы понятно всё рассказываете и объясняете :)

[spicyeric]

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

[Shaman_Mashan]

Спасибо за эти уроки!! Очень понятно и приятно объясняете) Желаю огромной удачи в продвижении канала!!

[xnndfqt]

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

[muzzzychenk]

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

[iwmjcie]

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

[quiettatar]

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

[fromrussia]

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

[domakook]

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

[zfvzomj]

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

Забыл назвать комбинацию клавиш для форматирования кода по код-стайлу. 
Лично меня этот момент сразу заинтересовал)

Если кому-то нужно, то это комбинация  SHIFT + OPTION + F (на Mac) / SHIFT + ALT + F (на Windows)

Всем спасибо) 🙂

[vikrinov]

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

[TopTop-qgoj]

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

[whole_lotta_redd]

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

[WebProSchool]

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

[jwsreyd]

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

[Middlefront]

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

[truork]

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

[nonemeboabs]

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

[wbvshgk]

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

[quiettatar]

давай мобильную верстку по этому макету