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

У нас намечается небольшой движ 💣 С 25 по 28 января делаем реальный заказ (сайт автомобильных ковриков), используя HTML, CSS и JS. 4 дня будем писать код, подключать скрипты и многое другое. Сможешь хорошо попрактиковаться и сделать крутую работу для портфолио. Подробная программа: ✅День 1 – создание нового проекта – верстка шапки и подвала – подготовка проекта к адаптиву – настройка мобильных версий шапки и подвала ✅День 2 – работа с текстом, кнопками, карточкой, фоном – верстка двух блоков с общим фоном – адаптив данных блоков ✅День 3 – верстка блока отзывов, работа с js библиотекой – настройка слайдера для мобильных экранов ✅День 4 – верстка модального окна на чистом js – стилизация элементов формы (checkbox, выпадающий список) – адаптив модального окна Каждый вечер на трансляциях будем разбирать любые вопросы, связанные с разработкой, фрилансом или работой в студии. Переходи по ссылке, жми “запустить” и получи приглашение: telegram.me/gloacad…demy_bot

👉 @seniorFront

Waterfall transition Эффект "водопада" при переключении слайдов реализован при помощи изменения CSS свойства transform. 👉 @seniorFront

Pair of gloves Вам дан массив, состоящий из строк. Найдите парные строки и верните количество пар. Примеры: input = ["red", "green", "red", "blue", "blue"] result = 2 (1 red pair + 1 blue pair) input = ["red", "red", "red", "red", "red", "red"] result = 3 (3 red pairs) 👉 @seniorFront

Color Generation Assistant Генератор цветов, может быть полезен для подбора гармоничных цветов для сайта. 👉 @seniorFront

overflow-wrap Свойство overflow-wrap управляет переносом слов, которые не помещаются по длине в родительский элемент. Пример <p> Работал у нас на заводе как-то отменный профессионал — автомотовелофототелерадиомонтёр. </p> p { overflow-wrap: normal; } normal — длинные слова или строки с неразрывным пробелом не переносятся, даже если выходят за границы родителя (значение по умолчанию). break-word — слово разбивается в любом месте, если не помещается в размеры, заданные родительскому элементу. Правила мягкого переноса не учитываются. anywhere — как и при значении break-word, слово разбивается в любом месте, но во внимание берутся правила мягкого переноса. Это сильно заметно, если родителю в качестве значения ширины задано min-content. Браузер расставляет мягкие переносы на своё смотрение. 👉 @seniorFront

Search Box В этом видео автор создает объемный блок поиска, который расширяется при наведении. Всё это на чистых HTML и CSS. 👉 @seniorFront

Sign Up Login page Вёрстка страницы логина/регистрации , анимированная в CSS. 👉 @seniorFront

TODO list Список, реализованный на Pug и SCSS, анимации созданы при помощи ключевого слова keyframes. 👉 @seniorFront

​Promise.allSettled() Метод allSettled() — это один из статических методов объекта Promise. Его используют, когда нужно запустить несколько промисов параллельно и дождаться их выполнения. Promise.allSettled() очень похож на метод Promise.all(), но работает немного по-другому. В отличие от Promise.all(), Promise.allSettled() ждёт выполнения всех промисов, при этом неважно, завершились они успешно или с ошибкой. Создадим массив промисов и передадим его в Promise.allSettled(). Один из созданных промисов завершится ошибкой: const promises = [ new Promise(resolve => setTimeout(() => resolve(1), 3000)), new Promise((resolve, reject) => setTimeout(() => reject('error'), 2000)), new Promise(resolve => setTimeout(() => resolve(3), 1000)) ] Promise.allSettled(promises) .then(([response1, response2, response3]) => { console.log(response1) // { status: 'fulfilled', value: 3 } console.log(response2) // { status: 'rejected', reason: 'error' } console.log(response3) // { status: 'fulfilled', value: 1 } }) Если промис выполнился успешно, то на выходе получаем объект с двумя свойствами — status и value. status будет содержать строку 'fulfilled', а value — значение, которое передали при вызове resolve у промиса: { status: 'fulfilled', value: значение } Если промис выполнился с отказом, то на выходе получаем объект с двумя свойствами — status и reason. status будет содержать строку 'rejected', а reason — значение, которое передали при вызове reject у промиса: { status: 'rejected', reason: значение } 👉 @seniorFront

Нет времени объяснять – быстрее читай пост, а то будет поздно. Если ты только начинаешь изучать JavaScript и хочешь попрактиковаться на реальных задачах, тогда не пропусти это событие. С 21 по 24 января будем делать промо-страницу, на которой реализуем аккордеон, табы, плавную прокрутку. Поработаем с методом fetch, научимся добавлять данные на страницу порциями и многое другое. В конце составим схему развития до Junior JavaScript разработчика. На ней будут отражены все необходимые технологии, которые предстоит изучить. Каждый вечер будут трансляции с ответами на вопросы участников, а команда кураторов поможет с выполнением заданий. Переходи по ссылке, жми “запустить” и получи приглашение: telegram.me/gloacad…demy_bot

Text Animation Effects В этом видео автор создает эффект вращения блоков при наведении. Для этого он использует CSS свойство transform со значением rotate. 👉 @seniorFront

The Flying Robot Реализовано на HTML и CSS (с использованием препроцессора Less). 👉 @seniorFront

Чтобы быстрее стать профессионалом во frontend, практикуйся на примерах реальных проектов! На канале @uniquetemplates собраны макеты сайтов с такими элементами, как: ▫️GSAP-анимации ▫️фильтры, калькуляторы со сложной логикой ▫️личный кабинет с графиками и статистикой Подписывайся на @uniquetemplates, и учись реализовывать сложные интерфейсы по готовым макетам!

Letter Drop Демонстрация работы плагина, реализующего эффектное появление букв. Для работы достаточно просто применить функцию letterDrop на любом HTML элементе. 👉 @seniorFront

Различия между хорошим и нормальным программистом Хороший программист пишет код примерно с такой же скоростью, как и нормальный, однако имеет куда больше способностей к абстрактному проектированию. Хороший программист пишет более надежные программы. Частично из-за того, что он умеет правильно их проектировать, частично из-за того, что он просто умеет писать код без ошибок. Один хороший программист производительнее, чем два нормальных программиста. Помимо вопросов проектирования и надежности программ, есть еще один фактор: межличностная коммуникация. Чем меньше людей формируют команду, тем меньше времени будет тратиться на внутреннюю коммуникацию. Качество программиста прямо пропорционально тому, как он умеет работать с любым субъектом, который стоит выше его и который сообщает ему, что нужно программировать. Хороший программист умеет устранять недопонимание. Он не пишет так, как ему или заказчику показалось, а добивается от клиента четкого представления об ожидаемом результате.

Fancy Digital Clock Оригинальные часы, реализованные на React. 👉 @seniorFront

👉 @seniorFront