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

Поділитися
Вставка
  • Опубліковано 20 вер 2024

КОМЕНТАРІ • 91

  • @zartanas4177
    @zartanas4177 День тому +1

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

    • @WebProSchool
      @WebProSchool  День тому

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

  • @silkfade
    @silkfade 2 місяці тому +6

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

  • @spicyeric9063
    @spicyeric9063 9 місяців тому +17

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

    • @WebProSchool
      @WebProSchool  9 місяців тому

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

  • @muzzzychenk0
    @muzzzychenk0 7 місяців тому +11

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

    • @Plombiros
      @Plombiros 6 місяців тому

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

  • @МёдМедовик
    @МёдМедовик 6 місяців тому +4

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

  • @fromrussia7135
    @fromrussia7135 10 місяців тому +5

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

    • @WebProSchool
      @WebProSchool  10 місяців тому

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

  • @user-iw7mj1ci5e
    @user-iw7mj1ci5e Рік тому +4

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

  • @quiettatar
    @quiettatar Місяць тому +1

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

  • @SHAKH-br3gj
    @SHAKH-br3gj Місяць тому +2

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

  • @vikrinov6022
    @vikrinov6022 3 місяці тому +4

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

  • @АннаНеизвестная-т9е

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

    • @JiDream
      @JiDream Місяць тому

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

  • @whole_lotta_redd
    @whole_lotta_redd 6 місяців тому +2

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

    • @WebProSchool
      @WebProSchool  6 місяців тому +2

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

    • @whole_lotta_redd
      @whole_lotta_redd 6 місяців тому +1

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

  • @АннаСосницкая-п6к
    @АннаСосницкая-п6к 2 місяці тому +2

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

  • @МарияГорягина
    @МарияГорягина Місяць тому +1

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

  • @Shaman_Mashan
    @Shaman_Mashan 2 місяці тому

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

    • @WebProSchool
      @WebProSchool  2 місяці тому

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

  • @ВикторКузнецов-о1ь
    @ВикторКузнецов-о1ь 14 днів тому +1

    Спасибо!

  • @Middlefront
    @Middlefront Рік тому +6

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

  • @ТараненкоСемен
    @ТараненкоСемен 2 місяці тому

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

    • @WebProSchool
      @WebProSchool  2 місяці тому +1

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

  • @domakook753
    @domakook753 4 місяці тому

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

  • @Виктор-м4й7ч
    @Виктор-м4й7ч 2 місяці тому

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

  • @TopTop-qg1oj
    @TopTop-qg1oj 6 місяців тому +1

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

  • @ВиктоЕфимов-к1щ
    @ВиктоЕфимов-к1щ 6 місяців тому +2

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

  • @ДмитрийРегалов
    @ДмитрийРегалов 6 місяців тому

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

  • @ВероникаШутова-ф1с
    @ВероникаШутова-ф1с 4 місяці тому +2

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

  • @ula_uragan
    @ula_uragan Місяць тому

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

  • @berdibekazamatov6168
    @berdibekazamatov6168 Місяць тому

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

  • @АмирАбдрафиков-ы7л
    @АмирАбдрафиков-ы7л 2 місяці тому

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

  • @karmawar
    @karmawar 3 місяці тому

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

  • @daryapodsvetova
    @daryapodsvetova 2 місяці тому

    супер!

  • @sleepspacepiece
    @sleepspacepiece 5 місяців тому

    Красавчик!

  • @WebProSchool
    @WebProSchool  Рік тому +1

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

  • @nonemeboabs
    @nonemeboabs 5 місяців тому +1

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

  • @truork8957
    @truork8957 3 місяці тому +1

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

  • @ВладимирТелицын-й5ш
    @ВладимирТелицын-й5ш 3 місяці тому

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

  • @ОлесяОльховская-в9я
    @ОлесяОльховская-в9я 6 місяців тому +3

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

    • @GrekSS
      @GrekSS 2 місяці тому +1

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

  • @quiettatar
    @quiettatar Місяць тому

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

  • @ЕвгенийЛобанов-ю2т
    @ЕвгенийЛобанов-ю2т 2 місяці тому

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

  • @Croopic
    @Croopic 4 місяці тому +1

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

    • @ghfjtyh6464
      @ghfjtyh6464 2 місяці тому

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

    • @ksu_ol
      @ksu_ol Місяць тому

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

  • @Abdurakhmanki
    @Abdurakhmanki 4 місяці тому +2

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

  • @ksenimal
    @ksenimal 2 місяці тому

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

  • @ЮрийКомпаниец-б7ш

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

    • @WebProSchool
      @WebProSchool  Рік тому

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

  • @user-jz4sw9zb3r
    @user-jz4sw9zb3r Рік тому +2

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

  • @МишаКоваленко-б3я
    @МишаКоваленко-б3я 2 місяці тому

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

  • @alexandr6427
    @alexandr6427 4 місяці тому

    😄

  • @Croopic
    @Croopic 4 місяці тому +1

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

    • @eliaaykkk6275
      @eliaaykkk6275 3 місяці тому

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

    • @ВладимирТелицын-й5ш
      @ВладимирТелицын-й5ш 3 місяці тому

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

  • @dondragon6949
    @dondragon6949 2 місяці тому

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

  • @BABKUSMG-mt9xl
    @BABKUSMG-mt9xl 14 днів тому

    иван золо??

  • @user-rm5wi9tu8u
    @user-rm5wi9tu8u Рік тому +1

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

    • @WebProSchool
      @WebProSchool  Рік тому +2

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

  • @Chupa_coach
    @Chupa_coach 2 місяці тому

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

    • @WebProSchool
      @WebProSchool  2 місяці тому

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

    • @Chupa_coach
      @Chupa_coach 2 місяці тому +1

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

    • @Chupa_coach
      @Chupa_coach 2 місяці тому

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

    • @WebProSchool
      @WebProSchool  2 місяці тому

      @@Chupa_coach 🙏

  • @musicformedidation
    @musicformedidation Рік тому

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

    • @WebProSchool
      @WebProSchool  Рік тому

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

  • @olegger7436
    @olegger7436 Рік тому

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

    • @WebProSchool
      @WebProSchool  Рік тому

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

    • @stasalsakhanov435
      @stasalsakhanov435 Рік тому

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

    • @miyuki5273
      @miyuki5273 7 місяців тому

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

    • @tortik_0162
      @tortik_0162 5 місяців тому

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

  • @nadir2183
    @nadir2183 2 місяці тому

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

  • @dogvscatfunny9956
    @dogvscatfunny9956 5 місяців тому +7

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

    • @Professor_CAHEK
      @Professor_CAHEK 4 місяці тому +3

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

    • @dondragon6949
      @dondragon6949 2 місяці тому +1

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

    • @dogvscatfunny9956
      @dogvscatfunny9956 2 місяці тому

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

    • @quiettatar
      @quiettatar Місяць тому

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

    • @adhuard2022
      @adhuard2022 Місяць тому

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

  • @user-rs6lw1xs6s
    @user-rs6lw1xs6s 5 місяців тому

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

  • @egorrublev5529
    @egorrublev5529 11 місяців тому +1

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

    • @WebProSchool
      @WebProSchool  11 місяців тому +3

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

    • @TolkynUssenov
      @TolkynUssenov 8 місяців тому +2

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

  • @ВероникаШутова-ф1с
    @ВероникаШутова-ф1с 4 місяці тому +1

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

  • @ВероникаШутова-ф1с
    @ВероникаШутова-ф1с 4 місяці тому

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