Прокашев Даниил
Прокашев Даниил
  • Видео 8
  • Просмотров 80 214
Верстка сайта по продаже недвижимости || HTML, SCSS, JavaScript, Swiper.js, Адаптивная верстка
Привет! Сегодня мы сверстаем непростой макет по продаже/покупке недвижимости. В этом уроке тебя ждет много интересного, так как мы сделаем несколько слайдеров, галерею, поработаем с CSS-переменными, поработаем с волшебной формулой, а также сразу же сделаем адаптив для нашего сайта! Присаживайся поудобнее, тебя ждет сочный контент! Приятного просмотра :)
!!! Если компилятор ругается на clamp формулу, то оберните центральную часть (где складывается vw и rem) в функцию calc
например: clamp(1rem, calc(1vw + 1 rem), 1rem)
Код для подключения шрифта: (поставь “:” после https)
@import url("https//fonts.googleapis.com/css?family=Work+Sans:regular,500,600&display=swap");
Сайт с большим количеством мак...
Просмотров: 29 627

Видео

Отличный счетчик для сайта на чистом JavaScript. Подробное объяснение для новичков!
Просмотров 1,5 тыс.Год назад
Привет! Сегодня мы научимся верстать таймер обратного отсчета на чистом JavaScript. Этот элемент очень часто встречается на страницах различных магазинов, например, когда надо показать время до конца акции. Мы также поработаем над тем, чтобы таймер можно было легко и быстро встраивать на страницу, сделаем из этого отдельный модуль, который можно будет переиспользовать любое количество раз, а та...
Бургер меню без библиотек на чистом JavaScript + плавный скролл к ссылкам
Просмотров 14 тыс.2 года назад
Привет! Сегодня мы будем с нуля делать бургер-меню, которое будет отлично смотреться на любом устройстве, от десктопов до мобильных устройств. Мы полностью напишем функционал на языке JavaScript, дополним наше меню дополнительными фишками, а также разберем 2 варианта внешнего вида нашего меню. Приятного просмотра! ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Ссылки: Архив с результатом - drive.google.com/file/d/1Oc...
Верстка сайта-портфолио для новичков с подробным объяснением. Часть 2 - Адаптив, JS
Просмотров 4,1 тыс.2 года назад
Привет! Сегодня мы продолжим и закончим верстать сайт-портфолио. Мы сделаем адаптив всех секций, а так же немного попишем скриптов, чтобы добавить логику на наш сайт. Реализуем мобильное меню “бургер”, сделаем активные ссылки при скролле к той или иной секции. Присаживайся поудобнее, приятного просмотра! ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Ссылки: Сервис Caniuse: caniuse.com/ Макет: www.figma.com/file/91vf...
Верстка сайта-портфолио для новичков с подробным объяснением. Часть 1 - HTML, CSS
Просмотров 13 тыс.2 года назад
Привет! Сегодня мы начнем серию из 3-х уроков, в ходе которых мы полностью сверстаем сайт портфолио. Уроки подойдут для новичков, так как сайт достаточно простой, но с интересными блоками, в которых можно использовать разные подходы. В первой части мы сверстаем сам сайт, его десктопную версию. Во второй части мы сделаем адаптив нашего сайта, а последняя часть будет посвящена JavaScript и некото...
Подробный гайд по настройке VS Code для ПРОДУКТИВНОЙ работы + БОНУС
Просмотров 4 тыс.2 года назад
Рабочее окружение является важным фактором для комфортной работы. Так как основное время разработчики проводят за компьютером, важно иметь правильно настроенное рабочее пространство, начиная темой компьютера и заканчивая редактором кода. Сегодня мы с вами настроим редактор кода VS Code для максимально комфортной работы. А так же, для хитрых и терпеливых зрителей я оставил небольшой бонус, как м...
Счётчик на чистом JS - подробное объяснение для новичков!
Просмотров 9 тыс.2 года назад
Счётчик - довольно часто-встречающийся элемент верстки. Например, его можно встретить в интернет-магазинах, сайтах бронирования билетов или подобных. Сегодня мы научимся верстать этот самый счётчик, разберемся с некоторыми нюансами и напишем свой скрипт. Приятного просмотра! Ссылка на архив с результатом - www.dropbox.com/s/p5f2lxrk6byfvbo/counter.zip?dl=0 По всем вопросам: Telegam: t.me/prokas...
Простое модальное окно на JS - ничего лишнего!
Просмотров 5 тыс.2 года назад
В данном видео-уроке мы создадим модальное окно на чистом JavaScript, без использования сторонних библиотек. У него будет самый стандартный и базовый функционал, который необходим почти на каждом сайте. Само окно вы сможете кастомизировать под себя как угодно - все ограничивается лишь фантазией :) Ссылка на архив с результатом - www.dropbox.com/s/blm4sd7l8bu6evq/modals.zip?dl=0 По всем вопросам...

Комментарии

  • @Monax-go6vq
    @Monax-go6vq Месяц назад

    Чтобы обрабатывался именно элемент, у которого есть соответствующий класс, а не картинка, то вместо дополнительной проверки, можно работать не через e.target, а через this, только при этом нужно EventListener передать не "стрелочную функцию", а обычную анонимную. В этом случае не нужно будет пробрасывать событие (е) и не нужно будет писать доп. проверку (||) Можно ли считать, что в этом случае анонимная функция (function declaration) более предпочтительная, чем стрелочная?

  • @sean1000
    @sean1000 Месяц назад

    0:42 есть видео или исходники по этим сайтам?

  • @dmitrytrezkov933
    @dmitrytrezkov933 2 месяца назад

    Верстать форму divами - это просто недопустимо, как для юзабилити, так и для отправки на сервер.

  • @user-nk8wq4sx1x
    @user-nk8wq4sx1x 2 месяца назад

    ul в навигации это рудимент исторический, достаточно просто ссылок. Правило с селектором * это тонкий лед, как и сброс точек у пунктов, если они где-то в тексте они понадобятся то придется переназначать, двойная работа. Ничего критического, в целом очень неплохо, образцово.

  • @olegger7436
    @olegger7436 2 месяца назад

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

    • @crylaught7283
      @crylaught7283 Месяц назад

      я наоборот на Х2 смотрю

  • @user-mn4wl9bb5x
    @user-mn4wl9bb5x 2 месяца назад

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

  • @Cat-bn3zv
    @Cat-bn3zv 2 месяца назад

    Можете сказать почему у мен не работает код я скачал этот архив открыл нтмл но функционал не работает

  • @SergeyRaevsky
    @SergeyRaevsky 3 месяца назад

    Работает! Благодарю

  • @alix4892
    @alix4892 4 месяца назад

    Это какой-то стокгольмский синдром. Сверстала две секции, за это время я испытала все виды боли. Даже боль от того, чо 3 секунды перемотки стрелкой в ютубе - это слишком много. За 3 секунды чел делает пятьсот действий)) Впервые в жизни использовала замедленную на максималках скорость, чтобы иногда понять, куда он пишет. Я решила, что не готова к такому формату и приняла твёрдое решение не идти до конца, а найти что-то попроще. Сюрприз. Теперь мне все кажутся очень медленными))) Я в заложниках у этого чела. Рекомендую всем хардкорщиками и извращенцам. Пока разбираешься, куда он тыкнул - начинаешь реально ориентироваться в простыне стилей. И огромное спасибо за clamp. Сначала не очень понимала, откуда берутся значения для формулы. Теперь не понимаю, как же иначе то)

    • @user-tz1td1bx7g
      @user-tz1td1bx7g 4 месяца назад

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

  • @ioannis2000
    @ioannis2000 4 месяца назад

    Nice video. Which plug in you used to extract class names from HTML to css file?

  • @user-nw8sz7fd7f
    @user-nw8sz7fd7f 5 месяцев назад

    на 3 минуте говоришь про какой-то трактор, и притом он не работает в css, можно было обьяснить как настроить его

  • @user-bo2bl5vr4f
    @user-bo2bl5vr4f 5 месяцев назад

    4to takoe css traktor ya ne mogu u sebya eto sdelat?

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

    спасибо, крутой шаблон ❤

  • @sad_gary
    @sad_gary 6 месяцев назад

    блин даниил!! какое же огромное спасибо тебе!! я 3 дня мучался по видосам других блогеров и не получалось(( ппц как ты просто выручил! огромное спасибо! 😭

  • @egorrublev5529
    @egorrublev5529 6 месяцев назад

    какие у тебя клиенты сюрёныЕ для токого сайта портфолиооо))))))улыбнуло

  • @OkazakiTomoyasan
    @OkazakiTomoyasan 6 месяцев назад

    привет , поясни , что это делает flex: 0 0 calc(700px / 1420px * 100%); ?

  • @alexdrumer5933
    @alexdrumer5933 8 месяцев назад

    Отличный урок, долго искал меню с переходом по ссылкам, выручил меня братан! Желаю каналу много подписчиков! Естественно подписался!

  • @user-ti8nj6rp4f
    @user-ti8nj6rp4f 8 месяцев назад

    Приветствую! Ждём новых видео)) Очень полезный контент!

  • @user-lw7mg8yx4p
    @user-lw7mg8yx4p 8 месяцев назад

    Спасибо, отличное видео для новичков!

  • @suralokinvelam3323
    @suralokinvelam3323 8 месяцев назад

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

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

    на 3 минуте говоришь про какой-то трактор, и притом он не работает в css, можно было обьяснить как настроить его и как правильней прописать в css чтобы он видел

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

    Как закрывать и открывать блоки в HTML(там напротив цифр стрелочка)? Вообще не понимаю

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

    обалденный видос. коротко и по делу)

  • @user-fb6rk6ct6i
    @user-fb6rk6ct6i Год назад

    Отличное видео! Спасибо!

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

    Скопировал твой код на бургер, даже не отображается на странице(

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

    А как эти декорации будут смотреться на 3к+ разрешениях монитора, тоже будут прижаты к краям экрана?

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

    Спасибо!

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

    Спасибо! Очень помогли)

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

    очень хороший урок прям для меня. еще момент если с самого начала нажать на минус то мы получаем NaN.

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

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

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

    Давай по медленнее.. Я записываю то заело с этим cowdound!

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

    когда уроки ?

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

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

  •  Год назад

    Come back!

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

    Фильтр в блоке hero это же форма? Сверстали заглушкой на дивах

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

    Даниил, давай мяса

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

    Почему в SCSS вместо переменных кастомные свойства? В них какое преимущество?

  • @user-kh4vh9dr1i
    @user-kh4vh9dr1i Год назад

    А как разместить такой сайт на гитхаб странице с ссылкой ?

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

    В хроме плавный скролл, почему-то, не работает (

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

    Привет автор! Жаль что бы перестал выкладывать новые видео! Очень очень познавательно

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

    Спасибо, крутой контент. Все четко подано, как мини туториал. Мне так легче воспринимать, чем сухую теорию. Добавил в закладки. И конечно в своем портфолио сделал по аналогии с видео, работает )

  • @Edgar-pu1lc
    @Edgar-pu1lc Год назад

    px to rem лишняя по моему,можно html задать font-size:62.5% (10px),тогда 10 px будет равен 1rem,7px-0.7rem и так далее...

    • @user-yd1tk2ix6f
      @user-yd1tk2ix6f Год назад

      кому как удобнее) на вкус и цвет все фломастеры разные, да и ставить процентные значения для текста, чтобы 1rem был 10px, когда rem это всегда 16рх, такое себе занятие

    • @Edgar-pu1lc
      @Edgar-pu1lc Год назад

      @@user-yd1tk2ix6f ну таким образом и адаптив будет легче намного ,нужно всего лишь менять font-size у html в разных расширениях

    • @Edgar-pu1lc
      @Edgar-pu1lc Год назад

      @@user-yd1tk2ix6f а так можно ставить 10 px вместо 62.5%,но там уже есть другой нюанс )

  • @Edgar-pu1lc
    @Edgar-pu1lc Год назад

    Привет,почему больше не снимаешь видео ?

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

    Спасибо за урок! Подскажи пожалуйста, разве swiper работает без файла swiper.css? Там вроде все ломается, если открывать на мобиле и пытаться свайпить не мышкой?

    • @user-yd1tk2ix6f
      @user-yd1tk2ix6f Год назад

      привет, нет, не ломается, так как я пишу свои стили, которые все предусматривают)

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

      @@user-yd1tk2ix6f даа, я уже разобрался, это потому что ты ипользовал 8 версию свайпера, а у них новая вышла и вот она не работает без swiper.css )) там так и написано на сайте: Now Swiper handles only Pointer Events, and doesn't rely on touch events like touchstart, touchmove, etc.

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

    Просто лучший

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

    как называется тема для vs code?

    • @user-yd1tk2ix6f
      @user-yd1tk2ix6f Год назад

      One Dark Pro с дополнительными изменениями

  • @user-ii9uk5sh7w
    @user-ii9uk5sh7w Год назад

    А почему подключал только скриптовый файл swiper ? По инструкции нужно ещё css/scss

    • @user-yd1tk2ix6f
      @user-yd1tk2ix6f Год назад

      я не подключал стили слайдера, это не обязательно. я написал свои стили)

  • @user-ii9uk5sh7w
    @user-ii9uk5sh7w Год назад

    Спасибо. Покажи ещё пожалуйста как в этом меню можно делать подменю

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

    Респект большое спасибо! Крутяк! Ты большой молодец!