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

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ธ.ค. 2024

ความคิดเห็น • 122

  • @spicyeric9063
    @spicyeric9063 ปีที่แล้ว +32

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

    • @WebProSchool
      @WebProSchool  ปีที่แล้ว +2

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

  • @muzzzychenk0
    @muzzzychenk0 10 หลายเดือนก่อน +18

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

    • @Plombiros
      @Plombiros 9 หลายเดือนก่อน

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

  • @МёдМедовик
    @МёдМедовик 9 หลายเดือนก่อน +8

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

  • @DaryaAleshkina
    @DaryaAleshkina 22 วันที่ผ่านมา +4

    господи, сначала даже смутилась почему так много однотипных восхваляющих коментов, НО БЛИН, РЕАЛЬНО, ВЫ ПРОСТО КРУТЕЙШЕ ОБЪЯСНЯЕТЕ, ничего не упускаете, каждый момент, каждую деталь, почему так, в чем логика, это супер. Это именно то, что я ищу, будучи новичком.. Очень много полезной информации, особенно в сравнении с предыдущим челом, кот я смотрела. Да и просто приятно слушать :) Однозначно лучшее преподношение инфы, ИЗ ВСЕГО ЧТО Я ВИДЕЛА, и не только по проге. Спасибо тебе ♥ и конечно же успехов в продвижении!! Я С ТОБОЙ ДО ПОСЛЕДНЕГО ТВОЕГО ВИДЕО

    • @WebProSchool
      @WebProSchool  21 วันที่ผ่านมา +1

      @@DaryaAleshkina спасибо большое, такие комментарии мотивируют делать подобный контент дальше :)

    • @DaryaAleshkina
      @DaryaAleshkina 21 วันที่ผ่านมา

      @@WebProSchool уауауа как сразу) я редактировала, прочитай заново :))

    • @WebProSchool
      @WebProSchool  21 วันที่ผ่านมา +1

      @@DaryaAleshkina Думаю, у тебя будет получаться верстать сайты уже самостоятельно после нескольких плейлистов, если есть база теории (если что, буду рад видеть на нашем обучении).
      Ещё раз спасибо и желаю успехов в обучении)

  • @whole_lotta_redd
    @whole_lotta_redd 9 หลายเดือนก่อน +4

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

    • @WebProSchool
      @WebProSchool  9 หลายเดือนก่อน +2

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

    • @whole_lotta_redd
      @whole_lotta_redd 9 หลายเดือนก่อน +1

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

  • @fromrussia7135
    @fromrussia7135 ปีที่แล้ว +8

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

    • @WebProSchool
      @WebProSchool  ปีที่แล้ว

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

  • @ussu_01
    @ussu_01 2 หลายเดือนก่อน +3

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

  • @имяфамилия-м3й1ч
    @имяфамилия-м3й1ч ปีที่แล้ว +5

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

  • @silkfade
    @silkfade 5 หลายเดือนก่อน +9

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

  • @zartanas4177
    @zartanas4177 3 หลายเดือนก่อน +1

    Восхитительный урок! Браво! Максимально доходчиво для новичка! Все по порядку, по делу и без воды. Спасибо огромное!!!

    • @WebProSchool
      @WebProSchool  3 หลายเดือนก่อน

      @@zartanas4177 благодарю 🙏

  • @АннаНеизвестная-т9е
    @АннаНеизвестная-т9е 4 หลายเดือนก่อน +1

    Спасибо , всё очень подробно и с объяснениями . Мне как новичку такой подробный формат очень удобен. Многие непонятные моменты вы прекрасно разъяснили на примерах .

    • @JiDream
      @JiDream 4 หลายเดือนก่อน

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

  • @user-alex0306
    @user-alex0306 19 วันที่ผ่านมา +1

    Молодей.Все доходчиво.Спасибо.

  • @quiettatar
    @quiettatar 4 หลายเดือนก่อน +1

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

  • @SHAKH-br3gj
    @SHAKH-br3gj 4 หลายเดือนก่อน +2

    огромное спасибо, лучшее объяснение верстки которое я смотрел

  • @Shaman_Mashan
    @Shaman_Mashan 5 หลายเดือนก่อน +1

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

    • @WebProSchool
      @WebProSchool  5 หลายเดือนก่อน

      @@Shaman_Mashan благодарю 🙏
      Удачи в обучении)

  • @vikrinov6022
    @vikrinov6022 6 หลายเดือนก่อน +4

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

    • @WebProSchool
      @WebProSchool  6 หลายเดือนก่อน

      Благодарю 🙏

  • @TopTop-qg1oj
    @TopTop-qg1oj 9 หลายเดือนก่อน +1

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

  • @АннаСосницкая-п6к
    @АннаСосницкая-п6к 5 หลายเดือนก่อน +3

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

  • @МарияГорягина
    @МарияГорягина 4 หลายเดือนก่อน +1

    Спасибо большое Вам за видео, всё очень хорошо и понятно объяснили! ❤

  • @ДмитрийРегалов
    @ДмитрийРегалов 9 หลายเดือนก่อน

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

  • @Taranenkosemen
    @Taranenkosemen 5 หลายเดือนก่อน

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

    • @WebProSchool
      @WebProSchool  5 หลายเดือนก่อน +1

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

  • @logan_mercury
    @logan_mercury 2 หลายเดือนก่อน

    Можно ведь просто
    *{
    color: #fff;
    text-decoration: none;
    list-style: none;
    }
    И это работает для всего сразу, чем писать отдельно "а" и отдельно "ul" )
    За уроки спасибо, очень круто

    • @WebProSchool
      @WebProSchool  2 หลายเดือนก่อน

      Но ведь звёздочка выберет вообще всё на сайте, а в этом нет необходимости, тем более подчеркивание есть только у ссылки, а маркеры только у списков. Да и нумерованным спискам чаще всего нет необходимости отключать нумерацию. Поэтому не соглашусь с применением селектора звёздочки в данном случае.

  • @Middlefront
    @Middlefront ปีที่แล้ว +6

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

  • @ВиктоЕфимов-к1щ
    @ВиктоЕфимов-к1щ 9 หลายเดือนก่อน +2

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

  • @Виктор-м4й7ч
    @Виктор-м4й7ч 5 หลายเดือนก่อน

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

  • @domakook753
    @domakook753 7 หลายเดือนก่อน

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

  • @ula_uragan
    @ula_uragan 4 หลายเดือนก่อน

    Спасибо, очень полезное видео

  • @hermaeuusmora
    @hermaeuusmora 8 หลายเดือนก่อน +1

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

  • @ВероникаШутова-ф1с
    @ВероникаШутова-ф1с 7 หลายเดือนก่อน +2

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

  • @ОлесяОльховская-в9я
    @ОлесяОльховская-в9я 9 หลายเดือนก่อน +3

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

    • @GrekSS
      @GrekSS 5 หลายเดือนก่อน +1

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

    • @МаксимПерепелица-ш1э
      @МаксимПерепелица-ш1э หลายเดือนก่อน

      @@GrekSS плагин Inspect Styles

  • @medokyn
    @medokyn หลายเดือนก่อน

    Ладно ладно убедил, пойду смотреть шортсы а то кажется что я многое упускаю😂

  • @berdibekazamatov6168
    @berdibekazamatov6168 4 หลายเดือนก่อน

    Все просто круто спасибо

  • @filsam524
    @filsam524 2 หลายเดือนก่อน +1

    привет)а как расширение называется, которое после закрытых тегов дублирует название классов?А то я поначалу в этих тегах путался, что куда вложено.

    • @WebProSchool
      @WebProSchool  2 หลายเดือนก่อน +2

      @@filsam524 HTML End Tag Labels

    • @filsam524
      @filsam524 2 หลายเดือนก่อน +3

      @@WebProSchool спасибо тебе большое. Очень классно рассказываешь!

  • @АмирАбдрафиков-ы7л
    @АмирАбдрафиков-ы7л 5 หลายเดือนก่อน

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

  • @ksenimal
    @ksenimal 5 หลายเดือนก่อน +1

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

  • @ВикторКузнецов-о1ь
    @ВикторКузнецов-о1ь 3 หลายเดือนก่อน +1

    Спасибо!

  • @Abdurakhmanki
    @Abdurakhmanki 7 หลายเดือนก่อน +2

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

  • @Croopic
    @Croopic 7 หลายเดือนก่อน +1

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

    • @ghfjtyh6464
      @ghfjtyh6464 5 หลายเดือนก่อน

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

    • @ksu_ol
      @ksu_ol 4 หลายเดือนก่อน

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

  • @ЕвгенийЛобанов-ю2т
    @ЕвгенийЛобанов-ю2т 5 หลายเดือนก่อน

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

  • @karmawar
    @karmawar 6 หลายเดือนก่อน

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

  • @ВладимирТелицын-й5ш
    @ВладимирТелицын-й5ш 6 หลายเดือนก่อน

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

  • @BakdauletOmirzak
    @BakdauletOmirzak 11 วันที่ผ่านมา

    inspect теперь только в платной версии figma

    • @WebProSchool
      @WebProSchool  11 วันที่ผ่านมา

      @@BakdauletOmirzak посмотрите свежий плейлист на канале Portfolio Designer. Там показываю обходные пути.

  • @Croopic
    @Croopic 7 หลายเดือนก่อน +1

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

    • @eliaaykkk6275
      @eliaaykkk6275 6 หลายเดือนก่อน

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

    • @ВладимирТелицын-й5ш
      @ВладимирТелицын-й5ш 6 หลายเดือนก่อน

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

  • @ZulayKhadzhimuratova
    @ZulayKhadzhimuratova หลายเดือนก่อน

    Здравствуйте!! Я ни как не могу перейти по ссылкам в бот канал телеграмма где есть все материалы данного макета. Подскажите , это у меня лично проблемы или уже эта информация удалена ?? Благодарю🌺

    • @WebProSchool
      @WebProSchool  หลายเดือนก่อน

      @@ZulayKhadzhimuratova проблем нет, все материалы бот выдаёт. На каком этапе не получается? Не открывается ссылка или бот не отвечает или материалов в папке не видите?

    • @ZulayKhadzhimuratova
      @ZulayKhadzhimuratova หลายเดือนก่อน

      Не открывалась ссылка. В итоге так и не открылась, но выход я все равно нашла, нашла тг канал с фигмамакетами, нашла нужный макет и сверстала вместе с Вами! Отличный урок, все очень доходчиво, и так много важных моментов уточняете! Спасибо большое!!!👍

    • @WebProSchool
      @WebProSchool  หลายเดือนก่อน

      @@ZulayKhadzhimuratova очень странно, я сейчас проверил - все открывается. Отправьте, пожалуйста, ссылку, по которой вы пытались перейти и она не работала.
      Если что, бота в телеграме можно найти, введя @webproschool_bot

  • @olegger7436
    @olegger7436 ปีที่แล้ว

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

    • @WebProSchool
      @WebProSchool  ปีที่แล้ว

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

    • @stasalsakhanov435
      @stasalsakhanov435 ปีที่แล้ว

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

    • @miyuki5273
      @miyuki5273 10 หลายเดือนก่อน

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

    • @tortik_0162
      @tortik_0162 8 หลายเดือนก่อน

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

  • @МишаКоваленко-б3я
    @МишаКоваленко-б3я 5 หลายเดือนก่อน

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

  • @ЮрийКомпаниец-б7ш
    @ЮрийКомпаниец-б7ш ปีที่แล้ว +2

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

    • @WebProSchool
      @WebProSchool  ปีที่แล้ว

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

  • @Chupa_coach
    @Chupa_coach 5 หลายเดือนก่อน

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

    • @WebProSchool
      @WebProSchool  5 หลายเดือนก่อน

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

    • @Chupa_coach
      @Chupa_coach 5 หลายเดือนก่อน +1

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

    • @Chupa_coach
      @Chupa_coach 5 หลายเดือนก่อน

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

    • @WebProSchool
      @WebProSchool  5 หลายเดือนก่อน

      @@Chupa_coach 🙏

  • @sleepspacepiece
    @sleepspacepiece 8 หลายเดือนก่อน

    Красавчик!

  • @ValeryValodzka
    @ValeryValodzka หลายเดือนก่อน

    Что то у меня нету вкладки inspect

    • @WebProSchool
      @WebProSchool  หลายเดือนก่อน

      В данном плейлисте показываю как получать стили в обновлённой фигме
      th-cam.com/play/PLlGg_lawgIyW8MtaPFhaRS0PmTI4cL965.html
      Если вкратце, то можно:
      1. Получать стили по дизайну
      2. Копировать стили, выделяя нужный блок и нажимая на правую клавишу мыши
      3. Использовать специальный плагин
      Подробнее в плейлисте выше. Будут вопросы - пшиите в наш чат в телеграм @webproschool_chat

  • @daryapodsvetova
    @daryapodsvetova 5 หลายเดือนก่อน

    супер!

  • @tropovgabarin5001
    @tropovgabarin5001 2 หลายเดือนก่อน

    У всех 1142 px ?

  • @nadir2183
    @nadir2183 5 หลายเดือนก่อน

    какая у вас тема в вс код

    • @WebProSchool
      @WebProSchool  5 หลายเดือนก่อน

      @@nadir2183 ayu, ayu mirage

  • @musicformedidation
    @musicformedidation ปีที่แล้ว

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

    • @WebProSchool
      @WebProSchool  ปีที่แล้ว

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

  • @truork8957
    @truork8957 6 หลายเดือนก่อน +1

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

  • @user-rm5wi9tu8u
    @user-rm5wi9tu8u ปีที่แล้ว +1

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

    • @WebProSchool
      @WebProSchool  ปีที่แล้ว +2

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

  • @quiettatar
    @quiettatar 4 หลายเดือนก่อน

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

  • @BekzatMurat-u8m
    @BekzatMurat-u8m 2 หลายเดือนก่อน

    @15:26 😂😂👍

  • @DuHaPuK
    @DuHaPuK หลายเดือนก่อน

    Такой корявый дизайн - проект конечно)
    А так все хорошо по уроку)))

  • @ЖеняКураев-у2х
    @ЖеняКураев-у2х ปีที่แล้ว +2

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

  • @alexandr6427
    @alexandr6427 7 หลายเดือนก่อน

    😄

  • @BABKUSMG-mt9xl
    @BABKUSMG-mt9xl 3 หลายเดือนก่อน

    иван золо??

  • @English3minute
    @English3minute 8 วันที่ผ่านมา

    Дизлайк потому что нету ссылки от фигмы

    • @WebProSchool
      @WebProSchool  8 วันที่ผ่านมา

      Уфф, благодарю за помощь в продвижении видео данным комментарием.
      Ну а если серьёзно, то ссылки на фигму действительно нет, извините. Дизайн макета бот выдаёт в формате файла, чтобы не зависеть ни от каких ссылок. Как открыть дизайн в фигме я показываю на 2:05. Но конечно, всегда легче просто написать негативный комментарий, поставить дизлайк, чем посмотреть 2 минуты видео или написать в наш чат, где мы помогаем зрителям. Выбор, конечно, только ваш, удачи)

  • @dogvscatfunny9956
    @dogvscatfunny9956 8 หลายเดือนก่อน +6

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

    • @Professor_CAHEK
      @Professor_CAHEK 7 หลายเดือนก่อน +4

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

    • @dondragon6949
      @dondragon6949 5 หลายเดือนก่อน +1

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

    • @dogvscatfunny9956
      @dogvscatfunny9956 5 หลายเดือนก่อน

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

    • @quiettatar
      @quiettatar 4 หลายเดือนก่อน

      @@dogvscatfunny9956крутой крутой, точно не отмазка

    • @adhuard2022
      @adhuard2022 4 หลายเดือนก่อน

      Ну хз, я новичок и это действительно для новичков. Т.к смотрел до этого видео для (новичков) было много не понятного и отсутствовали подробные объяснения. В общем как по мне, то норм

  • @dondragon6949
    @dondragon6949 5 หลายเดือนก่อน

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

  • @БакирБазаркул-о8д
    @БакирБазаркул-о8д 7 หลายเดือนก่อน

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

  • @egorrublev5529
    @egorrublev5529 ปีที่แล้ว +1

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

    • @WebProSchool
      @WebProSchool  ปีที่แล้ว +3

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

    • @TolkynUssenov
      @TolkynUssenov 11 หลายเดือนก่อน +2

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

  • @Dolton-y4n
    @Dolton-y4n 2 หลายเดือนก่อน

    Товарищи подскажите ! Как писать в html код для оформления клиентом своего объявления на сайте ? Чтоб клиент указав свой предмет с характеристиками мог его выставить на сайте. Голову ломаю третий день.

    • @ЯнТонков-с4д
      @ЯнТонков-с4д หลายเดือนก่อน

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

  • @ВероникаШутова-ф1с
    @ВероникаШутова-ф1с 7 หลายเดือนก่อน

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

  • @ВероникаШутова-ф1с
    @ВероникаШутова-ф1с 7 หลายเดือนก่อน +1

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