Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи

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

КОМЕНТАРІ • 118

  • @rollim3100
    @rollim3100 Рік тому +5

    Отличный урок и не менее отличный преподаватель! Четкая дикция, без запинок, Вы молодец, спасибо за труд🙏

  • @helenag9915
    @helenag9915 3 роки тому +16

    Юрий, так подробно Вы ещё никогда не объясняли, имхо. Я нашла для себя много объяснений разных приёмов, которые Вы раньше только поверхностно затрагивали. Это счастье наконец-то понять "что к чему". Классное видео ! Спасибо за Ваш труд.

  • @meta40k
    @meta40k 3 роки тому +1

    Лысый из Вэбкадеми имеет подачу материала, которая мне безукоризненно заходит.
    Я парень простой, вижу его видео - ставлю лайк, добавляю в "смотреть позже" и не смотрю ))))

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

    наконец-то мне показывают откуда css и прочее для вёрстки

  • @GGSoft2009
    @GGSoft2009 2 роки тому +1

    Это просто рай для начинающих. Спасибо огромное!!!! Ребята не будем скупится на коммент и лаиков.

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

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

  • @_Fantom_.
    @_Fantom_. Рік тому

    Большое спасибо Юрий за отличный мастер-класс по верстке сайта! И хоть я и сам мог бы сверстать данный простой сайт, но все же благодаря вам, узнал некоторые полезные для себя моменты. Очень понравился ваш неспешный, грамотный и основательный подход к делу, с объяснением разных нюансов и мелочей, на которые мало кто обращает внимания, но которые также очень важны.

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

      Спасибо за комментарий!) Рад что МК понравился!)

  • @serjiomardavan7727
    @serjiomardavan7727 3 роки тому +4

    Как всегда приятно послушать и посмотреть

  • @nestartup
    @nestartup 3 роки тому +6

    спасибо за такое подробное видео! сейчас как раз активно изучаю верстку

  • @tatianadmitrieva6712
    @tatianadmitrieva6712 2 роки тому +2

    Юрий, спасибо большое за практику! Всё очень подробно, понятно и логично. Я совсем новичок и для меня очень важно понять закономерность и правильно выстроить верстку с самого начала. 🙏🔥💪

  • @kiot1751
    @kiot1751 2 роки тому +3

    Большое спасибо, отличное видео! Очень подробное объяснение (особенно нравится предложенные альтернативные варианты). Посмотрел пол видео, но уже часть вопросов спала относительно некоторых вещей. С адаптивным фоновым изображением + object fit были недопонимания, но теперь все ок)

  • @igorblagoy6718
    @igorblagoy6718 11 місяців тому

    02:25:04 не совсем понял,для чего нужно делать контейнер .step-img-wrapper для картинки и задавать padding-bottom 126%,если у картинки уже стояли width: 100%;
    height: auto; object-fit: cover; которые растянуть ее по контейнеру и пропорции тоже будут сохраняться при изменении размера родительского блока.

  • @tpostolova
    @tpostolova 3 роки тому +3

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

  • @МусаСабиев
    @МусаСабиев 3 місяці тому +1

    1:04 для выравнивания текста внутри кнопки по центру можно ли было вместо использования inline height использовать padding верхний и нижний со значением auto?

  • @alexey_samokhin
    @alexey_samokhin 3 роки тому +3

    Добрый вечер! Юра спасибо за урок, как всегда круто!!!
    Удачи тебе во всех твоих начинаниях)

  • @АнтонЯкубович-ъ8з

    просто космос )спасибо большое за ваш труд

  • @АлександрКильдейчик

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

  • @enterkvas
    @enterkvas 3 роки тому +3

    Юрий, большое спасибо! Не получилось опять онлайн (только чуть-чуть посмотрел), зато в записи теперь смотрю, делаю заметки, учусь "как надо". Успехов!

  • @igoryavchenko3973
    @igoryavchenko3973 3 роки тому +1

    Юрий, большое спасибо! Все доступно, и понятно, так держать!

  • @FirstnameLastname-re9ei
    @FirstnameLastname-re9ei 3 роки тому +1

    Спасибо, очень классно. Еще и макет есть. Не часто встретишь))))

  • @papasmoget
    @papasmoget 2 роки тому +1

    благодарю за урок! отличное объяснение процесса!

  • @sergejchap62
    @sergejchap62 2 роки тому

    Спасибо за практику в конкретной IDE и указание оптимального плагина-расширения

  • @SuzerenKaton
    @SuzerenKaton 3 роки тому +1

    Спасибо, за подобные видео.

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

    Нереальное видео. Большое спасибо

  • @HovhannesJeyranyan-yi7us
    @HovhannesJeyranyan-yi7us Рік тому

    Молодец друг. Все Супер !!!!

  • @СтаниславГорячев-г1ъ

    Спасибо, очень хорошо и подробно

  • @ОРАТОР-э9ю
    @ОРАТОР-э9ю 2 роки тому +1

    Какая у вас тема в VS Code? Мне она очень понравилась

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

    На 52:00 вы использовали для пространства между ссылками margin-right 70px. Почему там нельзя использовать column-gap?
    Надеюсь получу ответ🙏

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

      Так а разве column-gap не для гридов используется? Я, если честно, ни разу не видел, чтобы ссылки задавали грид-контейнерами.

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

      @@dmytroheneralov3579 для флексов тоже gap используется

  • @jiga_sb
    @jiga_sb 11 місяців тому

    добрый день можно макет figma чтобы изображение посмотреть)

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

    на счёт блока header есть пару вопросов.
    Почему кнопку Start Trial не сделать с помощью обычного padding'a? Зачем height и line-height? Вообще же какое-то извращение..
    И второе, где мы убрали space-between и jc и добавили margin-left: auto, почему нельзя было сделать просто margin-left к диву с навигацией?

  • @Voipli-567
    @Voipli-567 2 роки тому +3

    У меня play button на нажатия не реагирует. Метод play в консоли работает, но с кодом в js файле нет. Не знаете почему?

    • @WebCademy
      @WebCademy  2 роки тому

      Надо смотреть JS код, а лучше сразу проект. Ошибка может быть как в JS так и в HTML.

    • @Юрчик-л8у
      @Юрчик-л8у 10 місяців тому

      Решил проблему?

  • @ИгОрЁк-л2з
    @ИгОрЁк-л2з 2 роки тому +1

    КЛАСС! Давайте еще такое видео

  • @ЕвгенийУгланов-ш2л
    @ЕвгенийУгланов-ш2л 3 роки тому +2

    Юрий когда будешь по сложнее макеты верстать?

  • @Юрчик-л8у
    @Юрчик-л8у 10 місяців тому

    за неделю неспеша вечерами сделал,но порой то одно не так работало то другое хD .Для тех кто долго мучается что кнопка плей не воспроизводится ,смотрите на z индекс как в кнопке ,так и в оверлее что бы были прописаны .

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

      Отлично) У нас там новый стрим вышел, по верстке на Gulp, новые вершины ждут)

  • @AlexApanasik
    @AlexApanasik 2 роки тому

    Очень доходчиво! Спасибо

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

    Сложно назвать этот ролик для начинающих,а так ролик полезный без сомнений.

  • @ruslanmustafin8887
    @ruslanmustafin8887 3 роки тому

    блоку хедер лучше задавать высоту или же паддинги? Точнее как понять в какой ситуации что лучше или правильнее?

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

    Как сделать чтобы в режиме разработчика в хроме при на ведении на ссылки или ховеры сразу появлялся результат? У меня только после клика по ссылкам появляются изменения...

  • @antonromanov1347
    @antonromanov1347 2 роки тому +4

    А почему кнопке у шапки(Логин) задали высоту? Не проще было дать падинги 13px сверху и снизу и 50px по бокам?
    Она же приняла бы нужную форму как в макете

  • @AchtungBaby_87
    @AchtungBaby_87 2 роки тому +1

    Почему мы блок нижний двигаем padding top? а не margin bottom от верхнего?

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

      Там без разницы, и так и так можно

  • @Dedinside05
    @Dedinside05 3 роки тому +1

    33:07 почему не max width?

  • @АлександрАрсланов-ж7ю

    Я так и не понял, как и почему задаётся высота блока через padding bottom/top

  • @АлинаХамова-т8я

    лучший

  • @pianocovers-nickbutnar8413
    @pianocovers-nickbutnar8413 2 роки тому

    Добрый день. Сделал все как по видосу, но у класса .step-heading цифра "02" находится правее пикселей на 20 (у меня), если сравнивать с макетом. Как можно эту ошибку исправить, опираясь на код из видео? Просто если я буду изменять в .step-heading::before значение left, то будет сдвиг всех трех цифр, а все остальные цифры стоят на своих местах. Самое забавное. Заранее большое спасибо за ответ

  • @РоманДемиденко-г8с

    можно ссылку на макет? в ТГ не могу найти

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

    Не нашел макет проекта на Figma указанного в видео. Подскажите где есть пожалуйста.

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

      Зайдите по ссылке в описании под видел, найдите пост в канале за 17 окт. 2021 г. там будет ссылка на макет.

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

      Спасибо большое. Очень интересно!
      @@WebCademy

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

    Юрий подскажите пожалуйста, а посему вы картинки добавляете в html а не css ?

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

      Смотря какие. Что то можно фоном и в css прописать. В HTML обычно пишутся те картинки которые можно будет в будущем менять через CMS, опять же подразумевая что верстка после будет ставиться на движок (CMS).

  • @GloryTokarev
    @GloryTokarev 2 роки тому

    Лайк однозначно!!!!!

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

    kak skachat maket? spasibo

  • @alex_roox
    @alex_roox 3 роки тому

    Шрифты конечно, хорошо что выбрали какие надо, но по факту, вызовутся только те которые надо в браузере, потому их может быть хоть на 1 гиг, только да, место на сервере занимают )

  • @isok.atyrau
    @isok.atyrau 2 роки тому

    Здравствуйте, благодарю за урок. Программа который сделаете принт-скрин и вставляете рамки разного как называется??? по моему отличный инструмент исследование макета.

    • @natalieroonee9867
      @natalieroonee9867 2 роки тому

      это Скриншотер от Яндекс.Диска

  • @frontchanel3721
    @frontchanel3721 2 роки тому

    Привет.
    Почему у меня по умолчанию стоит крестик, а при появления меню появляется кнопка?
    не могу разобраться

  • @unique4883
    @unique4883 3 роки тому +1

    Привет, будет урок с грамотным бем неймингом? Или мне не стоит ждать? Что думаешь по поводу записи урока по теме: "написание full-stack приложения" ?

  • @asusdzumakaliev6836
    @asusdzumakaliev6836 2 роки тому

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

    • @asusdzumakaliev6836
      @asusdzumakaliev6836 2 роки тому

      а все, разобрался. Метод тыка - лучшее средство

  • @base-color
    @base-color 2 роки тому

    Юрий, здравствуйте. не является ли главным условием при использовании - это иметь в этом блоке хоть 1 заголовок ?

    • @WebCademy
      @WebCademy  2 роки тому +1

      Добрый день!) Если в теге section нет заголовка - то от валидатора будет Warning. Не ошибка Error, а предупреждение.

  • @nataliealeksandrova8047
    @nataliealeksandrova8047 2 роки тому

    Добрый день. Есть несколько вопросов:
    1)почему в адаптиве меньше 1536px не поставить падинги у контейнера по 30 px
    . Да, мы не дизайнеры, но вроде бы очевидно, что 15px маловато. Или нет? Поясните, пожалуйста.
    2) зачем мы выключаем блоки при адаптиве ? Ведь если бы мы их не выключали, мы могли бы одновременно для всех блоков проставить одинаковое уменьшение отступов между блокам, размеры текстов и заголовков, размеры кнопок. Да, мы бы шли сверху вниз по всем блокам и не один раз (для каждого разрешения), но зато у нас бы не было такого, что в каких-то местах мы уменьшаем заголовок, в каких-то нет...
    3) степсы из блока how to works прям просятся в центр..
    Возможно надо было бы изменить их ширину. А то у нас в секции продакт фотка девушки огромная на всю ширину, а степсы маленькие и сбоку.
    4) у нас в третьем степе в секции хау ту воркс элемент before ниже, чем в других степах
    П.с. я без претензий, просто хочу разобраться. Заранее спасибо.

    • @WebCademy
      @WebCademy  2 роки тому

      Добрый день.
      1) Вообще стоит исходить из дизайна. Если адаптив на усмотрение верстальщика, то он принимает решение.
      2) Такой подход более удобен. Не всегда в секциях одинаковые заголовки и другие элементы.
      3) Может быть... опять же, дизайна адаптива нет.
      4) Так понимаю у вас все вопросы по дизайну. Это уже отдельный разговор. В идеале - должен быть макет с адаптивом на который ориентируемся. Иначе все на усмотрение верстальщика.

  • @vicont9089
    @vicont9089 2 роки тому

    Юра, а что за настенное покрытие сзади Вас?

    • @WebCademy
      @WebCademy  2 роки тому

      Акустический поролон.

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

    Откуда в style sheets оказались настройки? Ничего не понятно

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

      Нет этих настроек в папке fronts (((

  • @lamersmile
    @lamersmile 2 роки тому

    Спасибо!

  • @nice_21
    @nice_21 2 роки тому

    а сколько примерно стоит верстка такой страницы

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

    Спасибо

  • @АндрейДудкин-ь7т
    @АндрейДудкин-ь7т 3 роки тому +4

    Здравствуйте. спасибо огромное за урок очень много полезных фишек узнал ) Сделайте пожалуйста видео как загрузить сайт на хостинг. Можно прям этот сайт чтоб была прям такая полная процедура от макета до загрузки на хостинг. Заранее спасибо )

    • @evgeniy8695
      @evgeniy8695 3 роки тому

      У тебя есть три способа как это сделать.
      1.через файловый менеджер хостинга
      2.через FileZilla
      3.деплой используя IDE PhpStorm или подобный

    • @АндрейДудкин-ь7т
      @АндрейДудкин-ь7т 3 роки тому

      @@evgeniy8695 хотелось бы увидеть ролик на тему загрузки сайта на хостинг

  • @ДмитрийСитников-ш2х

    Почему мы прописываем стили для кнопок через .btn, a.btn? И почему без a.btn не работает? Проверял и правда, только после указания a.btn на кнопку идут стили. Почему нельзя просто указать .btn?

    • @WebCademy
      @WebCademy  3 роки тому +1

      Потому что есть стили для ссылок по тегу и они перебивают стили по классу. Поэтому делаем селектор более специфичным a.btn { }

  • @alexpop2728
    @alexpop2728 3 роки тому

    Привет всем. После просмотра видео-урока, решил попробовать использовать атрибут data-number через псевдоэлемент ::before, на рисунке (png) и у меня ничего не получилось! Может кто подсказать что нибудь по этому поводу? Может attr(data-number) не работает с изображениями, тег img?

  • @natural_bornboogie
    @natural_bornboogie 2 роки тому

    tittle в step2 немного не по шаблону))

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

    Я не понимаю, где макеты. Начал обучение на этом канале, хороший контент и приподносят понятно. Но не могу понять, начиная с определённого момента под видео не могу найти макеты. Где макеты?!

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

      В ТГ канале t.me/joinchat/friZxyBulgNmYjE6 , ссылка на пост: t.me/c/1579074518/52

  • @Валіса
    @Валіса 7 місяців тому

    Это называется - в Москву через Ньюйорк

  • @evgeniy8695
    @evgeniy8695 3 роки тому

    А почему верхню картинку просто через background image не повесить на секцию home и через background size cover растянуть ?
    Зачем эти лишние обертки? Это все увеличивает ДОМ структуру что в свою очередь сказывается на оптимизацию сайта

    • @АндрейДудкин-ь7т
      @АндрейДудкин-ь7т 3 роки тому

      Вам дан ответ на ваш вопрос на 1ч 13м 37 секунде урока

    • @evgeniy8695
      @evgeniy8695 3 роки тому

      @@АндрейДудкин-ь7т так ее можно выводить в html через атрибут style у секции home и это прекрасно выводится в cms и не обязательно для этого создавать обертку и в неё ложить тэг img. Пока не понял для чего такой подход использует автор.

    • @АндрейДудкин-ь7т
      @АндрейДудкин-ь7т 3 роки тому

      @@evgeniy8695 возможно это более профессиональный подход

    • @evgeniy8695
      @evgeniy8695 3 роки тому

      @@АндрейДудкин-ь7т ахаха 🤣 и чем же? Тем что засоряет дом ?

    • @АндрейДудкин-ь7т
      @АндрейДудкин-ь7т 3 роки тому

      @@evgeniy8695 чем засорять? Там всего один контейнер

  • @nikitavorobyev4614
    @nikitavorobyev4614 3 роки тому

    Что за тема в VS Code установлена? найти не могу((

  • @XZxexe
    @XZxexe 2 роки тому

    Здравствуйте, не нашел ссылка на фаил reset css? не подскажите ссылку?

    • @WebCademy
      @WebCademy  2 роки тому

      webcademy.ru/blog/739/

  • @vicont9089
    @vicont9089 2 роки тому

    А где макет?

  • @evgeniy8695
    @evgeniy8695 3 роки тому

    Зачем обертки. БЭМ нейминг в помощь

  • @yuryvaskou8233
    @yuryvaskou8233 2 роки тому

    Макета нету

  • @vicont9089
    @vicont9089 2 роки тому

    Извините, нешел.

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

    автор пояснює некоректно. Спішить перед батька в пекло. Я більшу частину відео не зрозумів що він робить, все пише все навгад, фіг зрозумій його...

  • @Indi1go
    @Indi1go 3 роки тому +1

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

    • @WebCademy
      @WebCademy  3 роки тому +3

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

    • @Indi1go
      @Indi1go 3 роки тому

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

    • @WebCademy
      @WebCademy  3 роки тому +4

      @@Indi1go Это были марафоны которые проводились под запуск курса. Естественно было повторение контента, с привлечением новой аудитории. А удалялись они чтобы не захламлять канал повторением контента. Я за этим слежу и считаю это удобно когда можно открыть вкладку "Видео" и увидеть смысловые ролики по темам, а не десятки стримов с одинаковым названием. То есть делалось это также для удобства подписчиков. Есть чат в Телеграмме - можно обсуждать там.
      Но вот писать коллективную жалобу на канал на котором же и обучаешься, для меня это непостижимо. (Ах, да - обучаться у человека, а после называть его недоучителем) Еще и коллективно, это значит вы где-то координируетесь.
      То есть вместо того чтобы обучаться или зарабатывать деньги вы собираетесь в группу и думаете как бы кому-то поднасрать, и занимаетесь этим. Тут у меня опять идут двойные фейспалмы. Как выстрел себе в ногу. В принципе это поведение полностью вас характеризует.

    • @webdevparadise4452
      @webdevparadise4452 3 роки тому +4

      @@WebCademy Юрка, молодец! Хорошо обработал негатив и понятно разложил для остальных. Хейтерс гонна хейт, как говорится. Короче, едем дальше. Спасибо тебе и твоей командей за все, что вы делаете. Учился с вами, учусь сейчас по этому видео (повторяю базу), буду учиться и дальше. p.s. индинго, коллега по веб-разработке, ты чего такой злой то?)

    • @danildanil8007
      @danildanil8007 3 роки тому

      @@WebCademyнекоторые люди просто не ценят труд других

  • @AlibekUmbetaliyev
    @AlibekUmbetaliyev 3 роки тому +1

    кто может подсказать , при загрузке готового проекта на github , выходит ошибка в консоле Failed to load resource: net::ERR_FILE_NOT_FOUND styles.css:1 ?

  • @dubemashow
    @dubemashow 3 роки тому

    function Visible() {
    var Grps = app.activeDocument.layerSets; // loops through all groups
    for (var i = 0; i < Grps.length; i++) {
    var tmp = app.activeDocument.layerSets[i].layers.length;
    app.activeDocument.layerSets[i].visible = true;
    var groupChildArr = app.activeDocument.layerSets[i].layers;
    var randLays = Math.floor(Math.random() * tmp);
    groupChildArr[randLays].visible = true;
    Налаживает рандом слои на картинку ( нужно для генерации картинок)
    Подскажите, мне нужно чтобы была возможность повторения одинаковых слоев на одной картинке + генерация абсолютно ориггинальных картинок без повторения по наложении слоев.
    Это вообще можно реализовать? Информации совсем мало, прошу помощи

  • @gerylap4539
    @gerylap4539 11 місяців тому +2

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

    • @Юрчик-л8у
      @Юрчик-л8у 10 місяців тому

      ну я бекендер ,но так как выбрал веб ,вот приходится и фронт поучить

  • @ДмитрийКирюхин-ю4ю

    А где макет?