Фронтенд Гайд
7.25K subscribers
615 photos
308 videos
286 links
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов!

Все представлено в виде готового кода, бери и юзай в своем проекте.

По всем вопросам: @it_dashka
Реклама: https://telega.in/channels/frontend_dev5/card
Download Telegram
Привет, друзья! 
Успевайте подключиться и стать участником главного фронтенд-события года — FrontendConf 2024.

30 сентября и 1 октября в Москве, в кластере “Ломоносов", мы соберёмся, чтобы обменяться опытом, обсудить новые вызовы и горизонты в разработке.

Что вас ждёт:
51 доклад с реальными кейсами, свежими идеями и анализом актуальных задач.
Дебаты по самым острым темам фронтенда.
Фейл-митапы: истории, которые никогда не попадают в запись.
QA-сессии, митапы и живое общение с экспертами.

Новые темы этого года:
Внедрение ML в продукты.
Как нейросети меняют софт.
Применение ИИ в пользовательских интерфейсах с помощью Tensorflow.js.
Сравнение Bun и Node: выбор JSCore.
Последние достижения в развитии PWA.
Также рассмотрим новейшие тенденции фронтенда, обсудим свежие концепции фреймворков, технологии AR и многое другое.

Купить билеты и посмотреть расписание можно на сайте.
Присоединяйтесь!

Реклама. ООО "КОНФЕРЕНЦИИ ОЛЕГА БУНИНА". ИНН 7733863233.
Javascript вопрос: Что вернет код при использовании опциональной цепочки на несуществующем объекте:
nonexist?.property
Anonymous Poll
59%
undefined
17%
null
15%
Произойдет ошибка
8%
Посмотреть ответы
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Demo:Input Field Animation Floating Label | HTML & CSS

При вводе данных поле становится объёмным.
1
CSS. Какое свойство позволяет принудительно указать наличие вертикальной прокрутки у элемента?
Anonymous Poll
19%
overflow-x: scroll;
66%
overflow-y: scroll;
4%
scroll-x: true;
9%
vertical-scroll: on;
3%
Посмотреть ответы
This media is not supported in your browser
VIEW IN TELEGRAM
CSS 3D Template

Анимация куба, при наведение можно изменять расположение, написана на чистом CSS.
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 reveal.js — open-source фреймворк для создания HTML-презентаций

Фреймворк обладает мощным набором функций, включая поддержку Markdown, возможность создания анимаций, экспорт в PDF, наличие заметок для докладчика, поддержку верстки в LaTeX, код с подсветкой синтаксиса и удобный API.
🤔 Вопрос: Какой объект JavaScript предоставляет методы для манипулирования адресом URL текущего окна браузера?
Anonymous Poll
57%
window.location
29%
document.url
6%
browser.address
8%
navigator.path
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Изящные карточки с эффектом 3D-подъёма.
😁12👨‍💻31
Как расшифровывается css ?
Спросят с вероятностью 7%

CSS расшифровывается как Cascading Style Sheets, что в переводе означает "каскадные таблицы стилей". Давайте рассмотрим каждый элемент этого термина:

1️⃣Cascading (каскадные):
Этот термин указывает на то, что стили применяются к элементам HTML в определенном порядке приоритетов. Когда стили конфликтуют (например, когда одно и то же свойство задано несколькими стилями), CSS использует каскадные правила для разрешения этих конфликтов. Эти правила включают:
Специфичность селекторов (различные типы селекторов имеют разный приоритет).
Порядок расположения в коде (последний стиль имеет больший приоритет).
Использование ключевого слова !important (приоритет выше всех обычных правил).

2️⃣Style (стили):
Стили определяют, как должны выглядеть элементы HTML на веб-странице. Это включает в себя множество свойств, таких как цвета, шрифты, размеры, расположение, отступы и многие другие аспекты внешнего вида.

3️⃣Sheets (таблицы):
CSS-правила обычно хранятся в файлах, которые называются таблицами стилей. Эти файлы могут быть внешними (подключенными к HTML-документу через элемент <link>), встроенными (внутри элемента <style> в самом HTML-документе) или инлайновыми (непосредственно в атрибутах стиля HTML-элементов).

Вот пример CSS, который показывает использование каскадных таблиц стилей для стилизации HTML-документа:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<link rel="stylesheet" href="styles.css">
<style>
.inline-style {
color: red;
}
</style>
</head>
<body>
<h1 class="heading inline-style">Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS. Какое правило позволяет подключать сторонние шрифты?
Anonymous Poll
56%
@font-face
16%
18%
5%
Посмотреть ответы
😁14👍2
HTML. Какой атрибут у button отвечает за текст на кнопке?
Anonymous Poll
2%
placehold
25%
placeholder
25%
value
45%
Такого атрибута не существует
3%
Посмотреть ответы
This media is not supported in your browser
VIEW IN TELEGRAM
Folded Paper Login Form - Форма входа в систему в виде сложенной бумаги, реализованная на чистом CSS.
HTML. С помощью какого тега можно указать ключевые слова для поисковиков?
Anonymous Poll
50%
meta
29%
keywords
9%
keyword
4%
seo
8%
Посмотреть ответы
👍21
CSS вопрос: border-radius (с корректным положительным числовым значением) применили к элементу. Будут ли у нативного outline этого элемента скругленные углы?
Anonymous Poll
55%
Да
36%
Нет
9%
Посмотреть ответы
🤨1
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Flipping Neon - Анимированная сцена, выполненная на чистом CSS, без использования JavaScript
🔥1