23585
Изучаем Frontend. По вопросам сотрудничества: @adv_and_pr
Button with rotating gradient border
Кнопка с вращающейся градиентной рамкой – это эффектный веб-элемент, который был разработан и анимирован с использованием языков HTML и CSS. Этот элемент привносит интересное визуальное восприятие на веб-страницу и обращает на себя внимание пользователей благодаря своей креативной анимации.
🌐Ссылка на код
CSS Galaxy Button 🚀
Вёрстка создана на HTML и CSS. В JS создаются частицы с рандомными значениями, которые записываются в CSS переменные.
🌐Ссылка на код
Neumorphic Liquid Slider
Создано без использования библиотек. В JS устанавливаются значения и запускаются анимации.
🌐Ссылка на код
Когда вы опытный специалист, рано или поздно возникают вопросы: куда расти дальше и как? Ответы на них можно узнать в карьерной онлайн-лаборатории Практикума. Мы уже подготовили диджитал-реагенты и настроили приборы.
Пройдите бесплатное тестирование и узнайте, как развивать свою экспертизу. А мы предложим инструменты для роста и дополнительного дохода.
→ Определить свой вектор
CSS-only fluid slider
Создано с помощью препроцессоров Pug и SCSS.
🌐Ссылка на код
Navigation PageDesign
Вёрстка создана на Pug и CSS. Логика переключения табов реализована в JS.
🌐Ссылка на код
Magnetic Pastel button
Автор создал в JS listener на событие mousemove, в котором устанавливаются стили кнопки.
🌐Ссылка на код
Верстка, JS, Node.JS, 🤯 - пора бы всё объединить!
Для этого мы создали отдельные уголки:
👉 Логово фронтендера
👉 Логово верстальщика
👉 Логово Node.JS разраба
Собрали всё, проверяй🔥
Lightning CSS
Очень быстрый парсер, транспилятор, бандлер и минификатор CSS от создателя Parcel: поддерживает CSS-модули, добавляет вендорные префиксы на основе browserslist, интегрируется с webpack.
🌐Ссылка dev
Трюки при работе с SVG
SVG предоставляет довольно гибкий API для реализации интересных анимаций и эффектов в вебе. Вот несколько примеров, которые помогут вам в этом разобраться.
🌐Ссылка на примеры
Важное ко Дню разработчика: Яндекс исследовал, какие навыки нужны фронтендеру в 2023 году
Компания составила карту с самыми востребованными техническими навыками, на которой можно ещё и посмотреть, какие инструменты наиболее популярны, какие из них связаны друг с другом и какие hard skills используются чаще всего. Чем больше надпись, тем популярнее навык, а чем ближе надписи на карте друг к другу, тем ближе их контекст.
🌐Ссылка на карту
Анимации, управляемые прокруткой
Введение в новые нативные API для анимаций и демонстрация их возможностей.
🌐Ссылка
CSS Grid
Этот код представляет собой разметку на языке HTML и стили на языке CSS для создания веб-страницы. Он описывает структуру контента и его визуальное оформление. Ниже приведено объяснение структуры и используемых элементов.
HTML Разметка:
1. .main__wrapper: Это обертка для всего контента на странице.
2. main: Основной блок контента страницы.
—h1: Заголовок первого уровня, название страницы.
—aside: Боковая панель, содержит информацию о выпуске (журнальный формат).
—h2.title--large.main-title: Заголовок второго уровня, описание статьи.
— .main-text.multi-column: Блок текста с множественными колонками.
3. Блоки статей:
—Каждая статья представлена внутри тега a с атрибутами href и target для создания ссылок на внешние ресурсы.
—.item-with-image: Блок статьи с изображением.
CSS Стили:
Стили применяются к HTML-элементам и оформляют визуальное представление страницы. Они определены в разделе :root и в блоке селекторов для каждого класса, указанного в HTML.
—Переменные --font, --font-title, --font-sans-serif, --black, --black--acc,
—body определяет стили для всего текстового контента на странице.
—Стили для ссылок в блоках .main__wrapper, .item-with-image, .sidebar-item и др. задают цвета и эффекты при наведении.
🌐Ссылка на код
driver.js
Как направить внимание пользователя на определенные элементы на моей веб-странице, не используя сложные библиотеки или плагины?
Driver.js - это мощный и высоко настраиваемый движок на чистом JavaScript, который помогает управлять вниманием пользователя на странице. Он не имеет внешних зависимостей, легковесен, поддерживает все основные браузеры и позволяет создавать различные сценарии использования, такие как подсветка элементов, введение в функции, смена фокуса, модальные окна и т.д. Driver.js написан на TypeScript и имеет множество опций и хуков для манипулирования элементами при подсветке. Вы можете посмотреть демонстрации и документацию по Driver.js на его официальном сайте или на GitHub.
🌐Ссылка на фреймворк
Emoji Art Maker
Автор создает интерактивную веб-страницу для создания "мозаики" из эмодзи. Он определяет контейнер для эмодзи, который представлен большой строкой с различными эмодзи. Кроме того, код содержит чекбокс, который можно использовать для скрытия черных или прозрачных эмодзи. В футере предоставлена ссылка на веб-сайт EmojiArtMaker.com для создания более сложных эмодзи мозаик.
🌐Ссылка на код
Hexagonal Loading Animation
Оригинальный загрузчик, созданный на HTML и CSS.
🌐Ссылка на код
Привет! Мы в МТС активно поддерживаем ИТ-сообщество в России и запускаем всероссийскую олимпиаду по программированию с главным призом в 3 млн рублей.
Для кого? Для школьников, студентов и действующих ИТ-специалистов.
Что будет? Блок онлайн-заданий, митапы и мастер-классы, общение в закрытом Telegram-канале и финальный очный тур с программированием на скорость. Когда олимпиада завершится, мы создадим True Tech Community, где будем делиться полезными и эксклюзивными материалами для разработчиков.
А что еще? Финалистов ждет afterparty, фестиваль технологий, интерактив, квесты, карьерные стенды, где лучшие специалисты смогут получить оффер от МТС.
Регистрация уже открыта! Подробности по ссылке. Ждем тебя!
Реклама. ПАО "МТС". ИНН 7740000076. erid: LjN8KKQwJ
Holo Card
Создано с помощью препроцессоров Pug и SCSS. В JS реализована логика поворота карточки в зависимости от положения курсора пользователя.
🌐Ссылка на код
Content reveal cards with CSS scroll-linked animations
Отображение контента в карточках реализовано при помощи библиотеки scroll-timeline.
🌐Ссылка на код
⚡️Программа курса "JavaScript Developer Professional" в Otus помогает студентам достичь нового профессионального уровня в веб-разработке на JS, и вот почему:
✅После обучения вы сможете полноценно работать с современными JavaScript-фреймворками и библиотеками, а также понимать их основы
✅Вам будут доступны популярные паттерны проектирования, такие как Event Loop, Flux, Immutable, Virtual DOM, Dependency Injection и Observables
✅Вы научитесь грамотно подбирать инструменты для каждого проекта, а также тестировать его с помощью юнит-тестов на разных уровнях
✅Кроме того, вы сможете создавать современные веб-приложения, используя последние технологии в этой области
Для поступления в группу курса по спеццене проверьте свои знания и пройдите тест
🔥 Бонусы после прохождения теста:
- бесплатный курс по GIT в записи
- доступ к открытым урокам курса
- скидка на обучение при поступлении в группу
👉 ПРОЙТИ ТЕСТ
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963. erid: LjN8KVBaQ
Balloon Bears
Небольшая игра, созданная на React с использованием gsap.
🌐Ссылка на код
Neon Toggle Switch
Переключатель Neon, созданный на HTML и CSS.
🌐Ссылка на код
Перевёрстка блока новостей Vox news на современном CSS
Эксперимент Ахмада Шадида по применению гридов, медиавыражений от контейнера и других современных возможностей CSS.
🌐Ссылка dev
Репозиторий с решенными frontend проблемами
Алгоритмические задачи, задачи на верстку и React c объяснением
🌐Ссылка на гитхаб
Миграция миллионов строк кода Stripe на TypeScript
Мотивация к переезду на TS, сложности, процесс и впечатления после переезда.
🌐Источник
Perfectionist
ESLint-плагин с набором правил для сортировки всего: импортов, ключей объектов, JSX-пропов, енамов в TypeScript и других частей кода. Поддерживает автофикс.
🌐GitHub
7 дней бесплатного обучения frontend-разработке!
🔥 Организовали для тебя бесплатный онлайн-интенсив по frontend-разработке с практикой, обратной связью и куратором.
За 7 дней ты:
- Сверстаешь веб-сайт на HTML + CSS;
- Реализуешь функционал на JavaScript;
- Используешь фронтенд-фреймворк Angular;
- Подключишь Backend и загрузишь сайт на хостинг.
В итоге ты сверстаешь качественный сайт, который не стыдно добавить в портфолио или продать, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов.
Ухватить бесплатно такой ценный материал можешь по ссылке 👉 Frontend Start
После подтверждения участия мы вышлем тебе в подарок чек-лист: «45 мест для поиска работы», где собраны все ресурсы, на которых разработчики находят работу в престижных IT-компаниях.
Стартуем 18 сентября.
Реклама. ИП Чернова О. А., ИНН:771399721044, erid:LjN8KGsup
Swaying photo gallery
Автор создал анимированную фотогалерею с эффектом покачивания (swaying) при прокрутке страницы. Эффект покачивания применяется к фотографиям, как будто они находятся на ветре. Код также включает анимацию, которая активируется при загрузке страницы и при изменении размера окна браузера.
Для создания данной анимированной фотогалереи используется чистый JavaScript (без использования каких-либо фреймворков) и CSS для стилизации элементов.
🌐Ссылка на код
Random Password
Этот код представляет собой веб-страницу с генератором паролей. Визуальная часть использует ползунок для выбора длины пароля, чекбоксы для выбора включения верхнего и нижнего регистров, а также кнопку для генерации пароля. Визуальные элементы стилизованы с использованием CSS.
JavaScript-часть отвечает за функциональность генератора. Он использует объект randomFunc для хранения функций, которые генерируют случайные символы разных типов (нижний регистр, верхний регистр, цифры, символы). Также в коде есть функции getRandomLower и getRandomUpper, которые генерируют случайные буквы нижнего и верхнего регистра соответственно.
🌐Ссылка на код
CPC | TRAVEL
Автор создает веб-страницу с анимированным меню "бургер", используя библиотеку GSAP (GreenSock Animation Platform), и оформляет внешний вид страницы с помощью CSS. Вот основные детали:
1. Анимированное меню "бургер":
- При клике на элемент с id "burger" (предположительно, это иконка "бургер" для меню) переключается состояние переменной showMenu. Если showMenu становится true, то активируется анимация для показа меню, иначе анимация для скрытия меню.
- Анимации выполняются с помощью библиотеки GSAP. При показе меню, элемент с классом "overlay" (который вероятно представляет собой затемненный фон меню) изменяется с использованием анимации clipPath для создания эффекта развертывания. При скрытии меню, анимация восстанавливает clipPath обратно и после завершения анимации скрывает элемент "overlay".
2. Стили и оформление:
- Внешний вид страницы определен с использованием CSS. Установлен шрифт "Poppins" из Google Fonts, определены пользовательские переменные для цветов (черный, белый, коричневый и красный).
- Элементы списков стилизованы, включая структуру верхнего меню и его подменю.
🌐Ссылка на код