codepen.js
Сборник крутых и полезных фич для вашего сайта: готовый код на css и javascript, который можно вставить в проект. Подходит веб-разработчикам и дизайнерам. Сотрудничество: @noname_media Канал на бирже: https://telega.in/c/codepen_js
Show more
Network:11 416
Subscribers
+624 hours
+1047 days
+10030 days
Posting time distributions
Data loading in progress...
Find out who reads your channel
This graph will show you who besides your subscribers reads your channel and learn about other sources of traffic.
Publication analysis
| Posts | Views | Shares | Views dynamics |
01 Spinning Preloader — прелоадер. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 406 | 2 | Loading... |
02 Senior-разработчик создал крутейший канал про Frontend — просто, понятно, интересно.
Подписывайся: @frontend | 641 | 3 | Loading... |
03 Moving triangles — прелоадер. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 769 | 2 | Loading... |
04 Solar system — анимация описания планет солнечной системы. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 895 | 9 | Loading... |
05 – Ты результат своей работы видишь?
– Нет.
– А он есть.
И чтобы исправить ситуацию – пробуйте свои силы во фронтенд-разработке на двухнедельном подготовительном курсе «Frontend-разработчик» от Хекслета.
Здесь даже результат обучения виден сразу, ведь практика на курсе начнется уже в первый день. Еще вас ждут:
– 72 онлайн-урока;
– 4 живых вебинара;
– 24 часа поддержки в закрытом Telegram-чате.
А также отличная скидка – всего 990 рублей вместо 3 990!
⏰ Старт уже 13 июня! | 964 | 0 | Loading... |
06 Morphing Button — кнопка с анимацией. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 993 | 7 | Loading... |
07 Gradient emulated with lights — в поисках "Бу". Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 069 | 6 | Loading... |
08 Background Slider | Swiper — красивый слайдер с анимированным текстом. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 195 | 11 | Loading... |
09 Button hover effect — кнопка с интерактивным эффектом при наведении. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 201 | 8 | Loading... |
10 Link Hover Effect — эффекты при наведении. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 246 | 17 | Loading... |
11 CSS ::before Hover Effects — эффекты при наведении. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 280 | 17 | Loading... |
12 15 Incrementing Counter — реакции. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 257 | 13 | Loading... |
13 Track Packages Reproduction — шкала готовности заказа или доставки. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 265 | 17 | Loading... |
14 Radios With Sliding Focus — кнопки с анимацией выделением и перемещения между кнопками. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 339 | 15 | Loading... |
15 Circular Carousel MotionPath — колесо с боксами и возможностью вращения. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 372 | 1 | Loading... |
16 Дайте старт вашей карьере с нашим бесплатным курсом по JavaScript!
🎓 Курс включает 39 уроков, 46 упражнений и 129 тестов для закрепления знаний. Вы освоите создание программ с использованием основных конструкций языка, сможете составлять программы из нескольких модулей и научитесь анализировать ошибки в коде с помощью отладочной печати.
💡 Научитесь не только теории, но и применять знания на практике. Поддержка в «Обсуждениях» поможет вам разобраться с темами, которые вызывают трудности.
Обучение с самого нуля, с акцентом на практику. Подходит для начинающих программистов! Добро пожаловать в мир JavaScript😉 | 882 | 3 | Loading... |
17 Responsive CSS Powered Parallax w/ React && GSAP — моделька с параллакс эффектом. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 379 | 13 | Loading... |
18 Airport info — бегущая строка. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 402 | 21 | Loading... |
19 🚀 Поднимите свой опыт frontend-разработки на новый уровень.
👉 Приглашаем на вебинар: "Преимущества семантической верстки"
На открытом уроке вы получите ценные знания:
- Семантические теги: изучите строительные блоки HTML5.
- Влияние на сайт: постигните, как правильное использование тегов улучшает SEO и доступность сайта.
- Применение на практике: получите навыки, которые сможете применять в реальных проектах.
👩💻 Наш спикер, Анна Русяева – опытный веб-разработчик, поделится с вами лайфхаками и секретами мастерства.
📆 4 июня, 19:00 мск - отметьте дату в своем календаре!
🔑 Специальная цена на курс «Fullstack developer» для участников - расширьте свои возможности в IT с уникальным предложением.
=======
✨ Не упустите возможность! Регистрируйтесь сейчас https://vk.cc/cxedzc?erid=LjN8Jwwep
=======
🎁 Все участники online-трансляции получат в подарок 3 бесплатных урока, и полезные материалы для начинающих.
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963. | 882 | 1 | Loading... |
20 Shimmer Button — анимированная кнопка. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 434 | 19 | Loading... |
21 Magnetic Pastel button — анимированная кнопка. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 431 | 10 | Loading... |
22 Frontend теперь в Telegram!
Крупнейшая база материалов для фронтенд-разработки теперь доступна бесплатно:
Шаблоны с кодом – 477 шт.
Шаблоны Figma – 96 шт.
Слитые курсы по JS – 141 видео
Слитые курсы по HTML – 54 видео
Слитые курсы по CSS – 29 видео
Шпаргалки по JS – 341 шт.
Шпаргалки по HTML – 126 шт.
Шпаргалки по CSS – 211 шт.
Книги по фронтенду – 359 шт.
Статьи по фронтенду – 112 шт.
👉🏻 Изучать JavaScript, HTML и CSS стало намного проще — нужно просто быть подписанным на блог фронтендера | 900 | 8 | Loading... |
23 CSS Light Bulb — анимированная лампочка. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 449 | 4 | Loading... |
24 PointLight Demo — анимированная шары. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 477 | 9 | Loading... |
25 Responsive House — при передвижении слайдера изменяются значения дата-атрибутов. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 572 | 17 | Loading... |
26 Учить JavaScript можно бесконечно, да?
Вместо очередной теоретической задачки — вот вам практика:
Бесплатное обучение фронтенд-разработке с нуля с личной поддержкой от наставника
На канале Интенсивный JavaScript действующий тимлид уровня мидл+ помогает изучить фронтенд на практике
Когда-то он работал крупье в казино, а сейчас помогает новичкам попасть в IT и собеседует людей в свою команду
С 29 по 31 мая он проводит бесплатный интенсив, где поможет разобраться во JavaScript с нуля
Что получите на интенсиве
✔️ Напишете свой проект на JS: сайт с услугой по сборке ПК под заказ
✔️ Узнаете, как вам сейчас попасть в сферу, каких ошибок избегать, как не попасть в категорию новичков, которых не берут на работу
✔️ и получите пошаговый план изучения JavaScript с нуля до трудоустройства или стабильных 50 тысяч на фрилансе
Интенсив подойдёт, даже если вы новичок — всё объясняют так, чтобы поняла даже ваша бабушка
Подписывайтесь, осталось 30 мест
Учиться можно бесконечно, если не знать, куда копать
На интенсиве сократите время на изучение JavaScript и получите пошаговый план, чтобы уверенно проходить собеседования, пока 95% ваших начинающих коллег будут сидеть без работы
👉Участвовать бесплатно
🔥Подписывайтесь и сразу получите доступ к первому уроку | 1 023 | 0 | Loading... |
27 Monster Mash — игра. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 392 | 15 | Loading... |
28 ⚛️ Тест на навыки JavaScript-разработчика ⚛️
Ответьте на 30 вопросов и проверьте, обладаете ли вы middle-навыками по JavaScript, знаниями HTML/CSS и на сколько вы готовы к обучению на курсе — «React.js Developer».
За 4 месяца курса вы:
- Досконально изучите TypeScript и будете писать чистый и лаконичный код, применяя эту технологию
- Разовьёте и прокачаете навыки работы в в GraphQL, Apollo, Relay
- Освоите не только продвинутые возможности Redux, Redux-Saga, Redux-thunk, но и SPA-приложения и оптимизацию их для production
Время прохождения теста ограниченно 30 минут
👉 ПРОЙТИ ТЕСТ — https://otus.pw/9ay5/?erid=LjN8JtKqx
💣 Пройдите тест, получите скидку на курс, и записи уроков от преподавателей курса в подарок.
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963. | 988 | 1 | Loading... |
29 Sunrise over still lake — восход солнца. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 543 | 6 | Loading... |
30 Clock — часы. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 542 | 8 | Loading... |
31 Get Color Palette — генерация заднего фона на основе используемых цветов. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 556 | 14 | Loading... |
32 404paozinho — 404. Реализована с помощью CSS и JavaScript
#анимация #css #javascript | 1 506 | 10 | Loading... |
33 Как освоить одну из самых творческих профессий в IT с помощью ChatGPT в 3 раза быстрее?
Рассказываем на бесплатной открытой лекции для frontend-разработчиков или тех, кто хочет им стать
После нашего эфира вы узнаете:
– Что изменилось с появлением ИИ и что это значит для тех, кто хочет её освоить;
– Кому точно подойдёт это направление в IT;
– Как интегрировать нейросети в вашу работу уже сейчас, если вы действуйющий специалист;
– Какими инструментами и навыками нужно владеть, чтобы попасть в ТОП компании с хорошим соц. пакетом и делать 200+ т.р;
– Прямо в эфире покажем как ИИ помогает «не программистам» делать хороший Frontend
Кликай на ссылку и забирай подробную информацию вместе с классными бонусами 👈🏼
erid: LjN8KRw1p
ООО Зерокодер, ИНН 9715401631 | 1 467 | 5 | Loading... |
00:07
Video unavailableShow in Telegram
Spinning Preloader — прелоадер. Реализована с помощью CSS и JavaScript
#анимация #css #javascript
663c87bd652cdee8ad5bbffdec0b4168.mp41.52 KB
Посмотреть исходники
Senior-разработчик создал крутейший канал про Frontend — просто, понятно, интересно.
Подписывайся: @frontend
11.mp43.68 MB
12.mp46.35 MB
13.mp44.99 MB
14.mp42.38 MB
15.mp45.81 MB
00:07
Video unavailableShow in Telegram
Moving triangles — прелоадер. Реализована с помощью CSS и JavaScript
#анимация #css #javascript
a77decc0e619c6f04478edd4c9f2e60e.mp40.27 KB
Посмотреть исходники
00:12
Video unavailableShow in Telegram
Solar system — анимация описания планет солнечной системы. Реализована с помощью CSS и JavaScript
#анимация #css #javascript
1f7175e69e41223ecb5e4c84bcc8b732.mp42.06 MB
Посмотреть исходники
Photo unavailableShow in Telegram
– Ты результат своей работы видишь?
– Нет.
– А он есть.
И чтобы исправить ситуацию – пробуйте свои силы во фронтенд-разработке на двухнедельном подготовительном курсе «Frontend-разработчик» от Хекслета.
Здесь даже результат обучения виден сразу, ведь практика на курсе начнется уже в первый день. Еще вас ждут:
– 72 онлайн-урока;
– 4 живых вебинара;
– 24 часа поддержки в закрытом Telegram-чате.
А также отличная скидка – всего 990 рублей вместо 3 990!
⏰ Старт уже 13 июня!
00:07
Video unavailableShow in Telegram
Morphing Button — кнопка с анимацией. Реализована с помощью CSS и JavaScript
#анимация #css #javascript
014e0d185facd9af70b5c2d362830245.mp41.75 KB
Посмотреть исходники
00:07
Video unavailableShow in Telegram
Gradient emulated with lights — в поисках "Бу". Реализована с помощью CSS и JavaScript
#анимация #css #javascript
27b690abd5d7606d4a83e01deeb9cb23.mp45.31 MB
Посмотреть исходники
00:08
Video unavailableShow in Telegram
Background Slider | Swiper — красивый слайдер с анимированным текстом. Реализована с помощью CSS и JavaScript
#анимация #css #javascript
3e29db7200869c1221995704f8632b7c.mp44.95 MB
Посмотреть исходники
00:05
Video unavailableShow in Telegram
Button hover effect — кнопка с интерактивным эффектом при наведении. Реализована с помощью CSS и JavaScript
#анимация #css #javascript
a64ff9718776eb0b93468e80a832d4ae.mp40.58 KB
Посмотреть исходники
00:07
Video unavailableShow in Telegram
Link Hover Effect — эффекты при наведении. Реализована с помощью CSS и JavaScript
#анимация #css #javascript
ab648491d9cf07b427333a119ecd3f61.mp40.29 KB
Посмотреть исходники