Создание красивого сайта на HTML, CSS и JavaScript (CSS-анимация, Blur, Parallax, Gradient)

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

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

  • @wdm
    @wdm  4 месяца назад +1

    💥 Все курсы в одном комплекте 👇👇👇
    webdesign-master.ru/bundle_courses

  • @timchosen9974
    @timchosen9974 2 года назад +97

    Невероятно красиво. Я третий раз перематываю в начало, чтобы кайфануть с того, как эти картинки плавно двигаются) Респект за проделанную работу!

  • @vatasi7312
    @vatasi7312 2 года назад +10

    Капец , ваш дизайн это нечто, мне кажется даже люди которые ни как не связаны с вёрсткой и вообще it , просто увидев заставку нажмут на видео и посмотрят. Это как видео про очистку водоема хахах )... Кто смотрел тот поймет)))

  • @Петр-ц2в
    @Петр-ц2в 2 года назад +11

    Действительно, некоторых фишек не знал! Очень профессионально и быстро верстаешь)

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

    Я начал учиться в сфере ИТ 5 лет назад, сейчас решил определится со сферой и попробовать веб, не фронт, а бек на асп.нет, но все равно мне очень понравился ролик. Очень приятный голос и подача, объясняется каждое действие и почему именно такое решение. Это идеально

  • @imITshnik
    @imITshnik 9 месяцев назад +1

    Спасибо автору за топовую идею. Я её реализовал в своей конкурсной работе, буду адаптировать и править, т.к в секции поведение чуть другое. Очень удобно, что в курсе есть все библиотеки. Купил 2 около недели назад)

  • @berl1ngo
    @berl1ngo 2 года назад +2

    Галерея действительно потрясающая… спасибо тебе огромное! Человечище!!

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

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

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

    Спасибо! Очень полезный и ёмкий урок - грех не повторить все действия за автором, практики ради☺🤓

  • @alexmckaley904
    @alexmckaley904 2 года назад +6

    афигеннейший урок, спасибо от всех верстальщиков. 🙏🏻

    • @vipro.design
      @vipro.design 2 года назад +2

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

  • @ИгорьГлазков-с1б
    @ИгорьГлазков-с1б 11 месяцев назад +1

    Уникальное видео! Спасибо Вам.

  • @jascherkagri1864
    @jascherkagri1864 2 года назад +4

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

  • @ДанаКатуяр
    @ДанаКатуяр 2 года назад

    Смотреть одно удовольствие! Результат выглядит очень эффектно

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

    Крутая идея но не хватает скрола на начало слайда в конце + что бы при нажатии на карточку нельзя было открыть другую . Лайк

  • @antonmolchanov9327
    @antonmolchanov9327 2 года назад +25

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

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

    Как же круто) Спасибо что создаешь такие уроки, для начинающих это важно ооочень!

  • @Sectant-Mafia
    @Sectant-Mafia 9 месяцев назад

    Круто недавно начал обучаться. Круто что доступно обьясняешь это импотент для начинающих и не только

  • @sv9tgolden
    @sv9tgolden 2 года назад +9

    Очень красиво. Нигде не видел такое

  • @m_mariya_mari
    @m_mariya_mari 2 года назад +2

    Шикарная галерея! огромное спасибо за такой интересный урок!

  • @ИгорьМешалкин-ж7ф
    @ИгорьМешалкин-ж7ф Год назад +1

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

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

    Это огромный опыт, полезнейшие знания, с меня лай и коммент, спасибо огромное!

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

    Дабл-вау эффект... Давно не заглядывал на канал и тут на тебе. Ай, малацца!!!1

  • @_Leon_-
    @_Leon_- 2 года назад +1

    Привет учитель. Ты просто волшебник!!)

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

    Выглядит шикарно!

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

    Вышло ну ооочень классно и красиво 🔥🔥🔥 Сегодня попробую тоже такое сделать)) Делайте побольше таких прикольных штучек 😉

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

    Спасибо большое. Очень понятный и красивый туториал

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

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

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

    Огонь!! Просто бомба

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

    Отлично. Спасибо за урок.

  • @kleomant2762
    @kleomant2762 2 года назад +2

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

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

    Спасибо за видос я сам не давно научился создавать сайты!!👍👍👍

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

    Коммент в поддержку)
    Прикольный материал, спасибо!

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

    Очень классный урок, ты супер 🔥

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

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

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

    Еще и тема с vice city
    Шикарное видео

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

    Балдеж, спасибо за урок

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

    Бомба пушка!!!!!

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

    Шикарный урок. Спасибо

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

    Крутяк! 😊

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

    Вот это уровень! Я понимаю

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

    Галерейка просто уфф... ))))

  • @SomiKOOO
    @SomiKOOO 9 месяцев назад

    Подскажите пожалуйста, вы в браузере запускаете сервер? Или используете прогу

    • @wdm
      @wdm  9 месяцев назад +2

      В данном видео я использую расширение Live Server для редактора VS Code.

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

    Я ТЕБЯ ЛЮБЛЮ ❤️❤️❤️

  • @ДимитрийДонской-ж7л

    Урок очень полезный. Всё повторил за вами. Потом использовал в учебном проекте. Благодарю! P. S. : еслиб не вы я бы так и не разобрался бы наверное с галпом))

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

    КрутяК!!!) джемс очередные "ответы на вопросы"...

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

    Я подписан бро.отлчная работа! Респектище))

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

    Вааааау!

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

    Отдельный лайк за audio-outro. Олдам сводит скулы при прослушивании )

  • @print-k1x
    @print-k1x 2 года назад

    отлична работа
    спасибо за труд !!!!

  • @УланбекАлтымышев

    Очень круто спасибо большое

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

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

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

    Очень круто получилось!

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

    Эффектно!

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

    Ты лучший, спасибо большое тебе это просто красота...

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

    было интересно !

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

    Cпасибо!

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

    Круть!

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

    Всё шяс сяду и начну делать

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

    Excellent work bro!

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

    Комментарий для продвижения этого видео)

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

    (❁´◡`❁) will-change и не слышал от таком свойстве) его в скрипт совать можно для отключения включения, но не в этом случае. Спасибо за урок!

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

    Спасибо большое! Действительно очень крутая фича!!! У меня вопрос (возможно, для кого-то глупый, так что извините заранее): как сделать так, чтобы при выборе слайда он раскрывался полностью на всю его ширину?

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

    Спасибо за труд 👍👍

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

    Красавчик

  • @xirton
    @xirton 4 часа назад

    подскажите пожалуйста, что делать если код точь в точь как у вас, но при открытии через браузер Chrome, высвечивается только белый экран без каких либо результатов?

    • @wdm
      @wdm  3 часа назад +1

      Для начала откройте в Chrome файл index.html, который находится в папке ready-html. Если в таком случае всё работает, значит код не точь в точь, ищите ошибку, опечатку, пропущенный символ. Можете воспользоваться DevTools > Консоль. Правая кнопка мыши, Посмотреть код, вкладка Консоль. Если есть какая-то ошибка в JavaScript, исправьте её. Внимательно посмотрите на код, потому, что готовый пример работает в Chrome.

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

    Подскажите, пожалуйста, название темы оформления для VS Code?! Мягкая, приятная глазу. Урок супер. Закинул друзьям, пусть посмотрят, как нужно код писать и где правильный дизайн изучать ;)

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

      One Dark Pro - тема, которую я использую в VS Code.

  • @ЮляКолечкина
    @ЮляКолечкина 2 года назад

    Спасибо

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

    спасибо вам!

  • @НикитаБеловощев-ы7ц

    добрый день, классное видео и не менее красивое оформление галереи!! Хочу спросить, а можно ли как-нибудь добавить кнопку возврата к первому слайду? пробовал обычный вариант, но видимо так как сама страница не скролиться, то не дает((

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

    Вваааууууу 👍

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

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

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

      Здравствуйте. Можно при клике на изображение давать класс ещё и корневому тегу, например, body, помимо выбранного. Или добавить активному изображению псевдоэлемент before, который будет служить оверлеем и который перекроет другие айтемы. Вариантов масса.

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

      Я это реализовал таким образом:
      document.querySelectorAll( '.slider__item').forEach(item=>{
      item.addEventListener('click', event =>{

      if (item.classList.toggle('opened')){
      document.addEventListener( 'click', (e) => {
      const withinBoundaries = e.composedPath().includes(item);

      if ( ! withinBoundaries ) {
      item.classList.remove('opened');
      }
      })

      }
      })})

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

    здраствуйте, не работает opacity в visual studio, какая может быть причина?

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

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

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

      transition-delay: 2s для обертки не подходит?

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

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

  • @Anti-zasor
    @Anti-zasor 2 года назад

    Как правильно называется этот принцип с Переменными в CSS?

  • @МаксимХорошев-ф2и
    @МаксимХорошев-ф2и 2 года назад +2

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

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

      на канале покапайтесь, там есть создание от А до Я и другие серии видео

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

    Посоветуете 27 дюймовый монитор для дизайнера

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

    Такой вопрос я вставляю вместо твои свои изображение но они почемуто размитие и не отцентрование какието кароче незнаю как ето поправить

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

      Здравствуйте. Постарайтесь добавлять изображения такого-же разрешения и такой-же пропорции. Это важно.

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

      @@wdm Спасибо и такой вопрос можно ли както сменить разрешение основи картинки ну типу не 1920на 1080 а по менше
      а то как не пробуй чето то уже стает то левее

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

    Почему у меня на сайте 3 дива ,а не один как у тебя ?

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

      Ты просто не подключил стили в head которые swiper'a.

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

    А как сделать так, чтобы когда нажимал на картинку был переход на другую страницу?

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

      Здравствуйте. Можно просто обернуть тег айтема в тег a, тем самым мы получим возможность указывать ссылку на другую страницу посредством атрибута href.

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

      @@wdm спасибо) Уже разобрался)))

  • @АндрейПопов-л9ъ
    @АндрейПопов-л9ъ 7 месяцев назад

    Можешь сделать ссылку на папку libs

    • @wdm
      @wdm  7 месяцев назад +1

      Здравствуйте. На странице урока есть архив со всеми исходниками и библиотеками, которые использовали в видео уроке.

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

    И Вуаля

  • @4cristian
    @4cristian 2 года назад +5

    Алексей, понравилось использование слайдера и параллакса, очень классно, попробовал сделать впервые 20 минут после появления урока, спасибо)
    Меня мучает вопрос, стоит ли изучать препроцессоры в css, и если да то какой из?

    • @wdm
      @wdm  2 года назад +2

      Думаю, изучать стоит. Хотя изучать там особо нечего. А вот использовать или нет - на ваше усмотрение.