Адаптивная верстка сайта с SCSS и JS. Объясняю по шагам. CSS Grid, БЭМ. Макет LoftHouse

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

КОМЕНТАРІ • 165

  • @KonstantinValov
    @KonstantinValov 7 місяців тому +1

    Добрый день!). Выполнил всë по видео не торопясь за 12+ часов.
    Получил кучу опыта и закрепил знания с Вашего курса по вëрстке. Спасибо за видео!).
    Очень понравилось, что в проекте 1 точка перелома для адаптации, а так же полный курс работы с Яндекс картой + работа с grid.
    Огромное спасибо!!!

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

    Прекрасный дизайн, очень подробное объяснение, спокойный голос и качественный микрофон. Делал сайты с CSS, теперь узнал про SCSS, миксины, как карту прикрепить и стилизовать. Поставил два лайка (с двух аккаунтов)

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

      Спасибо за комментарий!)

  • @User_1992_rus
    @User_1992_rus Рік тому +20

    Приятно наблюдать как Вы, Юрий, развиваетесь как преподаватель) Новый формат, я уверен, людям зайдет! 👍 Спасибо за новую порцию мотивации🙌

  • @НиколайВязьмин-с8я

    @WebCademy, Спасибо за отличный урок . Макет классный. Фичи отличные. Сделать получилось. Как пожелание на будущее покажи js lightbox, JS маска для номера телефона на gulp как их подключать и т.д.. И уроки scss нужны на канал про миксины и т.д некий обзор с примерами показать зачем они нужны + в каких вариантах их стоит прописывать. Коллегам и друзьям данное видео и школу буду рекомендовать и т.д.

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

    Спасибо Юрий за видео! Всё отлично получилось, работал на локальном сервере Open Server Panel - 6, новая версия. Макет, материалы и готовый код нашёл. Получил огромный опыт с Вашего видео курса. С уважением Ахмад

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

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

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

    Спасибо за урок! Очень много взяла для себя нового)

  • @ВасилийБ-л2т
    @ВасилийБ-л2т Рік тому +4

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

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

    Огромнейшее спасибо за такое видео! Всё очень полезно. Я первый раз работала с scss, настроила только в Вебшторме, уж очень мне полюбился, пришлось попыхтеть, но на будущее явно это пригодится. Очень ценно, что делитесь такими полезностями, как маска для телефонных номеров, вы просто экономите кучу времени тем, кому это пригодится. Миксины - вещь, очень удобно.
    Сначала подключала скрипты в head через defer, но потом пошло что-то не так и видео открывалось не так)), ну что жжжж, пришлось подключить в конце боди, не получилось повыделываться). Ещё очень красивый макет, прям зашёл, захотелось всем показать потом готовую страничку 😁.
    Просто вау, что показали как подключить карту.
    Ваш контент замечательный. Я столько времени пыталась найти толковое видео по вёрстке с фичами, а тут вы, совпало всё: и макет красивый, и видео на странице, и карта, и анимации изображений. Столько всего полезного, спасибо вам огромное за качественный контент!

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

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

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

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

  • @АндрейЗак
    @АндрейЗак 10 місяців тому

    как всегда много нового и интересного, простыми словами и на наглядном примере)) спасибо за видео

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

    Спасибо за видео-уроки!

  • @Jazeera-ej3jo
    @Jazeera-ej3jo 10 місяців тому

    Спасибо за ваш труд!

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

    Очень классный формат, великолепно!

  • @prgtmb
    @prgtmb Рік тому +4

    Уже чувствую,что будет великолепно)

  • @ВладаВирыч
    @ВладаВирыч Рік тому +2

    Благодарю вас Юрий за ваш труд! Контент на отлично!

  • @ВладиславПисаревский-л8щ

    Очень жду новых уроков от вас. Все понятно, легко учиться и запоминается на ваших примерах. P.S. Я сейчас нарабатываю практику и искал что-то с SCSS, и наткнулся на это видео. Именно с него я начал знакомство с данным каналом. После верстки этого макета, я нашел запись годичной давности в трансляциях, где также использовался SCSS. Было немного неудобно делать его, потому что, ссылаясь на комментарий внизу, уровень преподавания кардинально отличается. В этом видео я впитывал информацию о том, как нужно верстать. В видео годичной давности я сам хотел подсказывать вам в некоторых моментах, опираясь на знания, полученные из этого ролика. Очень жду новых сложных версток с использованием разных тонкостей. Спасибо вам большое!

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

      Спасибо за комментарий, сейчас как раз вышло видео с версткой на Gulp и стрим также по верстке на Gulp сборке.

  • @ИринаФедченко-ъ2з

    ❤❤❤какой красивый сайт❤

  • @Anatoli-bq1pe
    @Anatoli-bq1pe Рік тому +1

    Обязательно надо сверстать! У Юрия реально дар преподавать Frontend)

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

    Согласен, крутые уроки!

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

    Всем привет! Отлично, применение SCSS, Grid и Flexbox, JS 👍

  • @ale.y.logenough
    @ale.y.logenough Рік тому +1

    Супер!

  • @ДенисШаповалов-в9о

    Добрый день. Спасибо за отличный контент! Было бы здорово, если бы сделали подробный урок по валидации и отправке форм. Особенно на примере с маской для международных телефонов.

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

    Спасибо за видео)

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

    Спасибо за видео, очень помогает!

  • @ГлебЗемляникин-ш6н

    Видос огонь 🔥🔥🔥

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

    спасибо за урок

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

    Как всегда чётко и без воды!!

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

    Вааааааааааааааааааааааааааааааааааааааааааау!!!!!!!!!!!!!!!!!!!!!!!!

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

    Заметил такой момент: при перестроении карточек в apartments на разрешении менее 640px карточки не встают по центру. Думаю, нужно добавить изначально в .card: {margin: 0 auto}; Тогда все смотрится как надо по центру!

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

    Спасибо, очень интересно и макет подобрали отличный!

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

    Спасибо Юрий! Отличное видео но я не нашёл - Макет, материалы и готовый код. С уважением Ахмад

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

      Ахмад, добрый день.
      1) Заходите в ТГ канал t.me/+9XtDDNBdHAk4Yjhi
      2) Находите пост за 6 мая 2023 г. t.me/c/1579074518/144

  • @Patrick-ly9wt
    @Patrick-ly9wt Рік тому

    3:43
    у меня получилось только так поставить по центру мобаил меню:/
    .header__top-row--mobile {
    position: fixed;
    background-color: black;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items:center;
    }

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

    вауу💙💙💙

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

    Ждёмсс

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

    Я ещё только,учусь прохожу уроки по портфолио))

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

    Круто! Хочу хочу хочу😊

  • @ЮлияМартинюк-м5м

    Добрый день! Можете ли сделать пример с подключением Google карти?

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

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

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

      в век высокоскоростного интернета, самое то говорить про оптимизацию подзагрузки, ога

  • @user-frond-end_dev
    @user-frond-end_dev Рік тому

    классный контент, я просто в восторге, а будет продолжение?- как сделать этот сайт под CMS Word Press?

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

      Не планирую. WordPess проходим на курсе по верстке webcademy.ru/htmlstart/

  • @АндрейЗамелюк-с8ь

    Здравствуйте! Очень понятно объясняете! Помогите, пожалуйста, столкнулась с такой проблемой, как установить плагин font fascia в новой версии 2023? Макет открывается без виджетов(где был значок плагины) и в dev mode нет его. В панеле plugins предлагает из community загрузить. Загружаю, а он открывается в пустом новом окне..Как быть?

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

    Юрий, спасибо! Отличный материал!
    В большинстве случаев обучаюсь по вашем видео!
    Возникла проблема, не срабатывает плагин phone mask, не могу разобраться.....

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

      Надо смотреть код, подключили ли файл плагина и файл с масками. Как запускаете.

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

    Как сделать чтобы информация с формы приходила на почту?

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

    Спасибо! Где находится Макет, материалы и готовый код? С уважением к Вам Ахмад

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

    Го видос на тему CSS масок! В ютубе нет нормального современного видео на эту тему.

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

    Не могу найти дизайн фигмы в телеграмм группе😢

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

    У меня почему-то _base _vars _reset не хотят подключаться.... Перенес код в main и все заработало...

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

    hello sir, I followed your all videos. can you give us a link to that Figma file thanks.

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

    Еще не посмотрел до конца, немного позже, подскажите а полноценная админ панель будет, где хозяин сайта будет сам добавлять и менять информацию на сайт, отслеживать регистрацию пользователей , минуя код. Это принципиально важная часть для любого заказчика. Никто кроме дизайнера верстальщика не сможет самостоятельно изменять код и внешний вид

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

      В этом видео только верстка.

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

    3:17:10

  • @КеримКерим-ы8е
    @КеримКерим-ы8е 5 місяців тому

    Я когда указываю эти координаты у меня Иран выходит ) как так не могу понять

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

    ждем!

  • @srm-soulrelaxingmusic6486
    @srm-soulrelaxingmusic6486 Місяць тому

    "savePath": "~/../css/"
    ошибка в настройках SASS, на винде 10

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

    не так у меня работает auto-fit как на 4.04.53 минуте, при уменьшении экрана уменьшает только до 2 колонок и уходит за экран и появляется скролл по X, а не уменьшает автоматически потом до одной колонки.

  • @РоманЧудосейкин
    @РоманЧудосейкин 5 місяців тому

    как плагины подключить? нет такой кнопки как на видео.

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

    Не могу найти макет в телеге. От 6 Мая 2023 его нет

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

    Все супер, но почему то к меня lighxbox совсем не работает. Я даже скачал и открыл ваш проект, но все равно lighxbox не работает. Как вы думайте, в чем проблема. Error "linksBtnsSelector" is redeclared вот такая ошибка вылетала

  • @servera-center
    @servera-center Рік тому

    Как в figma теперь поставить плагин?

  • @ИгорьКим-о6и
    @ИгорьКим-о6и Рік тому

    подскажите как найти сылку по Иконка моб навигации

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

    выдает ошибку undefined mixin в коде( и даже в готовом коде из материала к уроку). как фиксить?

  • @ОльгаСергеевна-ф7е
    @ОльгаСергеевна-ф7е 4 місяці тому

    ну и где искать доп.урок по scss? если уже упоминаете о нем в видео, можно наверное и ссылку предоставить, а не накручивать просмотры других видео)))

  • @СергейБабанов-г7и
    @СергейБабанов-г7и 9 місяців тому

    в скачаном архиве где готовый код проекта нет макета, нет картинок, есть только код. И что же делать?

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

    phone mask js плагин который в коде урока есть в интернете? Не могу найти

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

      Возьмите из архива. В сети есть но ссылки под рукой нет.

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

    С шрифтами заминка. Гугл фонс по известеым причинам не даёт русские шрифты. Что делать? Пожалуйста научите.

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

    Юрий, смотрел ваше видео касаемо тем для vscode раза три, но не могу понять, какая у вас задействована в этом видео.
    У palenight шрифт слишком яркий, у material нет затемнения на боковые панели (кроме режима высокого контраста, но он тоже по-другому выглядит).
    Подскажите, пожалуйста.

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

      Вроде плагин ayu

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

    1:14:24 - я вижу стили для IE6/IE7. Вопрос: зачем? Если уже IE не открывается, а вместо него запускается EDGE?

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

      И можно пожалуйста пояснения почему просто не применить display: none?

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

      Это заготовка под класс visually-hidden. В принципе можете удалить код для IE.

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

      @@StarkElessar Если сделать display: none; то этот текст будет недоступен для скринридеров и ПС, а ради них это все и затевалось. Добавить семантики, чтобы элемент формально был на странице, но был скрыт визуально.

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

      @@WebCademy спасибо, а если например делать vissability: hiden, и position: absolute - чтобы вырвать из потока?

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

      @@StarkElessar Такой подход тоже есть. То есть absolute для этого тоже используют.

  • @МадинаАлиева-ы2ф
    @МадинаАлиева-ы2ф 7 місяців тому

    Подскажите пожалуйста, как связать ссылки с мобильного меню с определенными секциями сайта?

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

      Через # ссылаться на ID секции.

  • @Книжныйнерв
    @Книжныйнерв Рік тому

    ❤️🔥

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

    Почему у меня свг файлы сразу на весь экран а не как на аидео маленькие?😢

  • @Chelovek-m4u
    @Chelovek-m4u 10 місяців тому

    Скажите пожалуйста, как добавить api яндекс карт в проект на вебпаке? Ничего не получается, даже с документацией...

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

      По идее, так же. Смотрите на ошибки в консоли.

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

    Если у меня есть другой проект в GULP, где SCSS компилируется в CSS, после установки данного плагина и работы над проектом в галпе, не сломается ли структура CSS файлов ?

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

      Не понял о каком плагине идет речь. Если о Live SASS Compiler, то при работе с gulp сборкой он вам не нужен, не включайте его.

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

      Хорошо. И кстати, при работе с переменными, переменные не определяются в других scss файлах(@@WebCademy

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

    Здравствуйте, возник вопрос, у вас в процессе верстки получилось большое количество scss файлов, это безусловно удобно, но не повлияет ли это на загрузку сайта, не станет ли он из-за этого долго загружаться у пользователей?
    Я только учусь, поэтому подскажите, пожалуйста

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

      Никак не влияет, потому как мы собираем их в один CSS файл, и на сайте загружается один CSS файл.

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

    жаль вы миксинами не пользуетесь, можно было бы не писать такую усложненную иерархию))

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

    Подскажите , а что у вас за тема стоит в vsc

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

    На этапе адаптива никак не скрывается изначально кнопка nav-btn.... Display: none никак не работает! Что это может быть? Все делаю по вашим шагам.

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

      Проверьте готовый код из урока со своим, где-то допустили ошибку или написали не так как в уроке.

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

      @@WebCademy Банально завис sass compiler, убил 3 часа на поиск ошибки... все ок... случайно зашел в main.css а там трети кода нет! перезапустил sass compiler - все заработало. Знать бы все такие подвохи ))

  • @Lana-mu1qt
    @Lana-mu1qt Рік тому

    А это только мне плохо видно код?

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

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

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

      Какой-то элемент выходит за пределы ширины экрана и этим провоцирует создание горизонтального скролла.

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

      @@WebCademy это скорее всего те элементы декора) которые делал , они же там на половину выходят за контейнер

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

      @@WebCademy решил проблему тем что заново начал делать но по своему я хз почему так вышло

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

      кста тут на видео такая же проблема что и у меня была 30:20:36 у вас так же)

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

      ​@@paveltryhan4245 Да, если это элементы декора то к секциям в которых они лежат надо добавить overflow-x: hidden;

  • @СерханЗохрабов

    Уберите пожалуйста view only на проекте а то невозможно скачать фотографию без градиента

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

      Дублируйте проект себе в черновики, и сможете полностью его редактировать. Если сниму view only - кто угодно сможет внести правки.

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

    Материал для несколько подготовленных пользователей. "Скопировали код с моего блога....... " Нисколько не сомневаюсь в талантах и навыках автора, но сюда мне ещё рано :(

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

    У меня теперь только один вопрос: на хостинг выкладывать все scss файлы или только css?

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

      Только CSS. SCSS можете залить для истории для себя или другого разработчика - кто будет поддерживать проект)

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

    а запись будет сохранена?

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

      Да, видео останется на канале.

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

    как в фигме загрузить сырую фотку в шапке без обработки?

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

      Закиньте картинку и скопируйте на неё стили заливки подобно тем что есть у текущей картинки в шапке.

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

      ​@@WebCademyя просто обработанную скачал и получается два раза использовал этот эффект. А что делать если боксы не разделяются на три части, а также остаются слипшимися после этих манипуляций 41:23?

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

      @@kolobok1547 Тогда скачайте не обработанную. При экспорте отключите эффект градиента в блоке Fill и другие если они присутствуют.

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

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

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

      Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute вот это чудо при любых попытках подключить api других ошибок нет

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

      как решили проблему?

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

      @@saivengo вообщем вбил в гугл запрос "яндекс карты". Нашел первый попавшийся сайт где карта реально работает. Скопировал код через панель разработчика. Вставил в свой макет. По другому никак не получалось. Час времени потерял пытаясь перебороть проблему.
      Попутно узнал, что то что я написал на английском это не связано с картами, а просто предупреждение. Не стал разбираться, что и зачем. Перепсиховал малехо
      Самое отвратительное когда сядешь в хорошем настроение че нить по учить или покодить и сразу какая нибудь проблема
      И сидишь как дурак пытаешься побыстрее ее решить, а настроение гаснет....

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

      @@i1nostranec332 у меня тоже эта ошибка, почитала, что проблема с cookie, надо вставить атрибут SameSite=None and Secure, но не могу разобраться, куда его вставлять(

  • @Edgar-pu1lc
    @Edgar-pu1lc Рік тому

    Дайте название темы в Vscode

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

      Palenight (Mild Contrast)

  • @КаринаЧ-н5е
    @КаринаЧ-н5е Рік тому

    Почему нельзя здесь оставить нормальную ссылку на макет? Уйму времени потратила, в итоге так и не нашла. Нигде.

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

      Ссылка на пост в блоге со всеми материалами и макетом: webcademy.ru/blog/994/

    • @КаринаЧ-н5е
      @КаринаЧ-н5е Рік тому

      @@WebCademy Благодарю, всё нашла, всё открылось.

    • @КаринаЧ-н5е
      @КаринаЧ-н5е Рік тому

      @@WebCademy Юрий, я делаю всё как Вы. Но у меня cscc не коннектится с css. Получается, если только всё сразу в css писать. Но тогда пропадает суть урока. Ещё срабатывает, если подключить cscc/main.css, а не scc/main.css как у Вас . Почему так у меня?

  • @АлмасСаргаскаев-е7ц

    Где можно взять макет ?

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

      В описании к видео ссылка на макет и код

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

    запись будет сохранена?

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

      Да, видео останется на канале.

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

    По факту получилось так, что процесс работы верстальщика занимает 95% процентов потраченного времени, а остальные 5 процентов уже дело за фронтенд- разработчиком, потому что идёт просто вставка уже готового кода + небольшая настройка.
    Так с какого зарплата у первого меньше, чем у второго???

    • @ДмитрийНормов-ю6ц
      @ДмитрийНормов-ю6ц Рік тому +1

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

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

      не дружище! если верстка на уверенном уровне - то это верхушка айсберга! если сайт имеет логику, много джаваскрипт кода, будь какой то сервис и ит...то верстка это 5%! остальное это работа с js и его фреймворками!

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

      по сути это сложный сайт для новичков, но очень легкий для опытных. Тем более когда все настроено. Выкиньте из видео объяснение настроек и прочее и оно уменьшится на половину.
      Далее - любой сайт это не одна страница, а множество. Сверстав одну страницу ты можешь половину кода вставлять в следующие, меняя только нужные блоки.
      В js же нужно подключить кучу скриптов для более менее рабочего сайта. Туда же базу данных, всякие счетчики и прочее прочее.
      В общем там далеко не все так просто как на видео.
      Но есть одно но, в реально больших проектах дико не хватает full верстальщиков, которые могут незнать js досконально, но при этом верстают как боги. Такие спецы получают больше frontend, но и знать CSS и Html там надо до последней буквы. Плюс знать JS что бы верстать совместимый сайт

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

    Не вижу целесообразности учить использовать Mixin как Placeholder, лучше было бы сразу объяснить как правильно

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

      Не понял о каком миксине идет речь.

  • @ЯрославШилов-в8ж

    Дружище! Честное слово приятно наблюдать за твоей работой! НО Сорри, ты так много гиперссылок даешь на другие твои уроки, что блуждая по ним, я так запутался((((((. Я так и не смог пройти ни один твой урок более чем на 10%. Мож конечно я по пояс деревянный? Но как то с другими все сростается. Не в обиду пусть это прозвучит. Но факт. Идеи уроков интересные. Но для меня лично, куча потраченого времени в пустую. В частности настройка плагина Live Sass Compiler. Не проще ли, повторить минуту, либо не нагружать лишними гиперссылками и сосредочиться на основной цели. Еще раз извиняюсь, если покажусь резким. Думаю что критика не плохая вещь.

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

      Норм, спасибо за обратную связь. Возможно стоит повторить установку в уроке. В след раз так и сделаю.
      С другой стороны не хотелось растягивать время, для тех у кого все уже настроено.

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

    Кто уже фронтэндерит за деньги?

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

      Пока что бесплатно делаю)

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

      Я делаю пока что плачу

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

      @@alexhitch9326 что платишь?

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

      Бэкэндерю

    • @анапа-вата
      @анапа-вата 7 місяців тому +1

      Выучил вёрстку нужен js
      Выучил js
      Нужен typescript
      Выучил его нужен nod js
      Выучил его нужен Битрикс 24
      Выучил его ужны другие библиотеки js плюнул нахуй и ушел на завод

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

    Слишком много говоришь, затягиваешь видео

  • @МашаБукина-в1ц
    @МашаБукина-в1ц Рік тому +1

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

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

      Тут все для детей буквально 😂
      Показали как установить scss, live server и т.д. Потом показали структуру проекта.
      Если для тебя даже такое вызывает проблемы, то для тебе плохие новости...

    • @МашаБукина-в1ц
      @МашаБукина-в1ц Рік тому

      @@evdokia2342 видимо это у тебя проблемы, а то что мне надо я и так хорошо знаю, без этого бреда.

  • @mikhaildevichensky6407
    @mikhaildevichensky6407 7 місяців тому +1

    Худший препод на ютубе ...Не знаю, может он только за деньги что то объясняет, что к чему и почему . Видео 5 часов просто "вот так я верстаю". Начал, нужно довести дело до конца. Не попадитесь на 5ти часовую ловушку .

    • @WebCademy
      @WebCademy  7 місяців тому +1

      Прям худший? Вы список составили, там наверно около сотни авторов, и я прям худший? За слова отвечаете?
      Макет и урок не для новичков.
      Посмотрите урок более начального уровня: ua-cam.com/video/PoJaRi7Ug7Q/v-deo.html
      Или может вам стоит начать с тегов и установки редактора. Такой контент тоже есть на канале.

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

    Здравствуйте!
    Настроился поверстать с вами, а с Live Sass Compiler появились проблемки. Внес все ваши настройки в settings.json и VS Code вывалил несколько ошибок...соответственно при их наличии compiler не работает...
    Вот они:
    Must start with any of:
    `/` or `\` (for workspace root)
    `~/` or `~\` for relative to the file being processed. Must not end with a path separator (`/` or `\`)
    -
    относится к "savePath": "~/../css/"
    Must start with a path separator (`/` or `\`)
    -
    относится к "**/node_modules/**", ".vscode/**"
    Только у меня одного так?
    upd. с ошибками разобрался, в save path убрал конечный слэш - "savePath": "~/../css" и другие строчки тоже поменял на "/**/node_modules/**", "./vscode/**"
    но теперь у меня при запуске compiler генерируются файлы .css и .min.css в каждой папке с проектами...

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

      Странно, а что у вас за ОС? НА Mac и Windows все работает с указанными настройками. В общем да, возможно настройки надо поправить под вашу ОС или ее настройки.

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

      @@WebCademy у меня Windows 10

  • @mexvision-3556
    @mexvision-3556 Рік тому

    Зачем городить модификатор для контейнера (--small), если можно просто выровнять флексовые элементы по центру? justify-content: center;

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

      Если это решает задачу - тогда можно и так.

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

    Неужели кто-то ещё создаёт "велосипед"

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

      Каждый конструктор велосипедов должен создать свой. А обычному потребителю - хватит и велопроката, даже покупать не нужно.

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

      @@WebCademy я не спорю что Вы крутой кодер (это видно)..НО..я выбираю более лёгкие решения которые приносят более быстрые 💲

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

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