8370
Сборник крутых и полезных готовых решений для вашего сайта. Здесь можно изучить реализацию понравившихся идей и применить их в своих проектах. Сотрудничество: t.me/the_artboss
CSS image slider w/ next/prev btns & nav dots
Слайдер изображений с кнопками и точками навигации. Написан с помощью CSS.
codepen.io
CSS-Only Countdown Clock
Часы обратного отсчета. Написаны с помощью чистого CSS.
codepen.io
⚡️ WebMentor - один из лучших каналов для веб-разработчиков
Канал ведёт опытный Frontend разработчик, который ежедневно публикует:
— готовый код, который можно легко добавить к себе в проект
— теорию / видеоуроки / заметки по JS
Поэтому, если ты хочешь стать востребованным специалистом, то обязательно подписывайся на @WebMentor
Text spirals out from opening portal at centre
Анимация текста, созданная на чистом CSS.
codepen.io
Accessible Custom Toggle Switch
Доступный пользовательский тумблер, показывает как можно разместить checkbox, чтобы он выглядел и вёл себя как toggle switch. Реализован с помощью CSS.
codepen.io
Animated Gradient Underglow
Анимированное градиентное свечение. Реализовано с помощью CSS.
codepen.io
Ищем 100 человек, которые пройдут 3 курса по IT бесплатно и дадут обратную связь!
Старая цена - 25 000 руб
Цена для тестовой группы - 0 руб 💯
👉🏻 Получить курсы тут
Sibling Gallery
Галлерея фотографий при наведение на одну из фото, она показывается крупнее. Написана на чистом CSS.
codepen.io
Animated text-shadow entrance
Текст с анимированным тенью, реализованный с помощью CSS и JavaSCript.
codepen.io
Confetti Button
Кнопка подписки, при нажатии на которую появляется конфетти. Реализована с помощью JavaScript.
codepen.io
Rolling Radio Buttons
Прокручивающиеся radio-кнопки, выполненные с помощью HTML, CSS и JavaScript.
codepen.io
Как вырасти от junior до middle?
Middle-специалист отличается не только опытом и уровнем владения технологиями, но и софт скилами.
Курс Яндекс Практикума «Мидл фронтенд-разработчик» составлен так, чтобы вы могли освоить и то, и другое а ещё:
•разработать мессенджер, используя только JavaScript, Typescript, CSS и API браузера;
•познакомиться с теорией и отработать её на практике в больших проектах;
•научиться брать ответственность за решения и вкладываться в общий результат;
•самостоятельно декомпозировать задачи и распределять время;•исследовать смежные сферы программирования, без которых невозможен фронтенд:
•информационную безопасность, прототипирование интерфейсов, командную работу, DevOps, ООП.
На всех этапах вас будут сопровождать опытные разработчики: мы не дадим просесть по учёбе и поможем выкроить время на образование. Вы будете практиковаться на реальных кейсах и положите в портфолио работающие проекты.
А карьерные консультации подготовят вас к разговору о повышении или помогут с поиском новой работы.
Начать учиться: https://practicum.yandex.ru/middle-frontend/
Text Reveal Mask
Маска для раскрытия текста, написана на чистом css.
codepen.io
Вам нравится читать контент на этом канале?
Возможно, вы задумывались о том, чтобы купить на нем интеграцию?
Следуйте 3 простым шагам, чтобы сделать это:
1) Регистрируйтесь по ссылке: https://telega.in/c/frontender_corner
2) Пополняйтесь удобным способом
3) Размещайте публикацию
Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.
Animated CSS Gradient Border
Анимированная граница градиента CSS. Написана на чистом CSS.
codepen.io
Pro Sidebar template
Шаблон боковой панели, реализован с помощью css и js.
codepen.io
Microsoft Homepage Clone
Адаптивная главная страница Microsoft, сверстанная с помощью CSS и JavaScript.
codepen.io
Stay Positive
Анимация изменения шрифта при нажатии. Написана на чистом CSS.
codepen.io
Overlapping Sushi Cards
Анимация перекрывающиеся карточек. Реализована с помощью JavaScript.
codepen.io
Rating
Выставление рейтинга в виде звезд, анимация реализована с помощью библиотеки GSAP.
codepen.io
Drunken Text
Анимированный движущийся текст. Реализован с помощью CSS и JS.
codepen.io
Popup: Nightly
Анимация всплывающего окна, реализована с помощью css и js.
codepen.io
NEON LOVE
Анимация двух цветных неоновых линий в виде сердца. Реализована с помощью JavaScript.
codepen.io
WebGL Apple Cards
Слайдер с анимацией карт, при клике на слайд увеличивает и затемняет его. Реализован с помощью JavaScript и CSS.
codepen.io
Hello
Привязка прокрутки и 3D параллакса, реализованная на чистом CSS.
codepen.io
Minimal keyboard
Мини-клавиатура с красивой анимацией нажатия на кнопки, реализованная с помощью CSS и JavaScript.
codepen.io
Text intro animation
Анимация текста, реализованная с помощью GSAP и SplitText3.
codepen.io
Agency website POC
Концепция главной страницы сайта агентства POC. Кастомный курсор динамически меняет иконку, подсказывая, что нужно сделать. Реализовано с помощью jquery.
codepen.io
📌 Бесплатно освойте профессию дизайнера с нуля. Вместе сделаем вам портфолио из 4+ работ с личной поддержкой от наставника.
Что вы получите?
— Фидбэк (мощный разбор всех ДЗ от куратора)
— Тусовка (личный кабинет с уроками + живой чат)
— Портфолио и экзамен (упакуем по урокам и проверим)
— Мастер-класс "как заработать на дизайне" и найти клиента
🔥 Будем делать: веб-дизайн, графический дизайн, анимацию интерфейсов.
→ Начать обучение бесплатно
Программа бесплатного курса:
— Обучение по Figma с нуля и 4+ дз с личным разбором
— Изучение основ дизайна (контент, сетки, композиция т.д.)
— Создание анимации интерфейса
— Все о профессии и доходе дизайнера (как найти клиентов и сколько можно заработать)
👉 Первый урок уже сегодня, кликайте сюда и забирайте все бонусы
CSS X-Men
Анимация при наведении на аватарку, реализована с помощью css и js.
codepen.io
