Верстка сайта для начинающих. Подробное объяснения. Часть 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 #верстка #версткасайта #версткасайтаснуля #адаптивнаяверсткасайта #версткасайтадляначинающих #созданиесайта #каксоздатьсайт #адаптив
Пікірлер: 70
Я шокирован тем как доходчиво вы объясняете, красивой грамотной речью, приятным голосом. Вас хочется слушать. Ваш проффесионализм как верстальщика так и преподавателя вызывает уважение. Пожалуйста, продолжайте делать то, что делаете.
@WebProSchool
7 ай бұрын
Благодарю! Такие комментарии вдохновляют и мотивируют двигаться дальше. Спасибо за обратную связь :)
Много видео посмотрел по верстке, но ты действительно объясняешь доходчиво и понятно! Спасибо! Ждем больше видео теперь по языкам программирования!
верстаю уже больше года, конечно все что было в видео я знал, но именно вы помогли научиться практиковать правильно эти знания, спасибо!
@Plombiros
4 ай бұрын
И что как успехи за год?сам верстаешь уже?
спасибо за хорошее объяснение с примерами.
Хорошо объясняете, на простом языке, как раз для начинающих. Спасибо 👍
Все предельно понятно. Спасибо.
Здравствуйте! Всё просто всё подробно, спасибо.
воуууууууууууу)))это очень круто!!!куда ты пропал??что то новых роликов давно не видно
Очень доходчиво!!
Автор, благодарю тебя за обучение. Не останавливайся и не слушай хейтеров!
@WebProSchool
8 ай бұрын
Благодарю за поддержку. В ближайшее время выйдут новые видео :)
Очень хороший урок😊Спасибо огромное
Я хочу сказать тебе огромное спасибо! За твою проделанную работу, ты очень сильно помог разобраться во многих вещах очень доходчиво. Я только начал учить html и css и много каких вещей было непонятно, я буду продолжать смотреть твои видео и надеюсь , благодаря твоей работе, я смогу делать свою работу с каждым разом только лучше и легче! Ещё раз огромное спасибо!
@WebProSchool
4 ай бұрын
Благодарю за приятные слова 🙏 Удачи в обучении)
@whole_lotta_redd
4 ай бұрын
@@WebProSchool спасибо огромное!
Красавчик!
Макет взят отсюда: t.me/maket_figma 🚀 НАЧНИ ОБУЧЕНИЕ В ШКОЛЕ WEB PRO. Получить первый урок, тест и домашнее задание можно совершенно бесплатно по ссылке ниже: t.me/webproschool_bot?start=link_7P0svXUmMT
Отличное объяснение. Даже на платном курсе так не объясняют.😊
@WebProSchool
Ай бұрын
Благодарю 🙏
ты просто лучший
Максимально понятно
Спс за видео❤ просто нету нормальных видосов😅
Почему то при задании max-width для контейнера элементы начали максимально сжиматься. Я попытался разобрать твой готовый код, но так и не понял в чем была проблема. Сам же просто задал width такой же как и max-width и все заработало. Кто-нибудь может объяснить в чем была проблема?
Всё было прекрасно, только когда я услышал фразу: "Надеюсь ничего не забыл" , то вспомнил один момент который стоило бы затронуть )) Забыл назвать комбинацию клавиш для форматирования кода по код-стайлу. Лично меня этот момент сразу заинтересовал) Если кому-то нужно, то это комбинация SHIFT + OPTION + F (на Mac) / SHIFT + ALT + F (на Windows) Всем спасибо) 🙂
@WebProSchool
2 күн бұрын
@@user-zf9vz8om3j да, либо правой клавишей мыши по коду - Форматировать документ
А что делать если в зип файле содержится макет с расширением psd и его нельзя импротировать в фигму, что делать в такой ситуации?
А ссылку на макет
ждем мобильную верстку!)
а ресеты не надо подключать сразу?
В обновленной фигме не вижу вкладку инспект, где найти ее?
@GrekRND
8 күн бұрын
я так понял теперь это платная фича
Не уверен что ссылке в хеде нужен класс active, тк. скорее всего opcity: 1 выставляется псевдоклассу :hover Если конечно мы не закрепляем хедер
Я не понимаю как решить проблему:перекидываю файл макета в фигму и пишет:Importing to figma design ❌ maket Burger Landing.fig Unsupported file format. Помогите пожалуйста разобраться с этим
@ghfjtyh6464
22 күн бұрын
разобрался, как решить эту проблему?
Это семантическая вёрстка?
в обновленной фигме инспект убрали, и теперь оригинальную картинку не получается стащить, или они куда в другое место эту функцию засунули, кто знает?
@WebProSchool
Жыл бұрын
К сожалению, пока простого пути не нашёл. Можно просто фотку вытащить из фрейма и убрать обрезание с помощью crop image. Но это долго и видимо пока можно обойтись без оригинала и использовать export того контента, который представлен. Также все материалы из видео (оригиналы) можно получить в телеграме.
@stasalsakhanov435
Жыл бұрын
SHIFT + D нажми на клаве, откроется режим разработчика.
@miyuki5273
4 ай бұрын
@@stasalsakhanov435 за него надо платить ГЕНИЙ
@tortik_0162
3 ай бұрын
@@stasalsakhanov435 и ничего там не будет) Просто показывается, что есть такая то фотка, с ней ничего не сделать и нет такого, как в ролике
Мобильная верстка будет?
@WebProSchool
Жыл бұрын
Сейчас идет голосование в телеграме на этот счёт
у меня такая проблема что не получается сделать Home светлее уже 3 раза повторяю то что у вас в коде но не получается
@WebProSchool
Жыл бұрын
Продублируйте свой вопрос в чат в телеграме и прикрепите архив с версткой, я помогу t.me/webproschool_chat
Что делать если нету eCSStractor Run?
@eliaaykkk6275
28 күн бұрын
здравствуйте, нашли? а то я тоже найти не смогла
@user-dy9el8pj9o
27 күн бұрын
Добавить. В плагинах для VScode можно его найти
😄
когда вторая часть?
@WebProSchool
Жыл бұрын
Видео выходят по четвергам в 17:00 по Москве.
Не могу скачать материалы!) Требует платную подписку, что делать?
@WebProSchool
18 күн бұрын
Ни у кого не требует, у вас требует) Не вводите людей в заблуждение, пожалуйста
@Chupa_coach
17 күн бұрын
@@WebProSchool Не ввожу, разобрался, не пугайтесь так за свой проект) Всё в порядке)
@Chupa_coach
17 күн бұрын
@@WebProSchool Учусь в онлайн-школе SkillBox и параллельно подпитываюсь на разных площадках, Вам большое спасибо! Очень информативно и ценно, классная фишка с тем, что бы не множить кол-во классов. В целом полезно увидеть другой взгляд на картину от человека не из упомянутой школы) Продолжайте в том же духе, респект 🤝
@WebProSchool
17 күн бұрын
@@Chupa_coach 🙏
блин макет конечно красивый но пока его делал захотел кушать(
+ мобильная вёрстка
очередная ерунда с навязкой подписаться .
@Professor_CAHEK
2 ай бұрын
Ну для новичков хорошо, подробно обьясняет
@dondragon6949
13 күн бұрын
dogvscatfunny9956 предложи лучше и без рекламы}
@dogvscatfunny9956
13 күн бұрын
@@dondragon6949 Мне ерундой такой страдать и позориться не охота как то)
бесплатно нигде нет) наша плата подписка и продвижение канала) так шо для новичка это то шо треба)))!!!
Я заметил в файле css - нету префиксных вендорв - думаю что при отображение сайта на macbok - и афонах будить баги да ? . Так как некоторые свойства css не подерживаеться без префикса
воды на ценый океан и маленькую речьку
@WebProSchool
9 ай бұрын
Видео для начинающих, соответственно и разжевываю все моменты для новичков. При этом объясняю все шаги, а не лью воду. Если у вас огромный опыт за плечами,то возможно не стоит смотреть видео для начинающих.
@user-dd1hp1ph3b
6 ай бұрын
все класс юһдоходчиво обьясняете, для новеньких самое-то, спасибо большре за ваш труд @@WebProSchool
ждем мобильную верстку!)
ждем мобильную верстку!)