-
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx
👨💻 Изучаешь Frontend? Я тоже!
idk Frontend - канал, в котором я максимально подробно конспектирую весь мой путь обучения с самого старта.
С меня:
— Сложная теория простым языком;
— Практические примеры и объяснения;
— Крутые викторины по JS;
— Работа над ошибками.
С тебя:
— Подписка @idk_frontend
Продолжим обучаться вместе! 👋
Предварительный просмотр изображения перед загрузкой
Реализовано на HTML, CSS и JS
🔗 Код: Codepen
👉 @FrontendPortal | #codepen
Vibration API. Заставьте устройство вибрировать
Метод Navigator.vibrate() пульсирует вибрационным оборудованием на устройстве
//вибросигнал длительностью 1 сек
navigator.vibrate(1000);
//последовательность: вибросигнал 0.5 сек, пауза 1 сек, вибросигнал 0.3 сек
navigator.vibrate([500, 1000, 300]);
Канал с полезными инструментами для верстальщика найден!
Навыки верстальщика - канал в котором ты найдешь:
▫️Макеты в формате фигма для верстки
▫️Полезные фичи по CSS & HTML
▫️Готовые решения по верстке
👉 Мы ждем тебя в нашем дружном комьюнити!
GLOBE — нейронка, которая собирает и структурирует информацию по теме. Можно сгенерировать полноценный курс, как в прикрепленном примере
🔗 Ссылка: https://explorer.globe.engineer/
👉 @FrontendPortal | #resourse
Ускоряем вашу верстку в разы
• В Figma — зажать клавиши (CTRL+SHIFT) и выбрать все нужные элементы кликом левой кнопкой мыши (ЛКП), затем скопировать (CTRL+C)
• В VS code — размножить курсор с помощью (CTRL+ALT +↓) или (ALT+клик ЛКП), затем вставить с помощью (CTRL+V)
👉 @FrontendPortal | #лайфхак
Индикатор прокрутки
Простоя реализация с помощью HTML, CSS и 7-строк кода на JS
🔗 Код: Codepen
👉 @FrontendPortal | #codepen
CSS-свойство mix-blend-mode
Свойство определяет режим смешивания цветов выбранного элемента с низлежащими слоями
.header {
mix-blend-mode: difference;
color: #fff;
}
Отражения изображений с помощью CSS-свойства box-reflect
Позволяет отражать содержимое элемента в одном определенном направлении(above, below, right, left). Второй параметр отвечает за смещение. И что еще интереснее, мы можем добавить градиент в качестве эффекта затухания, используя третий параметр.
Поддержка свойства составляет 94.92%
👉 @FrontendPortal | #CSS
Копируем код из видео
Selectext: Copy Text from Videos - расширение, которое позволяет копировать текст прямо из видео на Youtube и любом другом сайте
🔗 Ссылка: Google Сhrome
👉 @FrontendPortal | #resourse
Внимание, разработчики!
@TopSelectionWeb3
💼Хотите прокачать свой LinkedIn-профиль и привлечь внимание рекрутеров?
🚀Команда TopSel приглашает вас на еженедельный бесплатный Разбор профилей LinkedIn в прямом эфире, который состоится в это воскресенье, 7 апреля, в 14:00 по мск!
💻На этот раз мы сфокусируемся на профилях разработчиков: Frontend, Backend, Fullstack, iOS/Android.
Не упустите возможность улучшить свой LinkedIn профиль и увеличить шансы на трудоустройство!
Делитесь вашими профилями в комментариях под последним постом на канале @TopSelectionWeb3
В начале или середине своего пути, вам часто нужно смотреть на примеры кода и реализацию разных возможностей
⚠️ Это повышает вашу насмотренность, понимание кода, да и вы всегда можете сохранить заготовки себе на будущие проекты
Существует множество интересных сайтов. Но теперь есть специальный канал для этого: @code_ready
У вас будет все под рукой, с оформленным кодом, примерами, шпаргалками и без занудства
➡️ Так что подписываемся
🔥 Это база с 1400 вопросами с собеседований на Frontend разработчика. Фишка в том, что просчитана вероятность с которой вопрос буден задан и есть примеры ответов. Теперь можно легко получить оффер, подготовившись к самым популярным вопросам 😏
Читать полностью…
Как программисту успешно проходить собеседования?
Я Андрей Шопинский — Frontend-разработчик из крупного Российского банка.
⚠️ 5 апреля в 18:30 по МСК я проведу бесплатный эфир в своём Telegram-канале про Frontend-разработку!
На трансляции будут раскрыты следующие темы:
— Как представить себя и говорить о своих достижениях?
— Какие бывают красные флаги у работодателя?
— Как получить сочный оффер на хороший прайс?
🔥 Ты сможешь задать свои вопросы в прямом ЭФИРЕ!🔥
Подписывайся на канал, чтобы не пропустить!
Реклама. самозанятый Шопинский А.О. ИНН: 312834439322. erid: 2VtzqwNp1FL
Наглядное применение значения nowrap свойства white-space
Значение nowrap предотвращает автоматический перенос текста на новую строку внутри элемента, даже если текст не умещается в доступной ширине контейнера
👉 @FrontendPortal | #CSS
CSS-свойство caret-color
input {
caret-color: yellow;
}
Хочешь освоить или улучшить свои навыки во фронтенде?
В канале Frontend Developer есть всё необходимое — бесплатные курсы по фронтенду(HTML, CSS, JS , React и др.), готовый код, полезные ресурсы и статьи. А также чат, где мы помогаем друг другу и делимся опытом
Обучайтесь бесплатно вместе с @byFrontDeveloper
Делаем пипетку на JS
API EyeDropper предоставляет механизм для создания инструмента "Пипетка". С помощью этого инструмента пользователи могут брать образцы цветов со своих экранов, в том числе за пределами окна браузера
Код:
const button = document.querySelector('.btn');
const result = document.querySelector('.result');
const colorPicker = async () => {
const eyeDropper = new EyeDropper();
const {sRGBHex} = await eyeDropper.open();
result.innerHTML = sRGBHex;
}
button.addEventListener('click', colorPicker);
Выделение определенного текста в документе. Фрагменты текста
Текстовые фрагменты позволяют напрямую ссылаться на определенную часть текста в документе, используя определенный синтаксис во фрагменте URL
<a href="#:~:text=Frontend Portal">
Ссылка для выделения "Frontend Portal"
</a>
::target-text {
color: white;
background-color: blueviolet;
}
Каждый день мы просыпаемся и идём к компьютеру писать код, однако скоро майские праздники и придётся сделать сложный выбор между любимым делом и шашлыком.
И чтобы хоть немного накинуть очков написанию кода - мы запускаем телеграм-игру «Код сурка», чтобы вы могли блеснуть знаниями в веб-разработке и получить за это ценные призы.
Забрать их легко — достаточно отвечать на вопросы о веб-разработке (их будет аж 528) и набирать баллы за правильные ответы. Чем выше вы вскарабкаетесь в рейтинге — тем круче призы.
К слову о них:
— 1 место — профессия «Фронтенд-разработчик» или «JavaScript-разработчик» на выбор (в ускоренном формате)
— 2-3 место — фронтенд- или ui-инженерия, или любой из курсов для новичков на выбор
— 4-10 место — любой мидловый или джуновый курс на выбор
— 11-30 место — доступ к тренажёрам до конца июня 2024 г
— 31-100 место — доступ к тренажёрам до конца мая 2024 г
Ну и не менее приятное — все участники акции получат скидки на все продукты Академии.
Присоединяйтесь.
Сколько раз вы начинали новую жизнь с понедельника/ нового месяца или года?
Наверняка даже прописывали цели, составляли доски желаний, скачивали трекеры привычек и …
Сколько раз эти попытки терпели фиаско?
Есть 2 хорошие новости:
1. Вы не виноваты!
2. Человеческий мозг хорошо исследован, и найти истинную причину происходящего можно.
Константин Ковалёв — доказательный врач-психиатр, психотерапевт и член АКПП — использует в своей работе только научно проверенные методики, и объясняет простым языком причины возникновения многих состояний и возможные пути их решения.
Подписывайся на канал @Doctor_Kovalev и узнавай как на самом деле работает твой мозг
Реклама. Ковалев К.И. ИНН: 325502816794 Erid:2VtzquvSQCw
Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Проскочить на интенсив бесплатно
Начинаем 16 апреля.
🚀 Участвуй в True Tech Hack от МТС и поборись за общий призовой фонд в 1 500 000 рублей. Регистрируйся.
Приглашаем разработчиков, специалистов по Data Science, менеджеров по продукту, дизайнеров. Соревноваться предстоит в одном из двух треков, чтобы улучшить жизнь людей с особыми потребностями.
🏠 Трек 1. Улучшение клиентского опыта витрины МТС Live для пользователей с особыми потребностями
⭐ Трек 2. Разработка голосового управления для МТС Финтех на основе искусственного интеллекта для людей с ограниченными возможностями
Как пройдет True Tech Hack:
🔸 26 апреля – открытие хакатона и Q&A-сессия
🔸 27 апреля-12 мая – чек-поинты с экспертами
🔸 12 мая – окончание приема проектов
🔸 14 мая – полуфинал, защита лучших решений и объявление финалистов
🔸 17 мая – финал в Москве
True Tech Hack – твой шанс получить новый опыт, выиграть приз и сделать наш мир доступней и удобней для всех. Регистрируйся на хакатон до 25 апреля по ссылке.
🖥 Javascript - первый канал для FrontEnd разработчиков.
По контенту:
1. Готовые примеры c кодом: карусели, паралаксы.
2. Frontend курсы 2024 года бесплатно.
3. 2000 реальных задач с собесов с разбором от Senior разработчика.
Ещё мы собрали маст-хэв папку Frontend разработчика.
Подписывайтесь, такие знания в 2024-м году на вес золота: @javascriptv
Балансировка текста с помощью text-wrap: balance
Текст переносится так, чтобы наилучшим образом сбалансировать количество символов в каждой строке, что улучшает качество верстки и читабельность
Поддерживается только для блоков текста, содержащих ограниченное количество строк (в реализации Chromium используется до шести переносных строк), т.е. оно полезно для таких случаев, как заголовки или цитаты
h1, h2, h3, h4, h5, h6, blockquote {
text-wrap: balance;
}
💬 Вопрос с собеседования
Что такое DOM дерево?
Ответ:
Основой HTML-документа являются теги.
В соответствии с объектной моделью документа («Document Object Model», коротко DOM), Каждый HTML-тег является объектом. Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом. Все эти объекты доступны при помощи JavaScript, мы можем использовать их для изменения страницы
DOM – это представление HTML-документа в виде дерева тегов. Каждый узел этого дерева – это объект
Подробнее — https://learn.javascript.ru/dom-nodes
👉 @FrontendPortal | #собес
CSS свойство inset
Свойство inset заменяет собой сразу четыре свойства: top, right, bottom и left. Позволяет указать смещение позиционированного элемента сразу со всех четырёх сторон
div {
inset: 10px; /* Все стороны - 10px */
}
div {
inset: 10px 20px; /* Верхний и нижний отступ - 10px, правый и левый - 20px */
}
div {
inset: 10px 20px 30px; /* Верхний отступ на 10px, правый и левый — на 20px, нижний - 30px */
}
div {
inset: 10px 20px 30px 40px; /* Верхний отступ - 10px, правый - 20px, нижний - 30px, левый - 40px */
}
Поддержка свойства на данный момент составляет 94.45%
Спиннер с эмодзи
Реализован с помощью HTML, CSS и JS
🔗 Код: Codepen
👉 @FrontendPortal | #codepen
erid: 2VtzqvMwPD6
🔥 Бесплатный Code Review твоей верстки от Senior Frontend разработчиков.
Мы знаем, насколько сложно новичкам верстальщикам в начале пути, и поэтому мы создали Telegram-канал, чтобы вы могли верстать макеты и получать Code Review от профессионалов.
👉 Залетай и верстай с пользой, а не «в стол»
Подборка интересных web-игр с готовым кодом с CodePen
Tower Blocks — игра по строительству башен. Размещайте блоки с помощью кликов, касаний или пробелов
Бешеный бег доблестного кролика — игра по спасению малыша кролика от злого волка
Platform game engine — простой платформенный игровой движок с мячиком, есть возможность гибкой настройки карты
Шахматы с искусственным интеллектом — игра в шахматы против друга, против ИИ или ИИ сам против себя же
Крестики-нолики — простая игра в крестики-нолики написанная только на HTML(Pug) и CSS(SCSS)
COLORON GAME — игра с прыгающим мячом и столбы у которых нужно изменять цвет под цвет мяча
👉 @FrontendPortal | #codepen #подборка