![FrontCoder](/img/default-banner.jpg)
- Видео 347
- Просмотров 1 569 053
FrontCoder
Россия
Добавлен 19 июл 2016
Канал посвящен урокам по Веб-разработке.
Основной упор делается не на теорию, а на практику!
На канале показана полная верстка сайтов с нуля. Лендинги и крупные интернет-магазины.
Есть практика по нативному JavaScript и Angular.
Учим Pug, Gulp и многое другое.
В общем много чего интересного. Подписывайся!
Основной упор делается не на теорию, а на практику!
На канале показана полная верстка сайтов с нуля. Лендинги и крупные интернет-магазины.
Есть практика по нативному JavaScript и Angular.
Учим Pug, Gulp и многое другое.
В общем много чего интересного. Подписывайся!
Пример реализации потока RXJS. Async Pipe
Всем привет. В данном видео я покажу вам пример реализации потока на rxjs с учетом нескольких операторов и async pipe.
Приятного просмотра.
Github проекта github.com/FARCER/frontcoder-channel (папка rxjs-flow-example)
-----------------------------------------------------------------------------------
Плейлисты моего канала, которые также могут быть вам интересны
Верстка сайта. Агрегатор онлайн курсов - ruclips.net/video/F_9UhWdTbGc/видео.html
Chrome DevTools - bit.ly/33IfApM
Учим программирование через игры - bit.ly/2CEGkvq
Верстка интернет - магазина - bit.ly/2CvE75h
Собери свою сборку на gulp4 - bit.ly/32IwCTa
Секреты Frontend Разработчика - bit.ly/2X7a3X6
Практикум JavaScript - bit.ly/2DPk3LK
Осно...
Приятного просмотра.
Github проекта github.com/FARCER/frontcoder-channel (папка rxjs-flow-example)
-----------------------------------------------------------------------------------
Плейлисты моего канала, которые также могут быть вам интересны
Верстка сайта. Агрегатор онлайн курсов - ruclips.net/video/F_9UhWdTbGc/видео.html
Chrome DevTools - bit.ly/33IfApM
Учим программирование через игры - bit.ly/2CEGkvq
Верстка интернет - магазина - bit.ly/2CvE75h
Собери свою сборку на gulp4 - bit.ly/32IwCTa
Секреты Frontend Разработчика - bit.ly/2X7a3X6
Практикум JavaScript - bit.ly/2DPk3LK
Осно...
Просмотров: 168
Видео
Верстка сайта с нуля. Агрегатор онлайн курсов. Часть 5. ФИНАЛ
Просмотров 3202 месяца назад
Всем привет. Верстаем большой адаптивный сайт - агрегатор онлайн курсов с нуля и до финальной выгрузки. Используемый стек технологий - Pug, SCSS, HTML, JavaScript, Gulp. Приятного просмотра. Github проекта github.com/FARCER/frontcoder-channel (папка agregator) Ссылка на макет www.figma.com/file/2CxseSo54rqvzkdYqQBUjX/Агрегатор-курсов?type=design&fuid=448761189095284356 Плейлисты моего канала, к...
Верстка сайта с нуля. Агрегатор онлайн курсов. Часть 4
Просмотров 2182 месяца назад
Всем привет. Верстаем большой адаптивный сайт - агрегатор онлайн курсов с нуля и до финальной выгрузки. Используемый стек технологий - Pug, SCSS, HTML, JavaScript, Gulp. Приятного просмотра. Github проекта github.com/FARCER/frontcoder-channel (папка agregator) Ссылка на макет www.figma.com/file/2CxseSo54rqvzkdYqQBUjX/Агрегатор-курсов?type=design&fuid=448761189095284356 Плейлисты моего канала, к...
Большая практика на Angular 17. Делаем мини трекер задач
Просмотров 1,1 тыс.2 месяца назад
Всем привет. В данном видео мы с вами делаем небольшой проект на Angular 17. В качестве хранения данных используем localstorage. Приятного просмотра. Github проекта github.com/FARCER/frontcoder-channel (папка trello) Плейлисты моего канала, которые также могут быть вам интересны Верстка сайта #10. PSD 2 HTML . Верстка сайта по продаже строительных материалов - bit.ly/2kIF3Ov Chrome DevTools - b...
Верстка сайта с нуля. Агрегатор онлайн курсов. Часть 3
Просмотров 2653 месяца назад
Всем привет. Верстаем большой адаптивный сайт - агрегатор онлайн курсов с нуля и до финальной выгрузки. Используемый стек технологий - Pug, SCSS, HTML, JavaScript, Gulp. Приятного просмотра. Github проекта github.com/FARCER/frontcoder-channel (папка agregator) Ссылка на макет www.figma.com/file/2CxseSo54rqvzkdYqQBUjX/Агрегатор-курсов?type=design&fuid=448761189095284356 Плейлисты моего канала, к...
RxJs. Операторы Zip, CombineLatest, MergeMap, SwitchMap, ConcatMap, ExhaustMap.
Просмотров 3823 месяца назад
Всем привет. В данном видео я расскажу вам о некоторых операторах RxJS, а именно Zip, CombineLatest, MergeMap, SwitchMap, ConcatMap, ExhaustMap. Изучать данные операторы мы будем на примере готовки шаурмы. Приятного просмотра. Github проекта github.com/FARCER/frontcoder-channel (папка rxjs-operators) Содержание: 00:00 - Вступление 05:30 - Оператор zip 13:10 - Оператор combineLatest 21:00 - Опер...
Верстка сайта с нуля. Агрегатор онлайн курсов. Часть 2
Просмотров 4523 месяца назад
Всем привет. Верстаем большой адаптивный сайт - агрегатор онлайн курсов с нуля и до финальной выгрузки. Используемый стек технологий - Pug, SCSS, HTML, JavaScript, Gulp. Приятного просмотра. Github проекта github.com/FARCER/frontcoder-channel (папка agregator) Ссылка на макет www.figma.com/file/2CxseSo54rqvzkdYqQBUjX/Агрегатор-курсов?type=design&fuid=448761189095284356 Содержание: 00:00 - Вступ...
Как придумать себе интересный пет проект?
Просмотров 1 тыс.3 месяца назад
Всем привет. У каждого разработчика возникает вопрос поиска пет проекта. Но это не так легко как могло бы казаться. В этом видео я хочу показать вам и рассказать как благодаря фантазии можно легко сделать интересный проект даже из банального TODO. Приятного просмотра. Github проекта github.com/FARCER/frontcoder-channel (папка todo-helper) Плейлисты моего канала, которые также могут быть вам инт...
Верстка сайта с нуля. Агрегатор онлайн курсов. Часть 1
Просмотров 1,3 тыс.3 месяца назад
Всем привет. Верстаем большой адаптивный сайт - агрегатор онлайн курсов с нуля и до финальной выгрузки. Используемый стек технологий - Pug, SCSS, HTML, JavaScript, Gulp. Приятного просмотра. Github проекта github.com/FARCER/frontcoder-channel (папка agregator) Ссылка на макет www.figma.com/file/2CxseSo54rqvzkdYqQBUjX/Агрегатор-курсов?type=design&fuid=448761189095284356 Содержание: 00:00 - Вступ...
6 проектов для новичков
Просмотров 3,9 тыс.2 года назад
Всем привет. Продолжаем нашу рубрику Challenges. В данном видео мы сделаем с вами сразу 6 уникальных проектов для новичков. Каждый проект уникален и в каждом мы узнаем что-то интересное и новое. Используемый стек технологий - Pug, SCSS, HTML, JavaScript, Gulp. Приятного просмотра. Содержание: 00:00 - Вступление 01:00 - Первый проект 42:35 - Второй проект 01:18:00 - Третий проект 02:09:10 - Четв...
Пять полезных онлайн сервисов для веб-разработчика #6
Просмотров 1,4 тыс.2 года назад
Всем привет. Представляю вашему вниманию подборку из пяти онлайн сервисов, которые могут быть полезны веб-разработчику. 1. tholman.com/obnoxious/ - Не любишь пользователей своего сайта, но не знаешь как им сказать об этом? 2. www.shapedivider.app/ - Фишки от дизайнера тебя достали? Теперь для тебя это легко 3. opensource.guide/ - Что такое Open Source и с чем его едят 4. devhints.io/ - Нужно бо...
FrontEnd Challenge #2 - #8. 7 разных проектов за 4 часа!
Просмотров 1,8 тыс.2 года назад
Всем привет. Продолжаем нашу рубрику Challenges. В данном видео мы сделаем с вами сразу 7 уникальных проектов. Каждый проект уникален и в каждом мы узнаем что-то интересное и новое. Используемый стек технологий - Pug, SCSS, HTML, JavaScript, Gulp. Приятного просмотра. Содержание: 00:00 - Вступление 01:35 - Первый проект. Небольшой блок с формой 49:58 - Второй проект. Страница с формой регистрац...
FrontEnd Challenge #1. Верстаем небольшой блок
Просмотров 1,3 тыс.2 года назад
Всем привет. Представляю вашему вниманию новую рубрику challenges. В данной рубрике мы будем с вами решать различные задания, включающие в себя html, css, js , использование API и фреймворков. В первом видео мы верстаем небольшой адаптивный блок, а также знакомимся с платформой. Содержание: 00:00 - Вступление 02:50 - Мой курс на udemy 03:30 - Начинаем challenge 25:42 - Начинаем адаптив 33:40 - ...
Пять полезных онлайн сервисов для веб-разработчика #5
Просмотров 2,8 тыс.3 года назад
Всем привет. Представляю вашему вниманию подборку из пяти онлайн сервисов, которые могут быть полезны веб-разработчику. 1. refactoring.guru/ru/design-patterns/catalog - отличный каталог различных паттернов проектирования, которые вы можете использовать в своей работе. 2. www.lambdatest.com/ - все еще тестируешь кроссбраузерность в сафари через своего друга? Тогда тебе сюда 3. htmlreference.io/ ...
Подробная инструкция по созданию своей сборки на Gulp 4. Необходимый минимум для комфортной верстки
Просмотров 7 тыс.3 года назад
Что такое Gulp? Это таск менеджер для выполнения часто используемых задач. Преобразование pug в html, scss в css, typescript в javascript. Оптимизация картинок. Создание спрайтов на лету. Минификация файлов и многое другое. Все то, что вы делали когда-то вручную теперь будет сделано за вас! В данном видео мы с вами научимся создавать любую сборку на gulp 4. Подключать любые плагину и работать с...
Обращение к подписчикам! FrontCoder 2.0
Просмотров 1 тыс.3 года назад
Обращение к подписчикам! FrontCoder 2.0
Пять полезных онлайн сервисов для веб-разработчика #4
Просмотров 2 тыс.4 года назад
Пять полезных онлайн сервисов для веб-разработчика #4
Пять полезных онлайн сервисов для веб-разработчика #3
Просмотров 2,1 тыс.4 года назад
Пять полезных онлайн сервисов для веб-разработчика #3
10 Gihub репозиториев, который должен знать каждый программист.
Просмотров 5 тыс.4 года назад
10 Gihub репозиториев, который должен знать каждый программист.
Пять полезных онлайн сервисов для веб-разработчика #2
Просмотров 2,4 тыс.4 года назад
Пять полезных онлайн сервисов для веб-разработчика #2
Gulp 4 сборка для верстки сайтов. Gulp 4 + Pug + SCSS + BrowserSync + Linters
Просмотров 8 тыс.4 года назад
Gulp 4 сборка для верстки сайтов. Gulp 4 Pug SCSS BrowserSync Linters
Боковое меню для вашего сайта. Aside-nav
Просмотров 3,1 тыс.4 года назад
Боковое меню для вашего сайта. Aside-nav
Гид для новичков: CSS Переменные. CSS Variables
Просмотров 1,8 тыс.4 года назад
Гид для новичков: CSS Переменные. CSS Variables
Github Users Search. Vanilla JS SPA. No comments. Only coding.
Просмотров 1 тыс.4 года назад
Github Users Search. Vanilla JS SPA. No comments. Only coding.
Пять полезных онлайн сервисов для веб-разработчика #1
Просмотров 3,1 тыс.4 года назад
Пять полезных онлайн сервисов для веб-разработчика #1
Поиск пользователей Github с помощью github API. SPA на Native JavaScript. Часть 4 Финал
Просмотров 1,7 тыс.4 года назад
Поиск пользователей Github с помощью github API. SPA на Native JavaScript. Часть 4 Финал
Поиск пользователей Github с помощью github API. SPA на Native JavaScript. Часть 3
Просмотров 1,5 тыс.4 года назад
Поиск пользователей Github с помощью github API. SPA на Native JavaScript. Часть 3
Поиск пользователей Github с помощью github API. SPA на Native JavaScript. Часть 2
Просмотров 2,5 тыс.4 года назад
Поиск пользователей Github с помощью github API. SPA на Native JavaScript. Часть 2
зачем на 17 ангуляре тебе модуль
То, что добавлена возможность использовать standalone компоненты не говорит что модули не нужны совсем
Сколько материала! Спасибо мужик! Я просмотрю все твои видео.👍
Добрый день. Спасибо! Рад, что вам нравится
Хорошее видео. Общая суть - писать код декларативно)
Спасибо за видео!
Огромное спасибо!
Небольшой блок верстаем 40 минут? Серьёзно?
Какую же невообразимую дичь ты здесь нагородил! Всего за 10 минут голова разоболелась до тошноты. Смотрю обучающие видосы каждый день, такую безумную херь еще поискать надо. КАк ни заставлял себя, всего 3 минуты не досмотрел и уже просто НЕ МОГУ. *Пошел блевать.
Да, классное видео!
Привет,сталкивался ли ты с проблемой обработки изображений gulp”ом.После сборки фотографии ломаются,неотображающихся на html и в целом через винду не открываются, пишет -неизвестный формат изображения и вес ровно в 2 раза больше этого изображен я становится
Привет. Нет, такого не было
@@Frontcoder разобрался,Это gulp 5 тупит, откатил до 4 и всё ок
С возвращением, будет опять кого новичкам советовать:)
Спасибо! Рад, что вам нравится!
Дорогие мои зрители и автор, ох и плохая же идея отключать рекомендованные настройки от разработчиков angular. И всё ради чего? В большом проекте этим можете себе ох как выстрелить в ногу! Учитесь правильно разрабатывать, если хотите попасть в большую компанию с большой зарплатой! Отключая настройки вы явно показываете отсутствие знаний API фреймворка. Если форма сложная со вложенной структурой используйте NonNullableFormBuilder. Проще создавать формы и меньше писанины. Цените свое время! Если форма статическия как в случае с логином, инициализируйте напрямую, а не в init-функциях!!! Форма ж простая! Опять же цените свое время и время других разработчиков. Уменьшайте ментальную нагрузку! Пишите минимальные решения! Сократив кол-во когда, браузер быстрее загрузить страницу! Используйте changeDetection OnPush! Да автор это объяснил и я хочу ещё раз акцентировать на этом внимание. Избежите ExpressionChangedAfterItHasBeenCheckedError. К тому же вы будете вынуждены разрабатывать используя лучшие практики производительных приложений! Используйте standalone components! Их не просто так завезли в angular. Используйте сигналы, если нет сложной обработки потоков. К тому же сигналы отлично работают без zone.js! Вырезайте беспощадно zone.js, если начинаете новый проект или есть старый без легаси библиотек. Уменьшайте объем bundle-a! Используйте template driven forms если формы с простой бизнес логикой и без вложенных уровней/объектов. Используйте standalone APIs такие как bootstrapApplication! Автор, ng new создаёт ведь со standalone! Используйте директивы для проверки прав доступа и уменьшения ментальной нагрузки! Читайте про лучшие практики (angular best practices)!!! Написал много потому, что вы мне не безразличны. Успехов ❤️🔥❤️🔥❤️🔥
Как давно вас не было, добрый день😊
Буду стараться радовать контентом чаще)
Привет, почему не используешь Dev Mode в Figma?
Привет. Так он же вроде платный стал, но я про него узнал только когда он платным стал. Не вижу смысла зачем он нужен
Спасибо, друг, очень помогло
Рад, что вам понравилось
Надеюсь,ты не забил)
Нет нет. На неделе выйдет видео обязательно. Просто загруженная неделя была.
@@Frontcoder извини,если утомил,сам понимаешь,хотелось б досмотреть)
Когда продолжение?
Будет выходить примерно раз в неделю. Раньше увы пока не могу выделить время. Попробую во время отпуска засесть и добить разом еще
@@Frontcoder Хорошо, а на бусти так же выходит? И да вопрос, ведь не обязательно в вашем курсе использовать pug?
Спасибо Вам за прекрасные уроки и Ваш Труд.
Спасибо за ваш комментарий. Рад, что вам понравилось!
советы и пожелания 1) больше размер шрифта 2) громче звук 3) для бОльших просмотров советую взять за пример канал улбитв, то есть проект должен быть максимально приближен к продакшен реди проекту, то есть приближен к тому что делаете на работе, понятно что это дольше, сложней и просто лень делать. вот мое мнение, советы и пожелания
Добрый день. Спасибо за ваш комментарий
я б не стал использовать предпроцессор pug
А почему? Чем он плох?
@@Frontcoder ну во первых постоянно соблюдать вложенность. не удобно во вторых проигрывает удобству gulp-file-include, ну или на крайняк panini
@@user-ke4cy3cl2sпанини сильно уступает по возможностям. В pug нет ничего сложного.
А когда продолжение?
Добрый день. Вторая часть уже есть на канале. Третья в самое ближайшее время
Спасибо, все четко и понятно 👍
Рад, что смог помочь!
CombineLatest, MergeMap, SwitchMap, ConcatMap не пригождаются часто? Лол.
Про отступы хочу вставить свои 5 копеек, лучше использовать gap, по сути аналог всех эти * > last-child, тем более поддержка хорошая. Да и по поводу сетки, грид это крутая вещь, flex для контента больше использую. Да и почему не используете css переменные ? var, их ведь можно получить даже в js чтоб потом где то применить, то есть значение нужно будет только поменять в переменной css, для бэкенд разраба кто будет вешать верстку это удобно, чтоб не лазить по js файлам
gap не всегда подходит. Например не везде нужен flex. Грид опять же не всегда и везде нужен. Пока что во всех проектах мне без него удобнее было. Исключение - какие то сложные сетки прям. Переменные - я знаю и понимаю их, но пока не было видимо в работе ситуаций, когда они были бы особо предпочтительнее scss
@@Frontcoder про переменные допустим заказчик захочет прикрутить темную тему для сайта, с css переменными будет очень просто это сделать. Грид для любых сеток лучше использовать, там куча всяких приколюх типа minmax и прочих функций.
@@thesweetlife843 так я и не отрицаю эти инструменты. Каждый инструмент нужен для определенных целей. В данном кейсе они мне не нужны.
Error [ERR_REQUIRE_ESM]: require() of ES Module D:\My_projects\Online_Course Aggregator ode_modules\del\index.js from D:\My_projects\Online_Course Aggregator\gulpfile.js not supported. Instead change the require of index.js in D:\My_projects\Online_Course Aggregator\gulpfile.js to a dynamic import() which is available in all CommonJS modules. at Object.<anonymous> (D:\My_projects\Online_Course Aggregator\gulpfile.js:5:13) { code: 'ERR_REQUIRE_ESM' } Вот что пишет после исправления версии del. Как это исправить, подскажите, пожалуйста?
Могу предложить попробовать 3 варианта 1. Удалить node_modules Папку и установить npm i заного 2. Взять проект с гитхаба и если он запуститься корректно то сравнить со своим и найти ошибку 3. Попробовать найти решение в гугле самостоятелно
У меня пишет: code: 'ERR_REQUIRE_ESM' и сборка не работает. Подскажите, пожалуйста, как исправить?
Ответил под другим комментом
А как откатить del до старой версии?
В файле package.json просто исправьте версию. Я в видео показывал. Иши скачайте сборку с гитхаб. Там посмотрите версию
Просмотрел для ознакомления, что нужно изучать. На мой взгляд полезно забегать в перед и на примере таких проектов видеть план дальнейших действий. Теперь начну смотреть базовые урок по angular, так как имею опыт в верстке и в js . Благодарю за практическую информацию как раз для развитие моего проекта очень полезно. Жду следующих уроков.
Не могли бы вы прикрепить ссылку на сам макет?
Конечно, прошу прощения что забыл про нее. Ссылка добавлена в описание
Gulp еще жив? Или это реинкарнация старого видео? Уже даже webpack умер. Vite сейчас В чём связь с фреймворком. Мы же сейчас за сборщик говорим
Gulp более чем жив. Больше млн скачиваний в неделю. Иногда бывают ситуации, когда нужна просто вёрстка. И нам нужно только оптимизировать некоторые процессы. Pug => html, scss=>css и др. Для этого gulp более чем достаточно. В любом случае данноый курс нацелен не на обучение gulp, а на верстку. Gulp лишь вспомогательный инструмент
Если скинешь адекватную сборку на vite которая покрывает все вопросы с svg спрайтами, оптимизацией картинок, настроенным pug, и прочими моментами что умеет делать gulp и его плагины, то буду очень благодарен !
@@mushnikov35 разве там нужна сборка? Вроде как всё из коробки автоматом работает и оптимизирует. Там не сборки, а плагины. vite-plugin-pug например
Всем привет друзья. Рад представить вам новое видео на канале. Надеюсь оно вам понравится. Прошу прощения за звук во второй части урока. В следующих видео такого не повторится. Приятного вам просмотра
Да он и в первой части не шикарный, к слову, как и в видео до этого
@@xMurieLLx Как только стану миллионером, сразу смогу позволить себе хорошее оборудование для записи. Пока что увы, прошу меня извинить(
@@Frontcoder Нормальные наушники steelseries с микрофоном, который качественно пишет звук, стоят 3-5 т.руб. И качество звука в разы лучше, чем яблочные
Даже какой-нибудь Fifine а Алика за 1000 будет в разы лучше даже steel series
Спасибо за совет. К следующему видео попробую на озоне найти его и опробовать.
А вообще кто то пишит на нем?
Если нужна просто вёрстка, то очень хороший инструмент
Что такое data-direction? Поиск яндекса об этом практически ничего не знает, можете себе представить? А автор херачит без объяснений! Что такое dataset? Это новичок в JS должен знать по умолчанию? Да плевать, лень объяснять, пляшем дальше... Это что угодно только не уроки. Это тупо стрим "смотрите как я умею". Сливаю в унитаз.
Спасибо, очень понятно и полезно!
Рад, что вам понравилось
Классно только потом ариа-роли и атрибуты пол дня прописывать придеться 🙂
const inputElement = document.getElementById('input-field'); inputElement.addEventListener('input', function () { const value = inputElement.value.split(''); const obj = new Object(); value.forEach((char) => { obj[char] = value.filter((el) => el === char).length; }); console.log(obj); }); // Вот на базовом JS, возможно 5 лет назад ещё не было ивентЛисенера по 'input', или я чего-то не понимаю P.s Лично мне хорошо был виден код в уроке
Жаль канал все-таки умер..
Он начинает воскресать)
Чел поздравляю у тебя уже тысячу лайков вместо 150😅
красавчик
Спасибо большое! Всё чётко и понятно, без воды!!!
Рад, что вам понравилось
Спасибо Вам за лаконичное решение, профессиональный код и полезный урок! 👍
Рад, что вам понравилось
Здравствуйте! Подскажите пожалуйста как вы изменили цвета тегов? Может это какой-то плагин?
Это работа ide
@@Frontcoder то есть это уже встроено в редактор? Или всё-таки какой-то плагин для тегов?
каша чес сказать
Большое Вам человеческое спасибо! В том числе - за то,что прикрепили ссылку на гитхаб-репозиторий
Рад, что смог помочь
Спасибо за урок. Ответ на 1:00 конечно желательно весь код. Лучше на github. Шрифт любой. Лишь было разрешение видео не меньше 720р
Не начинал и не буду, полностью согласен с вашим мнением, тупо копипаст, без скила.
когда впервые бутстрап появился я сразу не понял почему им так хвастуются. пытался гуглить причину ее крутости. везде было про некую сетку... при том что любая сетка делается вообще даже без ксс, а чистым хтмл тегом "<table>"... (это было 10 лет назад)
Классы удобнее через csstractor добавлять,понятно по коду что за чем написал в HTML по БЭМ очень слабо рассказал,большая часть видео по стилям а не про БЭМ
Объясните пожалуйста кто-нибудь как линковать страницы при разработка многостраницчного сайта на webpack pug
Bootstrap хороший чтобы изучать, но не создавать
Спасибо тебе за это видео! Благодаря ему я наконец-то понял, как работает шаблонизатор pug! Желаю продвижения канала)
Спасибо