Active Icon Navigation Menu

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

👉 @seniorFront

Repost Button with CSS Icon Sprite and Filtering

При выборе чекбоксов изменяются значения CSS переменных. При нажатии запускаются CSS трансформации.

👉 @seniorFront

Сравнение строк

Напишите функцию, которая проверяет, может ли строка быть воссоздана с использованием символов двух других строк.

Первый параметр функции - создаваемая строка.
Второй и третий - используемые строки

Функция не должна быть чувствительна к регистрам, а также должна использовать все символы из строк.

Примеры:
isMatching("email box", "b aIl", "Mo x e") return true
isMatching("bouh", "0b", "uh") return false
isMatching("kata", "kt", "aaa") return false

👉 @seniorFront

Loading...

Реализовано с использованием библиотеки THREE.js.

👉 @seniorFront

prefers-reduced-motion

Одно из значений директивы @media для проверки пользовательских настроек воспроизведения анимации.

Большинство современных операционных систем позволяют пользователю настраивать параметры анимации в настройках. Медиа-запрос prefers-reduced-motion позволяет определить, отключена или уменьшена анимация в системе и применять стили CSS, которые это учитывают.

С помощью prefers-reduced-motion можно замедлить или полностью отключить анимацию.
У prefers-reduced-motion есть два значения:
- no-preference — настройки анимации по умолчанию.
- reduce — анимация отключена.
В примере добавляем плавную прокрутку только для пользователей, у которых не отключена анимация на уровне системы.
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}

👉 @seniorFront

Navigation bar concept

Свёрстано на HTML и CSS. В JS прописана логика смены CSS классов при клике.

👉 @seniorFront

​Как повысить шансы на хороший найм и оффер

Каждый кандидат хочет стать заметнее среди других. Вот как это сделать:
Включайте в резюме то, что вас выделяет. Подумайте, что выделяет вас как человека среди других кандидатов. Это не обязательно профессиональный уровень или достижения на работе, но и что-то за пределами офиса. Если вы проходите собеседования в компанию или находитесь в процессе подготовки к интервью и у вас есть интересные факты о себе, добавьте их. Например, многие докладчики на первом слайде размещают что-то забавное о себе: один рассказывает про свои корни, другой упоминает, что он — ведущий подкаста.

Разместите ссылки на код и пет-проекты
Если у вас есть какие-то проекты, но вы стесняетесь, всё равно, добавляйте. Это лучше, чем если не будет ничего. Ведь код демонстрирует ваши реальные профессиональные навыки.

Избавьтесь от лишнего
Стоит пробежаться по резюме и убрать повторы, подробное описание нерелевантного опыта и воду. Не пишите, какую роль вы исполняли, лучше расскажите, что реально делали.

Узнайте о компании до первой встречи
Рынок кандидатов сейчас огромный, человек может ходить по нескольким собеседованиям, и куда-то могут взять даже без подготовки. Но если есть такая возможность и вы действительно хотите понравиться именно этой компании, изучите вопрос заранее.

Изучайте опыт публичных собеседований и решайте задачи
Чтобы лучше подготовиться к техническим собеседованиям, могу посоветовать решать задачи в LeetCode. Это улучшит ваши шансы пройти базовое техническое интервью. Ещё можно посмотреть публичные собеседования на Youtube, и по аналогии вы будете понимать, чего ждать, особенно если редко бывали на интервью.

Не обижайтесь, если вам задали слишком легкий или сложный вопрос
Я встречал, что люди расстраиваются, если им задали вопрос, не соответствующий их уровню. Однажды ко мне пришел сеньор, я спросил у него что-то простое, а он говорит: «Не буду на это отвечать! Я сюда пришел решать сложные архитектурные задачи». Не надо так делать. Это не добавит вам ценности как кандидату, но может негативно сказаться на дальнейшем решении

👉 @seniorFront

Ты в поиске работы и хочешь не только получать хорошую зарплату, но и участвовать в создании масштабных проектов и высоких технологий? В Росатоме открыто множество вакансий для специалистов самых разных профилей.

Профессиональный и карьерный рост, возможность развития и самореализации, программы обучения, стабильность и безопасность, возможность работать практически в любом городе России – всё это возможно в Росатоме. Выбери идеальную вакансию и отправь своё резюме по ссылке 👉🏻 https://vk.cc/cp5Quj.

Swaying photo gallery

В JS создана логика запуска CSS анимаций при скроле.

👉 @seniorFront

Mobile menu

Создано на чистом CSS. При выборе каждого элемента меню - радио-кнопки, задаются свои стили.

👉 @seniorFront

Simple CSS Sci-Fi Card

В этом видео создается верстка карточек и эффект при наведении. Сложная форма внутри карточки реализована при помощи CSS clip-path.

👉 @seniorFront

👉 @seniorFront

Photo Gallery

При нажатии на кнопки задаются значения для CSS свойства filter. Логика перемещения карточек реализована в JS.

👉 @seniorFront

​7 дней бесплатного обучения frontend-разработке!

Организовали для тебя бесплатный интенсив по frontend-разработке с практикой и куратором.

Что будет:

1️⃣ Создание веб-сайта на HTML и CSS
Мы научим тебя создавать стильные и функциональные веб-страницы с использованием современных технологий.

2️⃣ Оживление страницы с помощью JavaScript
Узнаешь, как добавить интерактивность и динамичность в свои проекты.

3️⃣ Использование фронтенд-фреймворка Angular
Узнаешь, как использовать этот мощный инструмент для создания масштабируемых и эффективных веб-приложений.

4️⃣ Подключение Backend и загрузка сайта на хостинг
Мы научим тебя основам работы с Backend'ом и покажем, как развернуть проект на хостинге.

5️⃣ Советы по доработке проекта
Получишь советы от опытных разработчиков, чтобы улучшить свой проект и достичь более высокого уровня качества.

🔥 А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.

👉 Участвуй бесплатно

Реклама. ИП Чернова О. А., ИНН:771399721044, erid:LjN8K1zZM

Card Carousel

Реализована на HTML и CSS. При наведении на карточку задействуются CSS трансформации.

👉 @seniorFront

Text Hover Effect

В этом видео создаётся оригинальный эффект при наведении на текст на CSS и JS.

👉 @seniorFront

Приглашаем на Yandex Scale 2023!

Ежегодная и самая масштабная конференция Yandex Cloud уже в пятый раз соберет экспертов индустрии. Эксперты компании поделятся новостями платформы, расскажут о новых сервисах, а также обсудят будущее облачных технологий.

Что вас ждет в этом году:

🚀6 актуальных тематических треков: Data Platform, Infra + K8s, Security, Digital Workplace, Severless, ML;
🔊главные новости платформы и индустрии;
🎙30+ выступлений экспертов, кейсы клиентов и партнеров;
🏢9 стендов на офлайн-выставке;
🤝Нетворкинг: не упустите возможность встретиться с руководителями разработки и задать им все интересующие вас вопросы.

📅 В этом году конференция будет проходить два дня:
25 сентября – онлайн: открытие;
26 сентября – онлайн и офлайн: главный доклад, основная программа и выставка.

Регистрируйтесь по ссылке.

Реклама. ООО "Яндекс" ИНН 7736207543

CSS Card Flip

Поворот осуществляется при помощи CSS transform и transform-style со значением preserve-3d.

👉 @seniorFront

Regex валидатор

Вам нужно написать regex, который будет валидировать пароль по заданным критериям:

1. Длина пароля как минимум 6 символов
2. Содержит строчную букву
3. Содержит заглавную букву
4. Содержит число

👉 @seniorFront

Alignment Buttons

Анимации реализованы при помощи библиотеки TweenMax.

👉 @seniorFront

Устроиться фронтендером в Яндекс за выходные

23–24 сентября устраиваем Weekend Offer Frontend. Решите фронтенд-квиз, а после за 2 дня пройдите технические секции и собеседования с командами. Если всё сложится хорошо — сразу же получите офер.

В мероприятии участвуют 17 команд: HR Tech, Поиск, Рекламные продукты, Yandex Cloud, 360, Яндекс Браузер, Бизнес-приложения, Умный дом, Yandex Infrastructure, Лавка, Еда, Недвижимость, Аренда, Авто.ру, CM.Expert, Путешествия и Буткемп. Вы сможете пообщаться с менеджерами и выбрать проект, который покажется самым интересным.

Нанимаем в офисы по всей России, помогаем релоцироваться внутри страны.

Узнать подробности и зарегистрироваться можно здесь.

Реклама. ООО "Яндекс". erid: 2VtzqvZLipH