Frontend Developer
2.27K subscribers
276 photos
168 videos
19 files
422 links
Обучающие видео, готовый код, полезные ресурсы и статьи

Наш чат — https://t.me/+1lXro3gcUwM2YmY6

Сотрудничество – @argo_chat
Download Telegram
jаvascript. Полное руководство, 7-е издание

Авторы: Дэвид Флэнаган
Год: 2021

🔗 Скачать книгу

👉 @byFrontDeveloper | #книги
👍7
This media is not supported in your browser
VIEW IN TELEGRAM
Подборка интересных web-игр с готовым кодом с CodePen

Tower Blocks — игра по строительству башен. Размещайте блоки с помощью кликов, касаний или пробелов

Бешеный бег доблестного кролика — игра по спасению малыша кролика от злого волка

Platform game engine — простой платформенный игровой движок с мячиком, есть возможность гибкой настройки карты

Шахматы с искусственным интеллектом  — игра в шахматы против друга, против ИИ или ИИ сам против себя же

Крестики-нолики — простая игра в крестики-нолики написанная только на HTML(Pug) и CSS(SCSS)

COLORON GAME — игра с прыгающим мячом и столбы у которых нужно изменять цвет под цвет мяча

👉 @byFrontDeveloper | #код #игры
🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
Автоматическое увеличение высоты textarea

Реализовано на HTML, CSS и JS

🔗 Код: Codepen

👉 @byFrontDeveloper | #код
🔥8👍3🤔1
Webpack ПОЛНЫЙ КУРС от А до Я. Вся конфигурация, Микрофронтенд, Монорепозиторий, Module Federation

В этом ролике мы реализуем полную конфигурацию Webpack. Настроим typescript, react, babel. Научимся работать со стилями и css modules. Рассмотрим большую часть возможностей webpack 5. Реализуем монорепозиторий с микрофронтендом на основе workspaces и Module federation

📺 Cсылка на курс: YouTube

👉 @byFrontDeveloper | #курсы #Webpack
👍10
This media is not supported in your browser
VIEW IN TELEGRAM
Переключаем режим редактирования для всего документа

Когда мы изменяем HTML, обычно нужно дождаться обновления страницы, чтобы увидеть изменения. Вы можете сэкономить время, используя designMode, который позволяет мгновенно изменять страницу

Чтобы переключить режим разработки, введите следующий код:
document.designMode="on"

👉 @byFrontDeveloper | #лайфхак
👍11
This media is not supported in your browser
VIEW IN TELEGRAM
Emmet Cheat Sheet — сайт-шпаргалка для Emmet. Здесь собраны все аббревиатуры и формулы, при написании которых раскрываются большие куски кода, а это очень ускоряет разработку сайта.

🔗 Ссылка: https://docs.emmet.io/cheat-sheet/

👉 @byFrontDeveloper | #ресурс
8👍2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Всплывающее уведомление с индикатором выполнения

Реализовано на HTML, CSS и JS

🔗 Код: Codepen

👉 @byFrontDeveloper | #код
👍11
Media is too big
VIEW IN TELEGRAM
Учим Flexbox, уничтожая зомби - это же надо было так заморочиться :)

Изначально ценник на этот курс/игру был $179, сейчас в свободном доступе

🔗 Ссылка: https://flexboxzombies.com/p/flexbox-zombies

👉 @byFrontDeveloper | #игры
5👍5🔥2
Мини курс по Fullstack-разработке [2023]

В этом плейлисте вы разработаете Fullstack приложение на NestJS, ReactJs, PostgreSQL,TypeScript.

📺 Cсылка на курс: YouTube

👉 @byFrontDeveloper | #курсы #Fullstack
🔥9👍2
Разработка веб-приложений на WordPress. 2-е издание

Авторы: Б. Мессенленер, Д. Коулман
Год: 2021

🔗 Скачать книгу

👉 @byFrontDeveloper | #книги
👍10🔥3🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Уверен, каждый начинающий HTML-верстальщик, время от времени задаётся вопросом, можно ли вкладывать какой-либо HTML-тег в другой. Например, можно ли вложить img или div в тег абзаца p

Чтобы не искать эту информацию в спецификации, есть полезный инструмент-шпаргалка по вложенности тегов. Выбираете дочерний и родительский теги и сразу получаете результат

🔗 Ссылка: https://caninclude.glitch.me/

👉 @byFrontDeveloper | #ресурс
👍11
This media is not supported in your browser
VIEW IN TELEGRAM
Animate.css — это библиотека готовых к использованию кроссбраузерных анимаций для ваших проектов

🔗 Ссылка: https://animate.style/

👉 @byFrontDeveloper | #ресурс
🔥83👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Animated Movie Card

Реализовано на HTMLи CSS

🔗 Код: Codepen

👉 @byFrontDeveloper | #код
7👍1
This media is not supported in your browser
VIEW IN TELEGRAM
JavaScript Visualizer 9000 — потрясающий инструмент, позволяющий наглядно видеть порядок выполнения JavaScript кода

Можно выбрать из предлагаемых примеров или запустить выполнение своего кода (думаю, часто встречали такие задачи - "в каком порядке выполнится код?")

Очень полезно для понимания JavaScript в целом

🔗 Ссылка: https://www.jsv9000.app/

👉 @byFrontDeveloper | #ресурс
11
Система контроля версий - GIT

Искали полный курс по GIT? Вы его нашли. Step-by-step на простых примерах вы узнаете все необходимое

📺 Cсылка на курс: YouTube

👉 @byFrontDeveloper | #курсы #GIT
🔥81
Retro Gadgets — это симулятор для инженера - программиста, где вы собираете совершенно любой гаджет. Программируете вы все это дело на языке Lua, во встроенном редакторе и после чего, загружаете код на виртуальный ЦП

🔗 Ссылка: https://www.retrogadgets.game/

👉 @byFrontDeveloper | #игры
3🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
TypeHero — платформа для изучения TypeScript на практике с готовыми задачами и возможностью создания собственных задач

🔗 Ссылка: https://typehero.dev

👉 @byFrontDeveloper | #ресурс
7
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация смены текста

Реализовано на HTML, CSS и JS

🔗 Код: Codepen

👉🏿 @byFrontDeveloper | #код
10
TIS-100 - это логическая игра, где вы выступаете в роли программиста на Assembler, пытающегося исправить код компьютерной системы с одноименным
названием

🔗 Ссылка: https://gamestracker.org/torrents/0-0-0-7488-20

👉🏿 @byFrontDeveloper | #игры
4👍4🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Гид по JavaScript для начинающих - это невероятно титанический труд, да еще и в бесплатном доступе. Гид написан на простом английском - дополнительная мотивация и возможность подтянуть свой английский:)

🔗 Ссылка: https://wesbos.com/javascript

👉🏻 @byFrontDeveloper | #ресурс
👍8🔥5🐳2
Git и GitHub для начинающих [2024]

В этом плейлисте ознакомитесь с системой контроля версий и научитесь с ней работать. Будете использовать Git, а хранить свои репозитории будете на GitHub. Подробно и на примерах покажут как работать с Git и GitHub

📺 Cсылка на курс: YouTube

👉 @byFrontDeveloper | #курсы
👍65