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

Рет қаралды 17,804

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

Пікірлер: 46

@spicyeric9063 6 ай бұрын

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

@WebProSchool 6 ай бұрын

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

@muzzzychenk0 3 ай бұрын

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

@Plombiros 3 ай бұрын

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

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

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

@user-iw7mj1ci5e 10 ай бұрын

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

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

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

@domakook753 Ай бұрын

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

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

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

@TopTop-qg1oj 2 ай бұрын

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

@fromrussia7135 7 ай бұрын

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

@WebProSchool 7 ай бұрын

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

@sleepspacepiece Ай бұрын

Красавчик!

@whole_lotta_redd 3 ай бұрын

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

@WebProSchool 3 ай бұрын

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

@whole_lotta_redd 2 ай бұрын

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

@Middlefront 11 ай бұрын

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

@user-vj9jb2pj3h 26 күн бұрын

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

@nonemeboabs 2 ай бұрын

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

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

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

@user-xl2fx5wi7s Ай бұрын

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

@WebProSchool 11 ай бұрын

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

@Abdurakhmanki 18 күн бұрын

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

@user-xl2fx5wi7s Ай бұрын

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

@truork8957 Күн бұрын

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

@alexandr6427 10 күн бұрын

😄

@olegger7436 11 ай бұрын

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

@WebProSchool 11 ай бұрын

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

@stasalsakhanov435 10 ай бұрын

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

@miyuki5273 3 ай бұрын

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

@tortik_0162 Ай бұрын

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

@musicformedidation 11 ай бұрын

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

@WebProSchool 11 ай бұрын

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

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

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

@WebProSchool 11 ай бұрын

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

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

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

@WebProSchool 11 ай бұрын

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

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

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

@dogvscatfunny9956 Ай бұрын

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

@Professor_CAHEK Ай бұрын

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

@user-rs6lw1xs6s Ай бұрын

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

@egorrublev5529 8 ай бұрын

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

@WebProSchool 8 ай бұрын

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

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

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

@user-vj9jb2pj3h 26 күн бұрын

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

@user-vj9jb2pj3h 26 күн бұрын

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