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

CSS Animation Effects В этом видео создается анимация с зеркальным эффектом на HTML и CSS. 👉 @seniorFront

Планируете начать настраивать среды разработки с Vite.js? 🚀Приходите 30 марта в 20:00 на урок, который пройдет в рамках онлайн-курса «Vue.js разработчик». Vite отлично подходит для сложных проектов, где требуется взаимодействие с сервером. В отличие от других инструментов, он легко встраивается через терминал и может быстро разворачиваться. Приглашаем всех желающих на открытый урок, на котором рассмотрим миграцию на Vite с Vue CLI, а также его преимущества: - Мгновенное время запуска сервера разработки - Горячая замена модулей из коробки - Простая конфигурация - Поддержка модулей ES из коробки 👉🏻 Чтобы записаться на урок, пройдите вступительное тестирование https://otus.pw/x24I/ Курс доступен в рассрочку. Реклама. Информация о рекламодателе на сайте www.otus.ru

Timeline Slider Concept Каждый элемент - это svg картинка. Логика переключения реализована в TypeScript коде. 👉 @seniorFront

Pizza Loader Это svg картинка, которая анимируется при помощи библиотеки gsap. 👉 @seniorFront

Node, Nest, Next, Express🤯 - пора бы всё объединить! Для этого мы создали отдельный уголок - Серверный JavaScript. Собрали всё, проверяй🔥

​Способы стать лучшим фронтенд разработчиком Дизайн - Прочитайте несколько книг по визуальному дизайну и UX, найдите наставника/учителя. - Figma, Master Sketch или Photoshop ваши близкие друзья в этом нелегком деле. - Соберите коллекцию ссылок, где вы сможете смотреть на качественные примеры работ и получать вдохновение, а также полезные советы и приемы. Эксплуатационная часть - Изучайте и применяйте на деле DevOps. Читайте книги, например, руководство DevOps. - Изучайте сервисы, которые помогут вам узнать, что происходит с производственной системой. Например, такие, как Datadog HQ, Splunk, NewRelic, PagerDuty и т.д. - Изучайте CircleCI, Team City, TravisCI и другие сервисы для сборки и тестирования. - Ознакомьте себя с процессом управления инцидентами и последующими отзывами об инцидентах. - Разработайте межрегиональное приложение и поймите, как сделать его стабильным. Качество - Научитесь проводить различные тесты: на интеграцию, производительность, единицу, интерфейс, проникновение, поиск и т.д. - Практикуйте тесты на проверку данных. - Изучите несколько фреймворков для тестирования той среды, в которой вы работаете и выскажите по этому поводу свое мнение. - Перед каждой функцией пишите тестовые примеры и определения. 👉 @seniorFront

Glowing Tabs Вёрстка создана на HTML и SCSS. Логика переключения табов реализована в JS. 👉 @seniorFront

background-repeat Свойство background-repeat управляет повтором фонового изображения. По умолчанию значение этого свойства — repeat, то есть фоновая картинка будет повторяться по вертикали и по горизонтали. Пример <div class="element"></div> .element { height: 100vh; background-image: url(images/pattern.png); background-size: 64px auto; } Получился красивый паттерн. Изображение повторяется по горизонтали и по вертикали. 👉 @seniorFront

Card Carousel Создано на HTML и CSS. При наведении изменяются CSS свойства svg картинок внутри карточек. Плавность достигается использованием CSS transition. 👉 @seniorFront

Сумма двух массивов Напишите функцию, которая принимает два массива и возвращает сумму из чисел этих массивов. Особенность этой задачи в том, что прежде чем складывать массивы, нужно составить число из элементов массива. Например [3,2,9] будет равно числу 329. Примеры: [3,2,9],[1,2] --> [3,4,1] [4,7,3],[1,2,3] --> [5,9,6] [1],[5,7,6] --> [5,7,7] Также, первый элемент массива может быть отрицательным: [3,2,6,6],[-7,2,2,8] --> [-3,9,6,2] # 3266 + (-7228) = -3962 👉 @seniorFront

В телеге появился канал, где платят за вёрстку макетов Figma. Нет, это не прикол. На канале каждый день публикуются макеты сайтов в Figma. Верстаешь их, сдаёшь и получаешь свои деньги. Подробности в закрепе. Залетай, пока не поздно!

Sticky Slider Navigation Слайдер, основанный на якорных ссылках, созданный на HTML, SCSS и JS. 👉 @seniorFront

Вам интересно, как Android-разработка выглядит на практике? Приходите на воркшоп: вместе с крутым экспертом вы пошагово создадите приложение для бронирования столиков в ресторанах. → Бесплатно, 27 марта в 19:00 Мск Спикер — Михаил Вассер, Head of Mobile в AGIMA и автор курса «Android-разработчик» в Яндекс Практикуме. Вы узнаете: — как выглядит среда разработки Android Studio, — из каких частей состоит приложение, — как настроить навигацию, — как работать с базой данных, — как прикрутить вёрстку и настроить элементы. В конце можно будет задать вопросы. → Зарегистрироваться на воркшоп

Parallax Login Form В этом видео создается форма входа в стиле Glassmorphism на Parallax фоне. 👉 @seniorFront

❔❔ JS-разработчик? А насколько хорошо ты знаешь Vue.js? JS-разработчик? А насколько хорошо ты знаешь Vue.js? ✔️ Пройди тест из 20 вопросов и узнай, сможешь ли ты учиться на курсе "Vue.js Developer" от OTUS. Если правильно ответишь хотя бы на 12 вопросов - сможешь поступить на курс по специальной цене! ⏰ Время прохождения теста ограничено 30 минут ✍️ПРОЙТИ ТЕСТ: https://otus.pw/hNaL/ Курс доступен в рассрочку. Реклама. Информация о рекламодателе на сайте www.otus.ru

Skeuo-alien-morphic loaders Загрузчики на HTML и CSS. В JS создана логика изменения цвета, зависящая от положения курсора пользователя. 👉 @seniorFront

Full Screen Portfolio Carousel Карусель, созданная без использования дополнительных библиотек, на HTML, CSS и JS. 👉 @seniorFront

🔥Тест по JavaScript от OTUS 🔥 Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на курсе - «JavaScript Developer. Professional» 👉 ПРОЙТИ ТЕСТ https://otus.pw/7SqX/ 💣 Пройдете тест и получите: ✔️ Живое общение с экспертами JavaScript-сообщества ✔️Получите видео-курс по Git в подарок ✔️ Лучшие открытые уроки прошлых наборов курса ✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+ ✔️ Скидку на прохождение онлайн курса «JavaScript Developer. Professional» Курс доступен в рассрочку. Реклама. Информация о рекламодателе на сайте www.otus.ru