27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
🌟 Вот небольшой классный трюк в CSS! Добавление анимированного подчеркивания при наведении на текст
⏩Здесь на самом деле это не подчеркивание, а фоновое изображение, которое представляет собой линейный градиент сверху вниз. Первые 90% фона просто прозрачные, а нижние 10% - желаемый цвет
⏩Изначально ширина фона равна 0% и увеличивается до 100% при наведении
⏩Мы также меняем положение фона, чтобы при наведении подчеркивание увеличивалось слева, а при снятии наведения выходило справа
➡️ @FrontendPortal | #tutorial
Ограничиваем текст заданным числом строк c помощью CSS-свойства line-clamp
Если текст превышает указанное число строк, то текст обрезается и в конце добавляется многоточие. Cвойство работает только в комбинации вспомогательных свойств:
.text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient:vertical;
overflow: hidden;
}
🚀 Изучай HTML и CSS с нуля! 🚀
Присоединяйтесь к нашему Telegram-каналу
[/channel/made_in_html_css]
Здесь вы найдете:
Уроки с нуля – от основ к сложным темам.
Практические задания – применяйте знания на практике.
Советы от опытных разработчиков – получайте помощь и рекомендации.
Участие в проектах – накапливайте практический опыт.
Обсуждения – делитесь успехами и задавайте вопросы.
Присоединяйтесь к Made in HTML/CSS и начните обучение уже сегодня! 🌟
Создаем превью сайта при помощи Open Graph разметки
С помощью этой разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте вашего сайта
➡️ @FrontendPortal | #HTML #разное
Как работает Javascript: шпаргалка для разработчика
🔜 Источник
➡️ @FrontendPortal | #js
👨💻 Изучай фронтенд по мини-гайдам!
Канал WebTaverna ежедневно публикуют полезные обучающие мини-гайды в картинках, а также различные полезные шпаргалки и советы по HTML, CSS и JavaScript
➡️ Подписывайся на WebTaverna 😮
Новая фича в веб-разработке недавно стала стабильной во всех основных браузерах, и вот все подробности, которые помогут вам начать работу с ней 🌟
Всплывающие окна повсеместно распространены в Интернете, но до сих пор не было более простого способа их реализации.
Этот API предлагает чрезвычайно простой, гибкий и доступный способ реализации всплывающих окон!
➡️ @FrontendPortal | #CSS
🦋 Изучение TypeScript — Полное руководство для начинающих
Оригинал шпаргалки и перевод серии руководств для начинающих в TypeScript👇:
— Часть 1. Введение и примитивные типы данных
— Часть 2. Ссылочные типы данных
— Часть 3. Классы и интерфейсы
— Часть 4. Литералы и дженерики
— Часть 5. Строгий режим и сужение типов
➡️ @FrontendPortal | #TypeScript
Платные курсы больше не нужны!
Эти каналы помогут освоить Frontend - разработку с нуля ➡️➡️
🖥 Senior Frontend - JS, HTML и CSS
👩💻 Frontend Interview - как проходить собеседования
👩💻 Frontender Libs - библиотеки для фронтендеров
👩💻 Web Craft - только Web-разработка
📌 Практические задачи, разборы кода, тесты, вопросы с собеседований, полезные статьи
С таким набором легко зайдешь в IT💪
🈳 Извлечение компонентов React с помощью Cursor Composer
➡️ @FrontendPortal | #react
CSS table-layout
Свойство предназначено для управления режимом формирования ширины столбцов в таблице
/*Для корректной работы fixed обязательно должна быть задана ширина таблицы */
table {
table-layout: fixed;
width: 100%;
}
/* обрезаем текст, не влезающий в ячейку */
td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Что будет, если собрать в одном месте Frontend-разработчиков из разных компаний? 🔥
21 сентября мы сделали это на A?.Frontend Day! В Москве и онлайн собрались сотни специалистов, чтобы погрузиться в мир IT, узнать что-то новое и поделиться своим опытом.
📢 Ключевые моменты дня:
— Вадим Царегородцев из Ostrovok.ᅠru рассказал, как с помощью Valibot сделать валидацию данных в JavaScript не только гибкой, но и безопасной.
— Сергей Попов из Skillbox поделился опытом преодоления проблем при внедрении изменений в компании.
— Никита Мамизеров объяснил, как внедряли BDUI в Альфа-Онлайн и какие вызовы пришлось преодолеть.
— Никита Ульшин из Т-Банка рассказал о паттернах отказоустойчивости, которые помогут обеспечить стабильную работу приложений.
— Андрей Смирнов из X5 Tech рассмотрел карьерные ловушки для тимлидов и объяснил, как их избежать.
— Евгений Смирнов из Альфа-Банка провёл дискуссию о том, как ИИ и Copilot меняют разработку и что ждёт программирование в будущем.
И это только часть того, что происходило на A?.Frontend Day! А ещё были квизы, розыгрыши подарков и афтепати с нетворкингом.
Хотите увидеть, как это было? Переходите по ссылке и смотрите подробный отчёт с мероприятия!❤️
Свойство scroll-padding
Позволяет остановить прокрутку на определённом расстоянии от края контейнера
Можно воспользоваться сокращённым свойством scroll-padding или альтернативными ему более конкретными свойствами scroll-padding-*
➡️ @FrontendPortal | #CSS
🈳 The React Handbook — отличный источник после изучения официальной документации по React
Основные темы включают:
— Frameworks & Build Tools
— Project Standards for High-Quality Code
— Ecosystem
— Accessibility & Semantics
— Styling & UI Libraries
— Proficiency with the Hooks API
— State Management in React Applications
— React Performance & Optimization
➡️ @FrontendPortal | #react
⚡Узнайте об актуальных инструментах веб-разработки в 2024 году, последних тенденциях и лучших практиках в разработке фронтенда (React, Vue 3, Svelte) и бэкенда (C#, ASP.NET)!
🔥17 октября в 20.00 мск приглашаем на открытую конференцию "Эффективная веб-разработка в 2024 году: новинки в React, Vue и ASP.NET", на которой обсудим:
✅ React, Vue 3 и Svelte: ключевые обновления в этих фреймворках, которые упрощают создание и поддержку кода. Преимущества и недостатки каждого фреймворка;
✅ Новые возможности .NET 8/9: улучшения в C# и ASP.NET;
✅ Интеграция с фронтендом: продемонстрируем, как легко создавать и взаимодействовать с современными фронтенд-технологиями.
👉Регистрация https://otus.pw/mPGFC/?erid=LjN8KEnnV
🎁Бонусы участника: Карта развития навыков специалиста ASP.NET и Базовые операторы в JavaScript
#реклама
О рекламодателе
Бесплатное обучение фронтенд-разработке с нуля с личной поддержкой от наставника
На канале Интенсивный JavaScript разрботчик и действующий тимлид помогает изучить фронтенд на практике
Когда-то он работал крупье в казино, а сейчас помогает новичкам попасть в IT и собеседует людей в свою команду
С 20 по 23 октября он проводит бесплатный интенсив, где поможет разобраться во фронтенде с нуля
Что получите на интенсиве
✅ Напишете свой проект на JS: сайт с аниме
✅ Узнаете, как вам сейчас попасть в сферу, каких ошибок избегать
✅ и получите пошаговый план изучения фронтенда с нуля до трудоустройства или стабильных 50 тысяч на фрилансе
Интенсив подойдёт, даже если вы новичок — всё объясняют так, чтобы поняла даже ваша бабушка
Подписывайтесь, осталось 30 мест
Учить фронтенд можно бесконечно, если не знать, куда копать
На интенсиве сократите время на изучение фронтенд-разработки и получите пошаговый план от разработчика, который нанимает новичков в свою команду
👉Участвовать бесплатно
🔥Подписывайтесь и сразу получите мини-курс по основам JavaScript
💡 Псевдокласс :focus-visible вместо :focus в CSS применяется только тогда, когда фокусировка элемента происходит способами, видимыми для пользователя, например, через клавиатурный ввод.
Это помогает избегать ненужного выделения элементов при навигации с помощью мыши, что делает интерфейс менее загроможденным и более чистым
✔️ #tip by Shripal Soni
➡️ @FrontendPortal | #CSS
Чаще всего для свойства background-repeat используется значение 'repeat'. А знаете ли вы, что существуют и другие возможные значения?
⏩ round: изображение повторяется так, чтобы заполнить весь элемент. Но картинка не обрезается, повторяется целое количество раз. Если это не удаётся, то картинка масштабируется
⏩ space: аналогично round, но вместо растягивания изображений создает пустое пространство между элементами, когда это необходимо
➡️ @FrontendPortal | #CSS
ВЫ НЕ МАСШТАБИРУЕТЕ СВОЁ ДЕЛО БЕЗ ЭТИХ ТРЁХ ПРАВИЛ
Раскроем для вас тайну здесь и сейчас:
1. Выстроенная система привлечения клиентов
2. Оцифровка бизнеса
3. Сильная команда,но без больших затрат
Ответы на эти вопросы ⬆️ Вы найдёте в закреплённом посте
Почему же они знают,а вы нет?
Предприниматели с 11-летним стажем Виталий Миронюк и Максим Плугарь;
📍 С мая 2023 привлекли 1,2 млрд руб инвестиций для предпринимателей
📍 Собрали 1500+ кейсов по росту в доходе за 2 года
Все фишки можете узнать и вы,просто читая их канал 😉
Ребята профессионалы своего дела, так что если вы готовы расти в доходе:
Забирайте находку и подписывайтесь на канал @X11FOUNDER
Реклама. ИП Плугарь Максим Андреевич. ИНН 920359268768.
Erid: 2Vtzqw7w6Lj
💡 Простой способ получения скриншотов во время загрузки и фильтрации запросов в Chrome dev tools: на заметку фронтенд-разработчику
✔️ #tip by Shripal Soni
➡️ @FrontendPortal | #devtools
💻 Настоящие читы для программистов/разработчиков!
Hacking & InfoSec Base — Самая большая в телеграме библиотека книг по хакингу и ИБ;
Программистика — Лучший канал про Python;
Coding Base — огромное количество полезных ресурсов, репозиториев статей для разработчиков;
GameDev Base — Множество крутых приёмов и лайвхаков для геймдев разработчиков;
🫵 Подпишись и прокачивай свои навыки с невиданной скоростью!
💡 AbortSignal.timeout() в действии: на заметку фронтенд-разработчику
Данный метод создает сигнал, который автоматически прерывается через указанный промежуток времени в мс
🔜 Поиграть можно здесь
✔️ #tip by Shripal Soni
➡️ @FrontendPortal | #CSS
Как получить реальный опыт во фронтенд-разработке за 7 дней?
А именно:
- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.
В итоге своими руками разработаешь качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме от Айтилогии с поддержкой от опытных разработчиков на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
💡 Простой способ получения доступа к любому значению атрибута в виде строки с помощью функции attr(): на заметку фронтенд-разработчику
CSS-функция, которая умеет получать значение любого атрибута элемента, а потом использовать это значение прямо в стилях
Самые распространённые случаи использования этой функции - для создания тултипа(пример на гифке) и также для отображение значения атрибута href после текста ссылки при печати страницы
@media print {
a::after {
content: " [" attr(href) "]";
}
}
Когда заказчик требует mobile-first 😂
➡️ @FrontendPortal | #memes
📚 Организуй свои знания легко вместе с Smarty-tabs!
Хватит терять полезные ссылки — сохраняй, структурируй и создавай свою личную базу знаний для обучения и подготовки к собеседованиям! Удобная организация, быстрый доступ, а главное — все нужные ресурсы в одном месте! 🚀
💡 Отображения звездочки(*) для всех обязательных полей с помощью одного CSS-правила
Функция-псевдокласс :has() позволяет уточнить основной селектор дополнительным. Это единственный способ выбрать элемент на основе дочернего или соседнего элемента посредством CSS
Мы можем использовать :has() чтобы выбрать все label с обязательным полем формы рядом с ними и отобразить звездочку(*)
label:has(+ [required])::after {
content: " *";
color: red;
}
Разница между «opacity: 0» и «visibility: hidden» и «display: none» в CSS с наглядными примерами
➡️ @FrontendPortal | #CSS