- Видео 8
- Просмотров 80 214
Прокашев Даниил
Добавлен 27 дек 2020
Канал о веб разработке и всем, что с ней связано
Верстка сайта по продаже недвижимости || 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");
Сайт с большим количеством мак...
!!! Если компилятор ругается на 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 По всем вопросам...
Чтобы обрабатывался именно элемент, у которого есть соответствующий класс, а не картинка, то вместо дополнительной проверки, можно работать не через e.target, а через this, только при этом нужно EventListener передать не "стрелочную функцию", а обычную анонимную. В этом случае не нужно будет пробрасывать событие (е) и не нужно будет писать доп. проверку (||) Можно ли считать, что в этом случае анонимная функция (function declaration) более предпочтительная, чем стрелочная?
0:42 есть видео или исходники по этим сайтам?
Верстать форму divами - это просто недопустимо, как для юзабилити, так и для отправки на сервер.
ul в навигации это рудимент исторический, достаточно просто ссылок. Правило с селектором * это тонкий лед, как и сброс точек у пунктов, если они где-то в тексте они понадобятся то придется переназначать, двойная работа. Ничего критического, в целом очень неплохо, образцово.
не знаю почему многие в таком восторге от видео, все очень дергано, глаз просто не успевает за действиями автора и даже не всегда успеваешь на паузу видео поставить что-бы увидеть что автор написал
я наоборот на Х2 смотрю
Привет, подскажи какой плагин ты используешь для того, чтобы понять размеры окна
Можете сказать почему у мен не работает код я скачал этот архив открыл нтмл но функционал не работает
Работает! Благодарю
Это какой-то стокгольмский синдром. Сверстала две секции, за это время я испытала все виды боли. Даже боль от того, чо 3 секунды перемотки стрелкой в ютубе - это слишком много. За 3 секунды чел делает пятьсот действий)) Впервые в жизни использовала замедленную на максималках скорость, чтобы иногда понять, куда он пишет. Я решила, что не готова к такому формату и приняла твёрдое решение не идти до конца, а найти что-то попроще. Сюрприз. Теперь мне все кажутся очень медленными))) Я в заложниках у этого чела. Рекомендую всем хардкорщиками и извращенцам. Пока разбираешься, куда он тыкнул - начинаешь реально ориентироваться в простыне стилей. И огромное спасибо за clamp. Сначала не очень понимала, откуда берутся значения для формулы. Теперь не понимаю, как же иначе то)
жиза, обычно на полтора-два все смотрю, а тут нихера не успеваю)
Nice video. Which plug in you used to extract class names from HTML to css file?
на 3 минуте говоришь про какой-то трактор, и притом он не работает в css, можно было обьяснить как настроить его
4to takoe css traktor ya ne mogu u sebya eto sdelat?
спасибо, крутой шаблон ❤
блин даниил!! какое же огромное спасибо тебе!! я 3 дня мучался по видосам других блогеров и не получалось(( ппц как ты просто выручил! огромное спасибо! 😭
какие у тебя клиенты сюрёныЕ для токого сайта портфолиооо))))))улыбнуло
привет , поясни , что это делает flex: 0 0 calc(700px / 1420px * 100%); ?
Отличный урок, долго искал меню с переходом по ссылкам, выручил меня братан! Желаю каналу много подписчиков! Естественно подписался!
Приветствую! Ждём новых видео)) Очень полезный контент!
Спасибо, отличное видео для новичков!
Побольше делай таких видео, на которых присутствует разные макеты, как тут, где картинка справа в углу выходит за рамки контейнера и как правильно сверстать такой сайт) с этими картинками
на 3 минуте говоришь про какой-то трактор, и притом он не работает в css, можно было обьяснить как настроить его и как правильней прописать в css чтобы он видел
eCSStractor for VSCode
Как закрывать и открывать блоки в HTML(там напротив цифр стрелочка)? Вообще не понимаю
обалденный видос. коротко и по делу)
Отличное видео! Спасибо!
Скопировал твой код на бургер, даже не отображается на странице(
А как эти декорации будут смотреться на 3к+ разрешениях монитора, тоже будут прижаты к краям экрана?
Спасибо!
Спасибо! Очень помогли)
очень хороший урок прям для меня. еще момент если с самого начала нажать на минус то мы получаем NaN.
видос огонь, подача очень хорошая, много фишек подчеркнул и решений, хотелось бы продолжения такого контента и сложные макеты Автор вернись пожалуйста)
Давай по медленнее.. Я записываю то заело с этим cowdound!
когда уроки ?
Справа если сделать меню, появляется прокрутка в ширину
Come back!
Фильтр в блоке hero это же форма? Сверстали заглушкой на дивах
Даниил, давай мяса
Почему в SCSS вместо переменных кастомные свойства? В них какое преимущество?
А как разместить такой сайт на гитхаб странице с ссылкой ?
В хроме плавный скролл, почему-то, не работает (
Привет автор! Жаль что бы перестал выкладывать новые видео! Очень очень познавательно
Спасибо, крутой контент. Все четко подано, как мини туториал. Мне так легче воспринимать, чем сухую теорию. Добавил в закладки. И конечно в своем портфолио сделал по аналогии с видео, работает )
px to rem лишняя по моему,можно html задать font-size:62.5% (10px),тогда 10 px будет равен 1rem,7px-0.7rem и так далее...
кому как удобнее) на вкус и цвет все фломастеры разные, да и ставить процентные значения для текста, чтобы 1rem был 10px, когда rem это всегда 16рх, такое себе занятие
@@user-yd1tk2ix6f ну таким образом и адаптив будет легче намного ,нужно всего лишь менять font-size у html в разных расширениях
@@user-yd1tk2ix6f а так можно ставить 10 px вместо 62.5%,но там уже есть другой нюанс )
Привет,почему больше не снимаешь видео ?
Спасибо за урок! Подскажи пожалуйста, разве swiper работает без файла swiper.css? Там вроде все ломается, если открывать на мобиле и пытаться свайпить не мышкой?
привет, нет, не ломается, так как я пишу свои стили, которые все предусматривают)
@@user-yd1tk2ix6f даа, я уже разобрался, это потому что ты ипользовал 8 версию свайпера, а у них новая вышла и вот она не работает без swiper.css )) там так и написано на сайте: Now Swiper handles only Pointer Events, and doesn't rely on touch events like touchstart, touchmove, etc.
Просто лучший
как называется тема для vs code?
One Dark Pro с дополнительными изменениями
А почему подключал только скриптовый файл swiper ? По инструкции нужно ещё css/scss
я не подключал стили слайдера, это не обязательно. я написал свои стили)
Спасибо. Покажи ещё пожалуйста как в этом меню можно делать подменю
Респект большое спасибо! Крутяк! Ты большой молодец!