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

Cards menu concept Мобильное меню с уникальным раскрытием, анимированное с использованием TweenMax. 👉 @seniorFront

Valid Parentheses Создайте функцию, которая принимает строку, состоящую из скобок, и возвращает true, если все скобки закрыты правильно. Примеры: "()" => true ")(()))" => false "(" => false "(())((()())())" => true 👉 @seniorFront

CSS Washing machine Стиральная машина, сверстанная на HTML и SCSS. В JS реализованы функции запуска и открытия машины. 👉 @seniorFront

HTML теги <figure>, <figcaption> Элемент <figure> используется для вёрстки иллюстраций, изображений или другого автономного содержимого, которое может иметь поясняющую подпись в виде тега <figcaption>. Пример <figure> <img src="elephant-sunset.jpg" alt="Слон на фоне заката"> <figcaption>Слон на фоне заката</figcaption> </figure> Обычно тегом <figure> верстают изображение, иллюстрацию, кусок кода и тому подобное, на которые будут ссылаться из основного содержимого документа. При этом <figure> вместе со всем содержимым (картинкой, подписью) может быть перенесён в другую часть документа без нарушения целостности потока документа. 👉 @seniorFront

How to make Responsive Website using Html CSS & Javascript В этом видео автор пошагово создает адаптивный лендинг, после чего добавляет немного логики на JS для "оживления" страницы. 👉 @seniorFront

Isometric cubes animation Все элементы и их анимации реализованы при помощи библиотеки Three.js. 👉 @seniorFront

lab flask Сама колба - это svg картинка, а пузыри - HTML элементы, к которым применяется CSS анимация. 👉 @seniorFront

Пчелка Реализовано на vue. Состоит из svg картинок, к которым применяется анимация, реализованная при помощи библиотеки gsap. 👉 @seniorFront

Space Constellations Создано из svg картинки, к которой применена бесконечная анимация CSS свойства transform: rotate. 👉 @seniorFront

​Работа с сетью Передача данных в компьютерных сетях работает благодаря протоколам. Протокол — это набор правил, по которым работают все сетевые устройства. Сетевыми устройствами могут быть компьютеры, маршрутизаторы, концентраторы, сетевые шлюзы, файерволы, точки доступа и прочие. Данные от одного сетевого устройства к другому передаются пакетами, размер и состав которых определяется конкретным протоколом. У сетевого устройства обязательно есть адрес, это позволяет пакетам попасть куда нужно. Сеть устроена так, что пакеты постоянно пытаются найти сетевое устройство с целевым адресом. На сетевом устройстве можно прописать правила о том, что нужно делать c пакетами, как их обрабатывать или куда отправлять дальше по сети. Эти правила определяются настройками сетевой службы. Сетевая служба — это специальное приложение, иногда включённое в состав операционной системы, которое позволяет другим приложениям пользоваться сетевыми сервисами. Сетевые сервисы — это набор функций устройств, которыми можно воспользоваться через сеть, например, сервис печати или сервис обмена файлов с файловым хранилищем. Например, нам нужно передать файл по сети. На источнике файл разбивается на пакеты. Пакеты отправляются через сетевое соединение. Каждый пакет ищет целевое сетевое устройство самостоятельно. Когда пакеты попали на него, они собираются в файл. 👉 @seniorFront

Такое событие происходит всего несколько раз в год, не пропусти его. Если ты только начинаешь изучать JavaScript, то тебе просто необходимо попасть сюда. С 17 по 20 декабря будем делать фронт для интернет-магазина "Ozon" на чистом JS. Сможешь вдоволь попрактиковаться и сделать полноценный проект в портфолио. Коротко о программе интенсива: ✅ 1 День — Получим необходимые элементы со страницы — Научимся перехватывать браузерные события — Напишем скрипт Модального окна ✅ 2 День — Познакомимся с получением данных через API Fetch — Рассмотрим работу с Firebase — Получим первые данные с сервера ✅ 3 День — Фильтрация данных по категории — Вывод карточек товаров — Вывод карточек акционных товаров — Реализация поиска по названию ✅ 4 День — Реализуем корзину товаров — Реализуем отправку данных корзины Переходи по ссылке и получи приглашение: telegram.me/gloacad…demy_bot

Ribbon Shape using Html & CSS Only В этом видео автор демонстрирует, как можно создать сложную форму ленточки, используя абсолютно позиционированные псевдо элементы. 👉 @seniorFront

Windfall Island Это одна большая svg картинка, отдельные части которой анимируются в CSS. 👉 @seniorFront

Frontend-разработчик с нуля до PRO — это: - онлайн-уроки и вебинары ведущих экспертов из Play North, ТАСС, Goods и других компаний; - реальные кейсы для портфолио: интернет-магазин, CRM-система и другие проекты; - карьерные консультации и помощь в трудоустройстве. ⠀ На курсе вы научитесь: - верстать веб-страницы; - создавать интерактивные веб-приложения; - работать в системе контроля версий GIT и командной строке Bash; - применять основные алгоритмы и структуры данных в реальных проектах; - работать с макетами в Photoshop и Figma; - создавать серверные приложения с использованием Node.js и многому другому. ⠀ Новогодняя распродажа — скидки до 60% весь декабрь. 💥При покупке этого курса в декабре каждый получит скидки от партнёров: Литрес — 25% на все книги + 2 книги в подарок. Clinique — 40% на всё, кроме новогодних коллекций. КЭСПА — 10% на занятия c преподавателем. Переходите: https://clc.to/nvYvxg и выбирайте подарок себе или близкому человеку со скидкой до 60%

Walt Disney's MultiPlane Camera Сцена состоит из трех слоев, к которым задается перспектива при помощи CSS свойства perspective. 👉 @seniorFront

​Вредные советы для учителей программировать Итак, у нас есть сферический ученик в вакууме. Назовём его Василием. Василий попал в Ваши цепкие лапы, и стоит перед Вами с огоньком в глазах. Василий хочет познать HTML и Javascript. И тут Вы начинаете убивать его стремление учиться. Как? Случайно. Я слышал о многих идиотских методиках, которые «объясняют», как надо учить. Вот основные: Первое идиотское утверждение: Чем тупее люди вокруг Вас, тем больше Вам будут платить. Существуют люди, которые могут заявить что-то подобное на полном серьёзе. Мне не нужны специалисты, которые будут со мной конкурировать. Если Вы хорошо обучаете специалистов, то конкурировать с Вами не будут. Вас будут носить на руках, потому что Вы можете делать специалистов. Второе идиотское утверждение: Василий — дурак и не может научиться. Не существует такого понятия, как «не смог». Есть только «недостаточно старался». Василий не «дурак по умолчанию». Его просто не учили достаточно усердно. Люди — это один из самых важных ресурсов Вашего предприятия. В людей можно инвестировать, и они будут пушить больше коммитов, красивых и разных. Третье идиотское утверждение: Он просидел в ***ГУ последние пять лет, он уже знает, что делать. Тут, думаю, большинство прекрасно понимает, что это утверждение является просто откровенной чушью. Не ведитесь на это. И не позволяйте вешать себе лапшу на уши. 👉 @seniorFront

🔴 Бесплатный мастер-класс по верстке интернет-магазина! 🧔‍♂️ Фрилансер по жизни, фронтенд-разработчик с 13-ти летним стажем проведет мастер-класс по верстке интернет-магазина с подробным объяснением действий. ✅ Макет (Figma) для твоего портфолио и тренировок ✅ Анализ блоков макета, виртуальное построение конструкций ✅ Отзывчивая адаптивная верстка ✅ Работа с HTML SCSS JS GULP+WEBPACK FIGMA ✅ Чистый JavaScript (никаких jQuery, bootstrap и т.п.) ✅ Надежные решения и конструкции с учетом последующей натяжки на бэкенд (CMS) ✅ Приятная, не скучная атмосфера. Объяснение понятным языком. ✅ Розыгрыш стартового шаблона c наработками "Чертоги Фрилансера" v3 среди зрителей стрима ✅ Прокачка навыков быстрой и надежной верстки ☝️Подпишись на телеграм канал "Фрилансер по жизни" чтобы не пропустить старт стрима! 🤟 Обучайся, развивайся и помни - живи, а работай в свободное время!

3D CSS Flippy Snaps Сделано на React. При наведении на плитку изменяется значение её CSS свойства transform. Дополнительно плитки анимируются библиотекой gsap. 👉 @seniorFront