- Видео 44
- Просмотров 218 211
Code Lab - Уроки по программированию
Россия
Добавлен 9 мар 2021
На нашем канале вы сможете учиться программированию на практике. Это самый эффективный способ обучения. Здесь вы найдете востребованный и уникальный контент. Подпишись, чтобы не пропускать новые видео ;)
20.11.2021 - 100 подписчиков
20.01.2022 - 200 подписчиков
17.02.2022 - 300 подписчиков
10.05.2022 - 500 подписчиков
13.10.2022 - 1000 подписчиков
------------------------------
Поддержать меня и мой канал вы можете по ссылкам ниже.
Yandex деньги ➝ yoomoney.ru/to/4100116765956607
Qiwi кошелек ➝ qiwi.com/n/CODELAB
20.11.2021 - 100 подписчиков
20.01.2022 - 200 подписчиков
17.02.2022 - 300 подписчиков
10.05.2022 - 500 подписчиков
13.10.2022 - 1000 подписчиков
------------------------------
Поддержать меня и мой канал вы можете по ссылкам ниже.
Yandex деньги ➝ yoomoney.ru/to/4100116765956607
Qiwi кошелек ➝ qiwi.com/n/CODELAB
Кредитный калькулятор на JS с диаграммой
🌐 Сайт: codelab.pro/
💬 Группа в Telegram: t.me/codelab_channel
------------------------------
📋 Кратко, о чем это видео
В этом видео мы создадим кредитный калькулятор, реализованный на JavaScript, который работает на основе аннуитетного платежа. Аннуитетный платеж представляет собой равные ежемесячные выплаты, включающие как основной долг, так и проценты по кредиту.
Особенностью данного калькулятора является наличие встроенной диаграммы, которая наглядно демонстрирует структуру платежей, включая основной долг и сумму переплаты. Диаграмма реализована с помощью библиотеки Chart.js.
❗Все комментарии к видео даны в таймкодах. А скачать готовый код из видео с подробными комментариями вы можете ниже ...
💬 Группа в Telegram: t.me/codelab_channel
------------------------------
📋 Кратко, о чем это видео
В этом видео мы создадим кредитный калькулятор, реализованный на JavaScript, который работает на основе аннуитетного платежа. Аннуитетный платеж представляет собой равные ежемесячные выплаты, включающие как основной долг, так и проценты по кредиту.
Особенностью данного калькулятора является наличие встроенной диаграммы, которая наглядно демонстрирует структуру платежей, включая основной долг и сумму переплаты. Диаграмма реализована с помощью библиотеки Chart.js.
❗Все комментарии к видео даны в таймкодах. А скачать готовый код из видео с подробными комментариями вы можете ниже ...
Просмотров: 189
Видео
Карточки товаров на CSS Grid / Интернет-магазин с нуля
Просмотров 6 тыс.10 месяцев назад
🌐 Сайт: codelab.pro/ 💬 Группа в Telegram: t.me/codelab_channel 📋 Кратко, о чем это видео В этом видео мы разработаем адаптивную сетку из карточек товаров. Это будет основа для интернет-магазина. Сама карточка включает в себя: изображение и название товара, цену со скидкой и без, кнопку "В корзину". Вы поймете как работать с сетками (Grid) в CSS. 📌 Полезные ссылки Исходный код из урока ➝ codelab...
Создаем слайдер карусель для сайта / Плагин Slick
Просмотров 1,8 тыс.Год назад
🌐 Наш сайт: codelab.pro/ 💬 Группа в Telegram: t.me/codelab_channel 📋 Кратко, о чем это видео Карусельный слайдер - это тип слайдера, который позволяет пользователям прокручивать серию изображений или другой контент. Обычно используются на веб-сайтах для демонстрации продуктов, услуг или фотографий. В этом видео мы сделаем слайдер карусель, который будет: 1. Отображать три слайда за раз 2. Все с...
Кнопка наверх на JS / Scroll to top
Просмотров 3,9 тыс.Год назад
🌐 Наш сайт: codelab.pro/ 💬 Группа в Telegram: t.me/codelab_channel 📋 Кратко, о чем это видео При скролле страницы на сайте часто возникает потребность вернутся наверх. Например, в контентных сайтах при прочтении статьи необходимо вернуться обратно в меню. Мы разработаем кнопку наверх на чистом JS, чтобы помочь пользователям с прокруткой страницы. 📌 Полезные ссылки Статья на моем сайте про кнопк...
Маска для ввода телефона на JS / Плагин IMask.js
Просмотров 3,7 тыс.Год назад
🌐 Наш сайт: codelab.pro/ 💬 Группа в Telegram: t.me/codelab_channel 📋 Кратко, о чем это видео Маска телефонного номера - это строка символов, которая используется для представления реального телефонного номера. Маска используется для того, чтобы облегчить пользователям ввод номера телефона в поле формы. Маска также помогает проверить номер телефона на стороне браузера. Для создания маски для вво...
Верстка формы авторизации и регистрации по макету Figma
Просмотров 1,9 тыс.Год назад
🌐 Наш сайт: codelab.pro/ 💬 Группа в Telegram: t.me/codelab_channel 📋 Кратко, о чем это видео Рассмотрим, как сверстать две формы: одну для авторизации, вторую для регистрации пользователя. Данные формы вы можете адаптировать под себя: дизайн у них довольно простой, так же как сам код. 📌 Ссылки на источники Стартовый проект для верстки ➝ github.com/toni-wheel/base-sass Макеты форм в Figma ➝ clck...
Препроцессор Sass/SCSS за 17 минут
Просмотров 13 тыс.Год назад
🌐 Наш сайт: codelab.pro/ 💬 Группа в Telegram: t.me/codelab_channel 📋 Кратко, о чем это видео В этом видео вы узнаете основы препроцессора SASS/SCSS, что это такое и как использовать его возможности для быстрого написания стилей. Для компиляции SASS в CSS будем пользоваться плагином Live Sass Compiler . Этот плагин является расширением редактора кода VS Code. 📌 Ссылки на источники Статья про Sas...
Методология БЭМ для начинающих
Просмотров 1,4 тыс.Год назад
🌐 Наш сайт: codelab.pro/ 💬 Группа в Telegram: t.me/codelab_channel 📋 Кратко, о чем это видео В этом коротком видео рассмотрим что такое БЭМ, зачем он нужен и как правильно называть классы. В дальнейшем это поможет нам при верстке сайтов. 📌 Ссылки на источники Статья про БЭМ на моем сайте ➝ codelab.pro/metodologiya-bem-prostymi-slovami/ Стартовый проект на GitHub ➝ github.com/toni-wheel/youtube-...
Фиксированное боковое меню
Просмотров 630Год назад
🌐 Наш сайт: codelab.pro/ 💬 Группа в Telegram: t.me/codelab_channel 📋 Кратко, о чем это видео Создадим простое боковое меню с логотипом. Каждый элемент меню имеет свою иконку. При наведении элемент меню выделяется. Делать боковое меню будет на чистом CSS. Фиксированное боковое меню смотрится гармонично на любом сайте и удобно для пользователей. 📌 Ссылки на источники Готовый код из видео ➝ codela...
Создаем аккордеон на JS за 10 минут
Просмотров 3,6 тыс.2 года назад
🌐 Наш сайт: codelab.pro/ 💬 Группа в Telegram: t.me/codelab_channel 📋 Кратко, о чем это видео В этом видео мы напишем свой аккордеон на чистом JS. Важная особенность в этом аккордеоне - при раскрытии его высота подстраивается под высоту контента. Также мы сделаем анимацию при раскрытии - аккордеон будет раскрываться плавно, также добавим анимацию иконки. 📌 Полезные ссылки Готовый код из видео ➝ ...
Калькулятор на JS для расчета стоимости аренды авто / Пишем скрипт
Просмотров 2,1 тыс.2 года назад
🌐 Наш сайт: codelab.pro/ 💬 Группа в Telegram: t.me/codelab_channel 📋 Кратко, о чем это видео Во втором видео мы сделаем напишем скрипт для работы JS калькулятора стоимости аренды авто. Создадим объект, который будет хранить текущие настройки пользователя, а также содержать методы для расчета опций. Также сделаем обработчики для переключателей, ползунка и чекбоксов. Про проект Калькулятор считае...
Калькулятор на JS для расчета стоимости аренды авто / Разметка и стилизация
Просмотров 2,1 тыс.2 года назад
🌐 Наш сайт: codelab.pro/ 💬 Группа в Telegram: t.me/codelab_channel 📋 Кратко, о чем это видео В первом видео мы сделаем разметку и стилизацию для калькулятора. В этом калькуляторе будут использоваться такие типовые элементы, как переключатели, ползунки, чекбоксы, а также поля для вывода информации. 📌 Ссылки на источники Готовый код из видео ➝ codelab.pro/kalkulyator-rascheta-stoimosti-avto/ Стар...
Реализуем механизм Drag and Drop
Просмотров 1,1 тыс.2 года назад
🌐 Наш сайт: codelab.pro/ 💬 Группа в Telegram: t.me/codelab_channel 📋 Кратко, о чем это видео В этом видео покажу, как сделать перетаскивание элементов с помощью JavaScript. Этот механизм еще называют drag and drop (бери и бросай). На простом примере мы реализуем возможность перетаскивать синий квадрат в один их трех серых боксов. Вы поймете, как работает drag and drop, и в дальнейшем будете соз...
Всплывающее окно на чистом CSS
Просмотров 6562 года назад
🌐 Наш сайт: codelab.pro/ 💬 Группа в Telegram: t.me/codelab_channel 📋 Кратко, о чем это видео Чтобы сделать полноценное всплывающее окно на сайте не обязательно использовать JavaScript. В этом видео мы создадим модальное окно на CSS, ну и в конце добавим совсем немного JS для блокировки скрола. Работает всплывающее окно благодаря таким элементам, как checkbox и label. Chekbox сохраняет два логич...
Простой слайдер на JS
Просмотров 9732 года назад
🌐 Наш сайт: codelab.pro/ 💬 Группа в Telegram: t.me/codelab_channel 📋 Кратко, о чем это видео В данном видео мы создадим слайдер на JS с бесконечной прокруткой. Сделаем мы его без использования сторонних библиотек на чистом JavaScript. Да это и не понадобиться - ведь исходный код довольно простой, а программирование слайдера у нас займет всего 10 минут. В дальнейшем вы сможете поэкспериментирова...
Форма обратной связи / Отправка формы на почту без перезагрузки
Просмотров 16 тыс.2 года назад
Форма обратной связи / Отправка формы на почту без перезагрузки
Переключение на темную тему с JavaScript
Просмотров 8072 года назад
Переключение на темную тему с JavaScript
Как сделать анимированные табы на JS
Просмотров 2,1 тыс.2 года назад
Как сделать анимированные табы на JS
Простое бургер-меню на чистом JS за 25 минут
Просмотров 20 тыс.2 года назад
Простое бургер-меню на чистом JS за 25 минут
Форма обратной связи / Валидация формы на JS
Просмотров 10 тыс.2 года назад
Форма обратной связи / Валидация формы на JS
Форма обратной связи / Пишем основу на HTML и CSS
Просмотров 4,8 тыс.2 года назад
Форма обратной связи / Пишем основу на HTML и CSS
Создаем адаптивную галерею для сайта / Слайдер для фото на JS
Просмотров 1,3 тыс.2 года назад
Создаем адаптивную галерею для сайта / Слайдер для фото на JS
Создаем адаптивную галерею для сайта / Адаптивная сетка на CSS
Просмотров 2,7 тыс.2 года назад
Создаем адаптивную галерею для сайта / Адаптивная сетка на CSS
Делаем плавающий сайдбар на CSS / Липкий блок на CSS
Просмотров 1,7 тыс.2 года назад
Делаем плавающий сайдбар на CSS / Липкий блок на CSS
Пишем простую игру "Угадай число" на JavaScript
Просмотров 1,9 тыс.2 года назад
Пишем простую игру "Угадай число" на JavaScript
Как сделать ссылку некликабельной в CSS
Просмотров 2202 года назад
Как сделать ссылку некликабельной в CSS
Как подключить GitHub к Visual Studio code
Просмотров 89 тыс.2 года назад
Как подключить GitHub к Visual Studio code
Огромное тебе спасибо парень!!!
Меню слишком простое, без подменю. На Ютубе был классный украинский специалист, который выпускал качественный контент. Если делал меню, то многоуровневым, если что-то делал, то пошагово показывал каждый результат написанного кода и пояснял что зачем и как. К сожалению стал всё делать на украинской мове после начала СВО, жаль, очень жаль, что у нас в России контент делают ради контента, а не для людей.
Большое спасибо, удачи и продвижения )
С голосом было бы лучше !
пушка
А как сделать самому без плагина ,вот в чем вопрос
Классное видео, спасибо!
спасибо очень помог
Большое спасибо за сетку давай ещё сделай видеоролик поставь логин делай корзинку рабочим и категорию главную контакт и так далее ещё раз спасибо
Когда коммит пустой был - ошибка вылетала Вопрос - при переводе из публичного репозитория в приватный и обратно может что-то поломаться?
Автор, подскажи пожалуйста, как сделать, чтобы они были открыты изначательно.
Спасибо большое, очень помог
автору большое спасибо! Комент в поддержку ролика
если можете сделать видео сверстать шаблон магазина используя CSS Grid
Что делать если карточки не становятся в ряд? Они все вертикально идут почему-то
Спасибо
А как сделать так что бы кнопки переносили пользовтеля вниз? К примеру на в head были кнопки которые перенсрили поольщвртеля на вниз на какую то ифнормацию внизк
Спасибо! Очень пригодилось!!!
Отличное видео👍 помогло! 100500 видео пересмотрела, ничего не помогало
А как ты сделал так, чтобы столько кода появилась введя чисто <!DOCTYPE html>?
Дай тебе бог здоровья :D
крутой видос, всё предельно ясно!
Красава! Всё чётко и по сути)
Дай бог тебе здоровья!😄😍 Весь бутстрап перелистал, весь инет, один ты умница угадил!
Я наверно избранная, но меня просит синхронизировать изменения и вываливает кучу ошибок. А у всех остальных получилось.
как сделать маски для нескольких стран и менять их самому при нажатии на какую-то кнопку? Спасибо за видео!
если никто не пишет про 2х - то я стану первым. Поставил видео на 2х и выучил SCSS за 8.5 мин
добрый день, подскажите как исправить код чтобы меню появлялось с верху в низ.
Спасибо огромное за краткость! Без воды и прочих разговоров на час.
Красавчик бро респектую
Брат, а подскажи плиз, зачем вы все метод POST пишите вот так, всеми большими буквами? А если маленькими написать, работать не будет разве?
Братан, спасибо, ты - крут. Доходчиво и ясно. Дай Бог тебе здоровья!
Что-то народ в комментах не с того начинает учиться. Какой sass. Обычный цсс выучите
Этот препроцессор, а конкретно этот ролик по нему просто взорвал мой мозг, не мог даже подумать, что в стилизации веб-странички есть настолько много возможностей! Очень хочу и жду вторую часть видео про ветвления, циклы и функции sass, было бы очень интересно узнать больше о них именно на этом канале! Спасибо❤️
Искала именно это со вчерашнего дня, смотрела кучу видосов по 40 минут - везде вода, а тут: кратко, понятно, по делу. Спасибо!)
Единственный кто кратко и понятно все объяснил, спасибо за проделанную работу!
Не мог не сдерживать улыбки на протяжении всего ролика. Дикция, произношение слов и не самые корректные объяснения. Но за качественную реализацию респект 👍
Добрый вечер. Делала все точь-точь , но форма не работает. Поля даже при правильном вводе горят красным .Как исправить ошибку?
Спасибою Интересно как сделать тоже самое только в обратном порядке, когда у тебя уже есть готовый проект. И тебе его нужно как то выложить в GIT. Ещё интересно можно ли выложить проект в GIT не на первую страницу, а в конкретную папку GIT.
Символ " ₽ " если кто не знает можно прописать Правый Alt + 8 и тогда не понадобится искать, копировать и вставлять код символа.
При масштабирование в уменьшение ваш проект ломается. Картинка привязана к правому верхнему углу
как сделать чтобы output постоянно не выскакивал, он просто не нужен, но при каждой компиляции снова выскакивает и сердит, как это исправить
Жаль без PHP не работает.
огромное спасибо тебе добрый человек
Спасибо. Все получилось.
А если у меня открыто несколько папок в вс код , то он начианет следить за всеми изменениями в папках, как отключить чтобы он следил только за одной папкой проекта?
Здравствуйте, хотелось сказать вам огромную благодарность за это очень хорошее видео , без всякой воды , понятное и блин очень вам благодарна , я учусь в школе по IT и наш учитель не смог так донести как вы ! Скажите вы бы могли к примеру проводить онлайн обучение ? Просто вы огромный молодец 😊
Спасибо за отзыв, уже пообщались с вами в телеграмме. Если будут вопросы рад вам помочь🙂
спасибо
когда я нажимал Pull Рush и Push они много бесконечно загружается почему помоги брат
"на чистом css"