- 256
- 1 624 652
Дмитрий Колотильщиков
Belarus
เข้าร่วมเมื่อ 4 ต.ค. 2019
Frontender[1.0] - Бесплатный курс по Frontend разработке
Здесь всё и все за айтишку.
статус: online 🟢
Здесь всё и все за айтишку.
статус: online 🟢
49. JavaScript - Запросы на СЕРВЕР. fetch, async, await, try catch finally, асинхронная функция
🟢 В данном уроке делаем запросы на сервер, используем async и await как замена классическому синтаксису promise. Защитим код с помощью try catch. Узнаем про асинхронные функции и поработаем с бесплатным сервисом с fake API JSONPlaceholder
➡️ таймлайн ➡️
00:00 старт
01:08 fetch и jsonplaceholder
04:44 анализ запроса в devtools
07:05 параметры fetch и headers
09:36 отрисовка полученных данных
12:04 async и await, асинхронная функция
15:15 try, catch и finally
18:04 финиш
▶ основной Telegram: t.me/Dmitry_Kolotilshikov
▶ приватный Telegram (Видео без VPN + ПОДДЕРЖАТЬ можно тут): t.me/tribute/app?startapp=sm6T
▶ GitHub: github.com/DmitryKolotilshikov
▶ Linkedin: www.linkedin.com/in/kolotilshikov
▶ Boosty: boosty.to/dmitry_ko
▶ Графический дизайн и анимация: t.me/getlogo
📎 PDF ФАЙЛ с кодом к каждому уроке в телеграм канале 📎
⚡️ вкусняхи ⚡️
🔑 Курс по GIT (одно видео): th-cam.com/video/h5SzR2CM6kQ/w-d-xo.html
🔑 CSS Flexbox (2 видео): th-cam.com/video/H9NLmrD7w4A/w-d-xo.html
🔑 CSS Grid (2 видео): th-cam.com/video/LpsE9GDPDBM/w-d-xo.html
🔑 Препроцессоры SCSS (2 видео): th-cam.com/video/6JGm-t-psiE/w-d-xo.html
🔑 SVG, svg-спрайты (2 видео): th-cam.com/video/RdlS_8qnyqw/w-d-xo.html
🔑 1 уровень - Верстка макета (8 видео): th-cam.com/video/9PjXCToSKag/w-d-xo.html
🔑 2 уровень - Верстка макета (8 видео): th-cam.com/video/VvKVx76a1Ko/w-d-xo.html
🔑 3 уровень - Верстка макета (10 видео): th-cam.com/video/z3PTjpOlcW0/w-d-xo.html
⚙️ Курс Frontender[1.0] разделен на 3 модуля:
1) HTML, CSS, SCSS, БЭМ, Flexbox, Grid, Bootstrap, GIT, FIGMA, верстка 3 макетов (100 уроков);
2) JavaScript, решение задач, написание нескольких приложений;
3) React, Typescript, Redux написание полноценного приложения;
JavaScript - Запросы на СЕРВЕР. fetch, async, await, асинхронная функция
📢 Автор: Дмитрий Колотильщиков
#js #frontend #javascript
➡️ таймлайн ➡️
00:00 старт
01:08 fetch и jsonplaceholder
04:44 анализ запроса в devtools
07:05 параметры fetch и headers
09:36 отрисовка полученных данных
12:04 async и await, асинхронная функция
15:15 try, catch и finally
18:04 финиш
▶ основной Telegram: t.me/Dmitry_Kolotilshikov
▶ приватный Telegram (Видео без VPN + ПОДДЕРЖАТЬ можно тут): t.me/tribute/app?startapp=sm6T
▶ GitHub: github.com/DmitryKolotilshikov
▶ Linkedin: www.linkedin.com/in/kolotilshikov
▶ Boosty: boosty.to/dmitry_ko
▶ Графический дизайн и анимация: t.me/getlogo
📎 PDF ФАЙЛ с кодом к каждому уроке в телеграм канале 📎
⚡️ вкусняхи ⚡️
🔑 Курс по GIT (одно видео): th-cam.com/video/h5SzR2CM6kQ/w-d-xo.html
🔑 CSS Flexbox (2 видео): th-cam.com/video/H9NLmrD7w4A/w-d-xo.html
🔑 CSS Grid (2 видео): th-cam.com/video/LpsE9GDPDBM/w-d-xo.html
🔑 Препроцессоры SCSS (2 видео): th-cam.com/video/6JGm-t-psiE/w-d-xo.html
🔑 SVG, svg-спрайты (2 видео): th-cam.com/video/RdlS_8qnyqw/w-d-xo.html
🔑 1 уровень - Верстка макета (8 видео): th-cam.com/video/9PjXCToSKag/w-d-xo.html
🔑 2 уровень - Верстка макета (8 видео): th-cam.com/video/VvKVx76a1Ko/w-d-xo.html
🔑 3 уровень - Верстка макета (10 видео): th-cam.com/video/z3PTjpOlcW0/w-d-xo.html
⚙️ Курс Frontender[1.0] разделен на 3 модуля:
1) HTML, CSS, SCSS, БЭМ, Flexbox, Grid, Bootstrap, GIT, FIGMA, верстка 3 макетов (100 уроков);
2) JavaScript, решение задач, написание нескольких приложений;
3) React, Typescript, Redux написание полноценного приложения;
JavaScript - Запросы на СЕРВЕР. fetch, async, await, асинхронная функция
📢 Автор: Дмитрий Колотильщиков
#js #frontend #javascript
มุมมอง: 288
วีดีโอ
48. JavaScript - Promise, цепочка вызовов, then, catch, finally, allSettled, race, any
มุมมอง 23912 ชั่วโมงที่ผ่านมา
🟢 Есть «создающий» код, который делает что-то, что занимает время. Например, загружает данные по сети. Есть «потребляющий» код, который хочет получить результат «создающего» кода, когда он будет готов. Promise (обещание) - это специальный объект в JavaScript, который связывает «создающий» и «потребляющий» коды вместе. Promise используется для обработки асинхронных операций и позволяет выполнять...
Пошаговая ВЕРСТКА всей страницы с нуля по макету (Уровень 3 - средний-сложный)
มุมมอง 72014 ชั่วโมงที่ผ่านมา
🟢 HTML, CSS, Flexbox, SVG Спрайты, Git, Accessibility, Lighthouse, БЭМ, препроцессоры - В уроке верстаем полноценную страницу с нуля и по шагам по макету в фигма. Уровень сложности = 3 (средний - сложный) ➡️ таймлайн ➡️ 00:00:00 обзор и подготовка проекта 00:24:45 header секция 01:23:48 hero секция 02:25:43 work секция 03:07:05 about секция 03:55:51 experience секция 04:24:11 testimonials секци...
Пошаговая ВЕРСТКА всей страницы с нуля по макету (Уровень 2 - средний)
มุมมอง 60816 ชั่วโมงที่ผ่านมา
🟢 HTML, CSS, Flexbox, SVG Спрайты, Git, Accessibility, Lighthouse, БЭМ - В уроке верстаем полноценную страницу с нуля и по шагам по макету в фигма. Уровень сложности = 2 (средний) ➡️ таймлайн ➡️ 00:00:00 подготовка проекта 00:12:43 header секция 00:50:59 hero секция 01:10:07 about секция 01:53:59 success секция 02:21:38 product секция 03:00:04 pricing секция 03:10:56 mobile menu ▶ Ссылка на мак...
Пошаговая ВЕРСТКА всей страницы с нуля по макету (Уровень 1)
มุมมอง 1.5K19 ชั่วโมงที่ผ่านมา
🟢 HTML, CSS, Flexbox, SVG Спрайты, Git, Accessibility, Lighthouse - В уроке верстаем полноценную страницу с нуля и по шагам по макету в фигма. Уровень сложности = 1 ➡️ таймлайн ➡️ 00:00:00 обзор макета 00:02:27 подготовка проекта 00:12:58 header секция 00:47:12 home секция 01:03:23 about секция 01:21:43 history секция 01:33:08 portfolio секция 01:47:06 contacts секция 02:11:40 мобильное nav men...
SASS/SCSS ПРЕПРОЦЕССОРЫ - КУРС в одном видео. NPM, Parcel, Package json. Теория и Практика
มุมมอง 848วันที่ผ่านมา
🟢 SASS (Syntactically Awesome Style Sheets) и SCSS (Sassy CSS) - это языки препроцессоров CSS, которые расширяют возможности обычного CSS и делают его более мощным и гибким. На сегодняшний день SASS это уже как мини-язык программирование, который обладает широким набором возможностей. ➡️ таймлайн ➡️ 00:00:00 блок 1 - старт 00:00:45 препроцессоры 00:04:29 Live SASS Compiler 00:05:22 отличия SASS...
47. JavaScript - setTimeout и setInterval. Планирование вызова, асинхронное выполнение
มุมมอง 17414 วันที่ผ่านมา
🟢 Мы можем вызвать функцию не в данный момент, а позже, через заданный интервал времени. Это называется «планирование вызова». setTimeout: позволяет вызвать функцию один раз через заданный интервал времени. setInterval: позволяет вызывать функцию многократно с заданным интервалом. ➡️ таймлайн ➡️ 00:00 старт 00:43 setTimeout 04:20 setInterval 04:47 манипулирование разметкой и счетчик 06:23 созда...
46. HTML, CSS, JavaScript - Image Slider. Адаптивный и бесконечный слайдер
มุมมอง 41014 วันที่ผ่านมา
🟢 Делаем простой, адаптивный и бесконечный слайдер изображений. Слайдеры есть почти в каждом приложении, и пример данного слайдера показывает фундаментальные вещи для реализации. Плюс ко всему кайфанете от процесса. Используем только нативные HTML, CSS, JS и свои руки. ➡️ таймлайн ➡️ 00:00 старт 01:27 обзор слайдера 02:29 разметка HTML 03:51 базовые стили CSS 05:20 отрисовка изображений JS 09:2...
45. JavaScript - TODO приложение на классах в ООП стиле
มุมมอง 65621 วันที่ผ่านมา
🟢 Пишем TODO приложение с нуля используя HTML, CSS, JavaScript. Приложение на классах в ООП стиле. Здесь мы закрепляем материал с классами в JS, на практике видим наследование и инкапсуляцию. Делаем декомпозицию кода, применяем делегирование событий, используем локальное хранилище и оборачиваем всё это в красивый дизайн. ➡️ таймлайн ➡️ 00:00 старт 01:21 обзор приложения 02:56 разметка HTML 04:4...
44. JavaScript - Принципы ООП, композиция и агрегация, функциональное и процедурное программирование
มุมมอง 32221 วันที่ผ่านมา
🟢 Объектно-ориентирование программирование (ООП) - Это методология или стиль программирования. Применяется для организации кода, чтобы код был более понятным, масштабируемым и удобным для сопровождения. ➡️ таймлайн ➡️ 00:00 старт 01:14 ООП 02:19 процедурное программирование 02:40 функциональное программирование 03:13 процедурное vs функциональное 05:22 ООП - моделирование реального мира 07:15 п...
43. JavaScript - Классы. Наглядный пример, решение задачи. Часть 2
มุมมอง 315หลายเดือนก่อน
🟢 Классы в JavaScript - это удобный способ работы с объектами и наследованием, который делает код более структурированным и читаемым. В объектно-ориентированном программировании класс - это расширяемый шаблон кода для создания объектов, который устанавливает в них начальные значения (свойства) и реализацию поведения (методы). ➡️ таймлайн ➡️ 00:00 старт 01:05 задача - условие 01:43 задача - реал...
42. JavaScript - Классы. БАЗА, поля, методы, get & set, private, static. Часть 1
มุมมอง 398หลายเดือนก่อน
🟢 Классы в JavaScript - это удобный способ работы с объектами и наследованием, который делает код более структурированным и читаемым. В объектно-ориентированном программировании класс - это расширяемый шаблон кода для создания объектов, который устанавливает в них начальные значения (свойства) и реализацию поведения (методы). ➡️ таймлайн ➡️ 00:00 старт 01:07 классы 03:25 базовый синтаксис 08:18...
41. JavaScript - Прототипы, proto, prototype, функция-конструктор
มุมมอง 205หลายเดือนก่อน
🟢 Прототипы в JS - механизм, с помощью которого объекты в JavaScript могут наследовать свойства и методы друг от друга. Каждый объект имеет внутреннюю ссылку на другой объект, называемый прототипом. Прототипное наследование - это возможность языка, которая помогает в этом. ➡️ таймлайн ➡️ 00:00 старт 00:59 proto - 1 пример 03:46 Object create 05:37 функция-конструктор 08:34 свой метод у всех мас...
40. JavaScript - This. Объект перед точкой. Потеря контекста. Call, bind, apply
มุมมอง 340หลายเดือนก่อน
🟢 В JavaScript ключевое слово this используется для ссылки на текущий объект, в контексте которого выполняется код. Другими словами this - это объект перед точкой. Контекст this определяется не только местоположением, но и способом вызова функции. ➡️ таймлайн ➡️ 00:00 старт 00:35 this и глобальный контекст 02:18 this и объект 04:11 стрелочные функции и потеря контекста 06:43 this и события DOM ...
39. JavaScript - РЕКУРСИЯ, когда функция вызывает сама себя
มุมมอง 277หลายเดือนก่อน
🟢 В процессе выполнения задачи в теле функции могут быть вызваны другие функции для выполнения подзадач. Частный случай подвызова - когда функция вызывает сама себя. Это как раз и называется рекурсией. ➡️ таймлайн ➡️ 00:00 старт 01:10 рекурсия 01:35 пример 1 - pow 05:47 пример 2 - sum 07:50 пример 3 - factorial 10:06 финиш ▶ ПОДДЕРЖАТЬ можно тут - Boosty: boosty.to/dmitry_ko ▶ Telegram: t.me/Dm...
38. JavaScript. ЗАМЫКАНИЯ (closure), лексическое окружение, область видимости
มุมมอง 283หลายเดือนก่อน
38. JavaScript. ЗАМЫКАНИЯ (closure), лексическое окружение, область видимости
37. HTML, CSS, JavaScript - Dice game. Приложение Игра в кости
มุมมอง 509หลายเดือนก่อน
37. HTML, CSS, JavaScript - Dice game. Приложение Игра в кости
36. HTML, CSS, JavaScript - TODO app advanced. Продвинутое TODO приложение (список задач)
มุมมอง 715หลายเดือนก่อน
36. HTML, CSS, JavaScript - TODO app advanced. Продвинутое TODO приложение (список задач)
35. JavaScript - Custom Events. Создаем свои события
มุมมอง 248หลายเดือนก่อน
35. JavaScript - Custom Events. Создаем свои события
34. JavaScript - Делегирование событий. Всплытие и погружение событий. Event delegation
มุมมอง 3112 หลายเดือนก่อน
34. JavaScript - Делегирование событий. Всплытие и погружение событий. Event delegation
33. JavaScript - TODO приложение (список задач)
มุมมอง 6702 หลายเดือนก่อน
33. JavaScript - TODO приложение (список задач)
32. JavaScript Events. События, addEventListener, mouse, window, browser. Event объект
มุมมอง 4142 หลายเดือนก่อน
32. JavaScript Events. События, addEventListener, mouse, window, browser. Event объект
31. JavaScript - Модули, Импорт, Экспорт, Async, Defer. Декомпозиция кода
มุมมอง 4122 หลายเดือนก่อน
31. JavaScript - Модули, Импорт, Экспорт, Async, Defer. Декомпозиция кода
30. JavaScript - DOM и CSS. Стилизация с JS, getComputedStyle, data атрибуты, getBoundingClientRect
มุมมอง 3122 หลายเดือนก่อน
30. JavaScript - DOM и CSS. Стилизация с JS, getComputedStyle, data атрибуты, getBoundingClientRect
29. JavaScript - DOM. Манипулирование разметкой. querySelector, getElementBy, innerHTML, append и др
มุมมอง 4012 หลายเดือนก่อน
29. JavaScript - DOM. Манипулирование разметкой. querySelector, getElementBy, innerHTML, append и др
28. JavaScript DOM - база. Навигация по элементам.
มุมมอง 3552 หลายเดือนก่อน
28. JavaScript DOM - база. Навигация по элементам.
27. Window, DOM, BOM. Глобальный объект. Browser API
มุมมอง 5042 หลายเดือนก่อน
27. Window, DOM, BOM. Глобальный объект. Browser API
26. Хранение данных в браузере. JSON формат. Local и Session storage
มุมมอง 3472 หลายเดือนก่อน
26. Хранение данных в браузере. JSON формат. Local и Session storage
25. JavaScript - Решение ЗАДАЧ. coderbyte, leetcode, CODEWARS
มุมมอง 3853 หลายเดือนก่อน
25. JavaScript - Решение ЗАДАЧ. coderbyte, leetcode, CODEWARS
Полный КУРС 2024 по GIT. Команды, терминал, NodeJS, NPM, CLI 🔥
มุมมอง 9183 หลายเดือนก่อน
Полный КУРС 2024 по GIT. Команды, терминал, NodeJS, NPM, CLI 🔥
Реально лучше стал понимать флекс, даже после лягушонка. Остальное - практика.
Урок мегакайф и полезный!! Жаль задачек к асинхронщине нету =(
@@leonhart7571 в следующих уроках несколько проектов, поэтому материал отлично закрепится)
🙃
кул
Топчик, такое мы смотрим =)
спасибо!!!!!!👍
Спасибо за урок, добрый человек, все очень понятно и вы очень приятно рассказываете!
@@negativeinfinity7583 🙏🙏🙏
Вот к чему я стремлюсь, супер урок 👍💪
почему не поставите автосохранение, мне кажется так удобнее🤔
@@amlrltd норм вариант, тут кому как удобнее)
Урааа, мне не нужно документацию читать 😂😂😂
😎👍
❤❤❤
▶ основной Telegram: t.me/Dmitry_Kolotilshikov ▶ приватный Telegram (Видео без VPN + ПОДДЕРЖАТЬ можно тут): t.me/tribute/app?startapp=sm6T ▶ GitHub: github.com/DmitryKolotilshikov ▶ Linkedin: www.linkedin.com/in/kolotilshikov ▶ Boosty: boosty.to/dmitry_ko ▶ Графический дизайн и анимация: t.me/getlogo
Кайф урок, приятные задачки! 3 самая легкая оказалась =) Спасибо тебе!
Кайф. Отличное видео
7:40 warning - предупреждение
@@vladislove1337 да)
Great explanation! 🎉 It's interesting to observe for your content😄 Looking forward to the next release!
@@gerompauel 🔥🔥🔥
th-cam.com/video/KneK0wzsYGc/w-d-xo.html Мой Новогодний бесконечный слайдер
😎👍
Спасибо за урок! Пока всё понятно))
@@Aleksandr_MrKy 🔥🔥🔥
▶ основной Telegram: t.me/Dmitry_Kolotilshikov ▶ приватный Telegram (Видео без VPN + ПОДДЕРЖАТЬ можно тут): t.me/tribute/app?startapp=sm6T ▶ GitHub: github.com/DmitryKolotilshikov ▶ Linkedin: www.linkedin.com/in/kolotilshikov ▶ Boosty: boosty.to/dmitry_ko ▶ Графический дизайн и анимация: t.me/getlogo
You lessons iš so clear. Now I study algorithms. After I will study with you content. Good luck🎉🎉🎉🎉
Дим, а как ты человечка закрепил Accessibiliti?
@@_Alhimik_ нужно клацнуть на чекбокс enable full-page accessibility tree, который находиться в devtools в elements во вкладке accessibility (там где вкладки styles, computed и тд)
@dmitry_kolotilshikov спасибо!
Успехов!
Спасибочки. А это макет не с курса по html и css?
@@ВладиславМарюхин-э4с да, это обьединенные уроки из первого модуля frontender[1.0]
▶ Ссылка на макет (Фигма): www.figma.com/file/QqRjLgoPQ43mdfzHl66Ua3/live-streaming-(design) ▶ GitHub (ПРОЕКТ): github.com/DmitryKolotilshikov/langing_live_streaming ▶ основной Telegram: t.me/Dmitry_Kolotilshikov ▶ приватный Telegram (Видео без VPN + ПОДДЕРЖАТЬ можно тут): t.me/tribute/app?startapp=sm6T ▶ Linkedin: www.linkedin.com/in/kolotilshikov ▶ Boosty: boosty.to/dmitry_ko ▶ Графический дизайн и анимация: t.me/getlogo
это нереальный труд и контент спасибо вам большое
@@amlrltd 🙏🙏🙏
Актуально, 2025)
😎👍
Сколько уровней сложности будет?)
@@RomanB-od1qn 3 уровня
Благодарю Вас за бесценный практический опыт во фронтенд разработке 💎Подскажите, пожалуйста, подойдёт ли для обучения вёрстке MacBook Air M3 с 16 Гб памяти RAM? Или
@@Anastazi_Mart спасибо🙏 Конечно данный макбук отлично подойдет, еще и фильмец параллельно можно запустить👌
@dmitry_kolotilshikov Супер!🤩 Думала, что для этой сферы нужна только версия Pro )
@@dmitry_kolotilshikov Супер! 🤩 Думала, что для сферы IT подходит только Pro версия )
Огонь!
Отличный урок! Прекрасное объяснение! Дим, подскажи как ты между экранами бегаешь, например с фигмы на редактор переключаешься?
@@_Alhimik_ спасибо, на маке переключение между экрана это просто свайп вправо-влево на тачпаде
@@dmitry_kolotilshikov Спасибо, но у меня винда)
@@_Alhimik_ с этим тоже можно жить)
@@_Alhimik_ ALT + TAB
@@ИльдусЗакиров-о6ы спасибо, это я знаю, просто у автора переключения плавно вбок, альт и таб просто уменьшает рабочие столы
спасибо вам за контент
@@amlrltd 🙏🙏🙏
😎👍
▶ Ссылка на макет (Фигма): www.figma.com/file/YV64X37MWjbjddYZpy16Nk/Alivio_stress_overcome ▶ GitHub (ПРОЕКТ): github.com/DmitryKolotilshikov/alivio_page ▶ основной Telegram: t.me/Dmitry_Kolotilshikov ▶ приватный Telegram (Видео без VPN + ПОДДЕРЖАТЬ можно тут): t.me/tribute/app?startapp=sm6T ▶ Linkedin: www.linkedin.com/in/kolotilshikov ▶ Boosty: boosty.to/dmitry_ko ▶ Графический дизайн и анимация: t.me/getlogo
▶ Ссылка на макет (Фигма): www.figma.com/design/EpAvCLMxW3XbuFx7TwsSrl/Landing_Aivazovski ▶ GitHub (ПРОЕКТ): github.com/DmitryKolotilshikov/aivazovski_page ▶ основной Telegram: t.me/Dmitry_Kolotilshikov ▶ приватный Telegram (Видео без VPN + ПОДДЕРЖАТЬ можно тут): t.me/tribute/app?startapp=sm6T ▶ Linkedin: www.linkedin.com/in/kolotilshikov ▶ Boosty: boosty.to/dmitry_ko ▶ Графический дизайн и анимация: t.me/getlogo
лайк и коммент для продвижения видео)
Приступила сегодня к изучению вашего курса. Мне понравилась то, как вы подаете информацию. Спасибо за возможность получить знания.
Wow, super suprise. Thaks 🎉
Спасибо за урок, и объяснение нововведений по использованию @use Очень полезное видео!
Ну что же предыдушие видео осилил, хотя руки и опускались когда глаза видели тот объём. и хотя уверен, я буду ещё туда часто наведываться ибо одно дело знать, и другое дело вспомнить, что же там было. Теперь приступим к этому видео. Спасибо автору за этот титанический труд.
@@ЭйвазАхмедов-щ6ц 🙏🙏🙏
спасибо!!!!👍
Hey!😀🖐☃❄🎅🎄 nice explanation! Happy New Year!
@@gerompauel Happy NY🙏
Спасибо за видео 😊
Как раз начал использовать препроцессоры, но столкнулся с проблемами компиляции. Компилирую при помощи отдельной программы-сервера Prepros но она платная и через каждые 20-ть минут работы вываливает своё окно поверх любых приложений в Windows блокируя ввод Кароч буду смотреть этот курс 👍
@@artyomgrigorev2186 👍👍👍
лайков и комментов к концу проекта всё меньше)
+1 урок, спасибо)
Очень хороший урок. Спасибо!
Дмитрий, пока что это самое лучшее и простое обьяснение ООП из всех что я видел (а их было немало). Спасибо за вашу работу.