Адаптивная форма с анимацией на HTML, CSS и JavaScript | Практика верстки для начинающих

Поделиться
HTML-код
  • Опубликовано: 11 янв 2025

Комментарии • 98

  • @CodeQuestRu
    @CodeQuestRu  3 года назад +1

    0:00 - Демонстрация формы
    0:40 - Базовая разметка и стили
    1:16 - Контейнер компонента
    2:26 - Внутренний блок
    3:38 - Секции входа и регистрации
    6:01 - Блок формы
    7:20 - Сценарий JavaScript для анимации
    9:09 - Реализация анимации на CSS
    10:45 - Форма входа
    13:49 - Форма регистрации
    14:41 - Анимация появления форм
    17:06 - Адаптив под мобильные устройства
    19:15 - Подведение итогов

    • @nezamovanim
      @nezamovanim 3 года назад

      Слушай, а мог бы показать ещё, как сделать эту же форму с Firebase и сделать ридерект на другую страницу?

  • @Pincolada
    @Pincolada 3 года назад +7

    Вауу это просто офигенно выглядит. Спасибо за контент!

  • @egen357
    @egen357 Год назад

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

  • @shushu3819
    @shushu3819 3 года назад +3

    Огромное спасибо, шикарная форма! Отличная подача)

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

      Очень рад, что видео понравилось!
      Жду вас среди подписчиков =)

  • @МаркПостер
    @МаркПостер 3 года назад +1

    Спасибо за контент!
    Хорошая подача. С первого просмотра понял все фишки и хорошо запомнил их.

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

      Супер! Рад, что понравилось =)

  • @ВалерийЗолотухин-ж6в
    @ВалерийЗолотухин-ж6в 3 года назад +1

    Спасибо Вам! Прекрасная форма выглядит просто классно.

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

      Рад, что понравилось =)

  • @Unknown-ei7lq
    @Unknown-ei7lq 3 года назад

    Это самая красивая форма которую я когда либо видел спасибо тебе большое

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

      Круто, пользуйтесь на здоровье =)

  • @yuriit.8192
    @yuriit.8192 2 года назад

    5+
    Четко. Качественно. Стильно!

  • @СергейДовгалев-ц1щ
    @СергейДовгалев-ц1щ 2 года назад

    Спасибо Вам, добрый человек) Вчера случайно увидел Ваше видео) Сразу понравилось. Оно безусловно сразу выделяется среди остальных форм. Я конечно не фронтенд и не JavaScript изучаю а .Net Core и пишу проект свой. ОЧень понравилось. БЫли сразу непонятки, но кое как адаптировал. Кому не показывал все восхищены формой) Но я говорю, что идея не моя и код не мой. Я лишь повторил) ВЫше всех похвал)))) лайк и подписка

  • @tdtoha
    @tdtoha 2 года назад

    Отличный контент, все понятно, качественно записано и объяснено. Спасибо! Подписка 👌🏻

  • @alexazarubin8456
    @alexazarubin8456 14 дней назад

    Спасибо, очень круто

  • @tuwka705
    @tuwka705 Год назад +1

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

    • @tuwka705
      @tuwka705 Год назад

      Так что лучше на это видео время не тратить. Автор обманул

    • @bekmyrza2005
      @bekmyrza2005 11 месяцев назад

      даже переписать нормально не смог? у меня все работает

  • @felixsigizmyn9002
    @felixsigizmyn9002 2 года назад

    Если говорить про БЭМ, то на 4:22 блок section имеет класс block__item, но вложенный блок почему-то block-item__title, хотя по логике должен начинаться с "block__"..., а не с "block-".

    • @CodeQuestRu
      @CodeQuestRu  2 года назад

      У блока section два класса: block__item как элемента и block-item как блока. И как блок он имеет свои элементы block-item__title и block-item__btn. Никакой ошибки нет

    • @felixsigizmyn9002
      @felixsigizmyn9002 2 года назад

      @@CodeQuestRu У блока section два класса, верно, но второй служит модификатором, обычно первый класс используют для основы, а не модификатор

    • @CodeQuestRu
      @CodeQuestRu  2 года назад

      @@felixsigizmyn9002 нет, вы ошибаетесь. У этого блока нет модификатора и он не обязательно должен указываться вторым. У этого блока есть класс элемента родительского блока и класс блока для дочерних элементов. Классический микс

    • @felixsigizmyn9002
      @felixsigizmyn9002 2 года назад

      @@CodeQuestRu Всё перечитал и понял, что наследуется имя от второго класса, а не от первого, немного сбило с понимания)

  • @ПётрБуйницкий-ф8к
    @ПётрБуйницкий-ф8к 3 года назад +1

    Ух ты! Я не один подписан на Online Tutorials!

    • @ПётрБуйницкий-ф8к
      @ПётрБуйницкий-ф8к 3 года назад +1

      Зато с объяснениями и на русском, оригинал просто с музыкой

    • @CodeQuestRu
      @CodeQuestRu  3 года назад +1

      Адаптирую интересные моменты для русскоязычной аудитории. Плюс переделываю некоторые моменты так, как сделал бы я. Просто идеи там хорошие =)

  • @justmyacc7.7bviews3seconds4
    @justmyacc7.7bviews3seconds4 2 года назад

    Спасибо за такой ролик! Все получилось :)

  • @eniseibro7566
    @eniseibro7566 2 года назад

    Мне понравилось твое видео! Просто класс! Продолжай в том же духе !!!🔥🔥🔥

    • @CodeQuestRu
      @CodeQuestRu  2 года назад

      Спасибо большое =)

  • @vakovako5801
    @vakovako5801 2 года назад

    Четко🤌 Салам из Баку). Не спалось , посмотрел и кайфанул)

    • @CodeQuestRu
      @CodeQuestRu  2 года назад

      Салам, спасибо =)

  • @IlyaMirzaahmedov
    @IlyaMirzaahmedov 2 года назад

    Нет слов и просто спасибо

  • @theleshatv6827
    @theleshatv6827 Год назад +1

    У меня анимация не работает, в консоли ошибок нету, на алерт отзывается. Как бы не старался найти что не так. Всё буква в букву просто сделал

  • @nicolaskeratry
    @nicolaskeratry Год назад

    Очень круто! А есть полный пример с работающей ссылкой забыли пароль?

  • @markeellaas
    @markeellaas 2 года назад

    Молодчик, спасибо большое

  • @ИльяСевостьянов-э5т

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

  • @alexandraweather4156
    @alexandraweather4156 3 года назад

    Это просто офигеть
    А можете показать как сделать, чтобы блоки при перелистывании вроде как ехали относительно подложки?

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

      Спасибо!
      Принцип такой же, нужно только поиграться со свойствами для активного элемента. По описанию немного сложно понять, что конкретно вы хотите получить =)

  • @zxcarmy9770
    @zxcarmy9770 Год назад

    Спасибо за хорошую форму. Вопрос.
    Как член, чтобы при открытии страницы показывался не "Вход", а "Регистрация"?

  • @nezamovanim
    @nezamovanim 3 года назад +2

    Слушай, а мог бы показать ещё, как сделать эту же форму с Firebase и сделать ридерект на другую страницу?

    • @CodeQuestRu
      @CodeQuestRu  3 года назад +1

      Пока сильно занят марафоном, закину в заметки, подумаю =)

  • @sanek55ful
    @sanek55ful Год назад +1

    привет. подскажи такая проблема . Error:parsing error the keyword 'const' is reserved в script.js в первой же строчке

    • @ВалерияГут-т4е
      @ВалерияГут-т4е Год назад

      Тоже самое(

    • @ВалерияГут-т4е
      @ВалерияГут-т4е Год назад

      Ты пофиксил это как-нибудь?я весь вечер убила,не придумала,что делать

    • @sanek55ful
      @sanek55ful Год назад

      @@ВалерияГут-т4е то что я решил эту проблему это точно , но сейчас уже не вспомню месяц прошел

    • @ВалерияГут-т4е
      @ВалерияГут-т4е Год назад

      @@sanek55ful жаль..я вот совсем без понятия,что делать(

    • @sanek55ful
      @sanek55ful Год назад

      @@ВалерияГут-т4е дома вечером посмотрю если код этот остался . Ну если нет то извените . Чистку делал на рабочем столе мог удалить . Есть ещё надежда что в опен сервере остался код

  • @hefzel6407
    @hefzel6407 3 года назад

    очень хорошо для практики

  • @ДаниилЛемпис
    @ДаниилЛемпис 2 года назад

    у меня что-то не работает, можете помочь, как с вами связаться?

  • @Deutschdurchvideo
    @Deutschdurchvideo 2 года назад

    Здравствуйте!
    Бро как активировать jav у?
    Как то я всё повторил но как то кнопка не активируется пж погои или кто нибудь помогите

  • @milkovich_1938
    @milkovich_1938 2 года назад

    Отлично!

  • @А.Ф-д6п
    @А.Ф-д6п 2 года назад

    Сколько ты учился этому что бы понимать это?

  • @mrPanch777
    @mrPanch777 3 года назад

    Лучший ✊👍

  • @_makh.mudov_078
    @_makh.mudov_078 2 года назад

    Спасибо очень помог

  • @aidannaitmt
    @aidannaitmt Год назад

    Это программа Microsoft visual studio ?

  • @_makh.mudov_078
    @_makh.mudov_078 2 года назад

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

    • @_makh.mudov_078
      @_makh.mudov_078 2 года назад

      Есть ли у вас такое видео?

    • @CodeQuestRu
      @CodeQuestRu  2 года назад

      Это делается простыми параметрами и правильными типами полей формы, либо на JavaScript. Но сейчас видео по валидации у меня нет =)

    • @_makh.mudov_078
      @_makh.mudov_078 2 года назад

      @@CodeQuestRu хорошо, спасибо, 🤗

  • @fillman_artemy
    @fillman_artemy 2 года назад

    Куда приходит заполненная форма ?

    • @CodeQuestRu
      @CodeQuestRu  2 года назад

      Куда вы сами укажете

  • @provokator3746
    @provokator3746 2 года назад

    Я делаю тоже самое только box-sizing: broder-box отображает как ошибку

    • @CodeQuestRu
      @CodeQuestRu  2 года назад

      Что пишет?

    • @provokator3746
      @provokator3746 2 года назад

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

  • @xacquagamer4889
    @xacquagamer4889 Год назад

    А это окно регистрации полностью рабочее? И восстановление пароля тоже?

    • @CodeQuestRu
      @CodeQuestRu  Год назад

      Тут только верстка

    • @xacquagamer4889
      @xacquagamer4889 Год назад

      @@CodeQuestRuа есть видео как это все заставить работать?

    • @sanek55ful
      @sanek55ful Год назад

      @@xacquagamer4889phpmyadmin mysql подключение к базам данных. пиши это в ютуб и смотри видосики и сможешь сделать

    • @xacquagamer4889
      @xacquagamer4889 Год назад

      @@sanek55ful спасибо

  • @aleksandrchucherov5429
    @aleksandrchucherov5429 3 года назад

    Здравствуйте, куда можно обратиться с вопросом? скриншоты скину

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

      Напишите в сообщения в группе ВК

  • @artikor8071
    @artikor8071 3 года назад

    за атрибут 'defer' для js отдельный лайк можно поставить? :DD

    • @CodeQuestRu
      @CodeQuestRu  3 года назад +1

      Можно, но лучше сразу 3 лайка, чтобы не мелочиться))

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

      @Дмитрий Самарин все норм, просто редко используют =)

    • @CodeQuestRu
      @CodeQuestRu  3 года назад

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

  • @Anna-td4cq
    @Anna-td4cq 8 месяцев назад

    супер!

  • @ИванНассонов-б9ж
    @ИванНассонов-б9ж 2 года назад

    Очень информативное и полезное видео. Но почему так мало подписчиков на канале?

    • @CodeQuestRu
      @CodeQuestRu  2 года назад +1

      Многие смотрят и не подписываются, сам не знаю =)

  • @iskenderyarkukov7025
    @iskenderyarkukov7025 3 года назад

    Отлично

  • @_Artur_18_
    @_Artur_18_ Год назад +1

    Переход совершенно не работает

  • @Wowa12345
    @Wowa12345 5 месяцев назад

    9:25

  • @Dkhan02
    @Dkhan02 2 года назад

    можно код?

    • @CodeQuestRu
      @CodeQuestRu  2 года назад

      Да, все исходники на бусти

  • @emporteme
    @emporteme 2 года назад

    у меня цвет не меняется

    • @CodeQuestRu
      @CodeQuestRu  2 года назад

      Возможно где-то ошибка

    • @emporteme
      @emporteme 2 года назад

      @@CodeQuestRu у вас было в body
      А я пишу это в footer
      Вроде все поставил по местам
      Все работает кроме изменение цвета

  • @dogvscatfunny9956
    @dogvscatfunny9956 Год назад

    На столько тупой контент это пустая трата времени