Senior Frontend - javascript, html, css. Страница 61

Awesome CSS Border Animation Автор создает анимированную границу, при помощи стилизации псевдоэлементов основного контейнера и создании бесконечной CSS анимации. Для создания анимации используется CSS keyframes. 👉 @seniorFront

Player/User Cards Верстка карточек на HTML и CSS. При наведении задействуются CSS трансформации. 👉 @seniorFront

Всем привет! Ребята создали чат-бота Masterhub, который рассылает разработчикам релевантные Frontend вакансии без спама. Настрой бота за 1 минуту и получай до 50 предложений в неделю, отобранных по твоим предпочтениям. @MasterHuBot

Helical dust Бесконечная анимация, созданная в JS. Все частицы отрисовываются на canvas. 👉 @seniorFront

Синдром самозванца есть у каждого из нас Симптомы синдрома: - Ваши успехи в работе вы объясняете различными внешними обстоятельствами. - Причины неудач и ошибок вы видите в своих собственных личных качествах. - У вас возникают проблемы с идентификацией себя, как участника проф. сообщества. Особенности, которые могут способствовать возникновению синдрома самозванца: Необходимость взаимодействия с другими специалистами Вы сталкиваетесь с коллегами, которые разбираются в чем-то значительно лучше вас. На этом фоне у вас могут развиться убеждения, что вы — ничего из себя не представляете. Неизбежность большого количества ошибок в работе. Значительная часть времени в написании кода тратится на его отладку. Если человек воспринимает свои ошибки как нечто ужасное, то проблем избежать не удастся. Отсутствие фидбэка в некоторых проектах. Часто руководитель склонен ограничиваться формальной оценкой труда сотрудника. Для неуверенных людей это выглядит как показатель неудовлетворенности со стороны руководителя.

Infinite draggable slider Слайдер, логика которого создана в JS. Анимации реализованы при помощи Three.js и webgl. 👉 @seniorFront

👉 @seniorFront

3D Preloader Загрузчик на HTML и CSS. Анимации созданы при помощи CSS keyframes. 👉 @seniorFront

Одно из главных в обучении фронтенд-разработке — это непрерывная практика и навыки, нужные бизнесу Чем раньше вы нырнёте с головой в продакшен, тем быстрее почувствуете себя уверенно на рынке труда. Изучите JavaScript, HTML и CSS, фреймворки React+Redux Toolkit и сопутствующую инфраструктуру на реальных кейсах, наполните портфолио готовыми веб-приложениями и пройдите оплачиваемую стажировку в проектах IT-кластера Ростелеком. 65% выпускников Хекслет получают оффер на первых 5 собеседованиях! Начните учиться прямо сейчас, чтобы оценить формат: https://clck.ru/gooGp

UriBuilder Создайте UriBuilder, который сможет добавлять query параметры к существующему URI. Он должен уметь добавлять и удалять параметры. Примеры: var builder = new UriBuilder('http://www.codewars.com') builder.params.page = 1 builder.params.language = 'javascript' // new builder instance to demonstrate pre-existing params. builder = new UriBuilder('http://www.codewars.com?page=1') builder.params.page = 2 // should return 'http://www.codewars.com?page=2' builder.build() // if you delete params then they will disappear from the url string delete builder.params.page // should return 'http://www.codewars.com' builder.build() 👉 @seniorFront

Image Gallery Верстка галереи с картинками. При наведении изменяется значение CSS свойства transform со значением scale. 👉 @seniorFront

Блочная модель Каждый элемент на веб-странице — это прямоугольник, к которому во время отрисовки браузеры применяют CSS-свойства. Чтобы конечные размеры элементов не были для вас сюрпризом и вы точно понимали, из чего они складываются, нужно разобраться с одной из основных концепций вёрстки — блочной моделью. Блочная модель, она же box model — это алгоритм расчёта размеров каждого отдельного элемента на странице, которым браузеры пользуются при отрисовке. Блочная модель состоит из нескольких CSS-свойств, влияющих на размеры элемента: - width — ширина элемента; - height — высота элемента; - padding — внутренние отступы от контента до краёв элемента; - border — рамка, идущая по краю элемента; - margin — внешние отступы вокруг элемента. 👉 @seniorFront

Digital Clock В этом видео автор создает часы, логику которых реализует в JS. Вёрстка создается с помощью svg картинок, элементы которых стилизуются и анимируются. 👉 @seniorFront

Cool Loader Оригинальный загрузчик на HTML и CSS. 👉 @seniorFront

Яндекс Практикум ищет код-ревьюеров на курс «Мидл фронтенд-разработчик». Ждём специалистов с опытом веб-разработки от двух лет. Важно, чтобы вы владели JavaScript (ES6+), знали React и работали с TS. Мы предлагаем: → Частичную занятость. → Доход, который зависит от количества проверенных работ — можете регулировать сами. → Удалённую работу с гибким графиком от 8 часов в неделю. → Скидки на курсы Практикума. Помогайте веб-разработчикам вырасти до уровня middle. Если вам интересно поработать с нами — оставьте заявку.

3D Cards Scene + Lightbox Анимированная 3D сцена, созданная без использования JS. 👉 @seniorFront

Яндекс Практикум ищет код-ревьюеров на курс по веб-разработке. Ждём веб-разработчиков с опытом от полутора лет. Мы предлагаем: → Частичную занятость. → Доход, который зависит от количества проверенных работ — можете регулировать сами. → Удалённую работу с гибким графиком от 8 часов в неделю. → Опыт менторства: научим давать развивающую обратную связь начинающим разработчикам и учить их совершенствовать код. → Доступ к курсу по веб-разработке и скидки на остальные курсы. → Постоянную практику кода и углубление знаний. Помогайте новичкам развиваться и учитесь сами — каждый день. Если вам интересно поработать с нами — оставьте заявку.

Вендорные префиксы Это приставки перед свойствами, селекторами, функциями или другими сущностями в CSS, позволяющие браузерам внедрять экспериментальные фичи до того, как они полностью стандартизированы и готовы для использования. Когда префикс отбрасывается — это знак, что всё готово. Основные браузеры используют следующие префиксы: -webkit- — Safari, Chrome, Opera 15+ и другие браузеры на основе движка WebKit или Blink. -moz- — Firefox и браузеры на движке Gecko. -o- — Opera 12 и раньше, на движке Presto. -ms- — Internet Explorer и старый Microsoft Edge 12–18. 👉 @seniorFront