Telegram Web
Forwarded from Кексобот: неделя знаний
День 3️⃣, сообщение от Кекса

Сегодня делаем интерфейсы выразительными без лишней мишуры: многослойные фоны, аккуратные рамки и точные тени — всё по делу, всё управляемо. Будем собирать «картинку» из слоёв, не теряя производительность и читаемость кода.

Подключим графический интеллект: background-* как палитра, border-image как конструктор нестандартных рамок, а SVG — как векторный инструмент, который масштабируется без «пикселей» и поддаётся трансформациям. Ваша UI-работа станет и аккуратнее, и богаче.


В программе:
152 задания, 45 испытаний и 68 вызовов, а также 717 баллов.

Подробнее | Кексобот | Правила
54❤‍🔥2🔥1
Forwarded from Кексобот: неделя знаний
День 4️⃣, сообщение от Кекса

Подключаем «мозги интерфейса»: сегодня пишем код, который принимает решения, обрабатывает данные и управляет DOM. Будем мыслить алгоритмами, держать в голове типы и аккуратно собирать функции так, чтобы код читал человек — и радовался ревьюер.

Поработаем с основами языка, разберёмся со структурами данных и приручим браузерное API: от for и return до addEventListener и шаблонов. Итог — уверенные руки на клавиатуре и предсказуемый интерфейс на экране.


В программе:
183 задания и 15 испытаний, а также 258 баллов.

Подробнее | Кексобот | Правила
3👍321
Пустые элементы в HTML? Разбираем псевдокласс :empty

Псевдокласс :empty позволяет находить элементы без содержимого. В статье рассказываем и показываем, как работает :empty и какие есть нюансы.

Чтобы гарантировать, что элемент точно будет пустым, убедитесь, что внутри нет даже невидимых символов.
<div></div> — считается пустым.
<div> </div> — не считается пустым (есть пробел).
<div><br></div> — не считается пустым (есть дочерний элемент).

🔵 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥5❤‍🔥2
CSS-боль, выпуск про чистый CSS

Сегодня две функции: sibling-index() и sibling-count().

Что внутри:

- как раньше решали задачу и почему это боль;
- как помогали циклы в препроцессорах и зачем от них уходить;
- промежуточный вариант на переменных и calc();
- финал: чистая разметка, меньше кода, гибкая параметризация — без JS и инлайнов.

🐭 Смотреть в YT
🐹 Смотреть в VK Video
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8❤‍🔥43
Forwarded from Кексобот: неделя знаний
День 5️⃣, сообщение от Кекса

Мяв, покорители кода! Практика — это когда знания превращаются в рефлексы. Сегодня соберём рабочие штуки: фотоприложение с фильтрами, аккуратное управление DOM, осмысленные обработчики событий — код, который приятно читать и легко расширять.

Плюс визуализируем алгоритмы и добьём базовые приёмы задачниками. Пройдемся по пузырьковой сортировке руками, потом — в коде; закрепим циклы, функции, работу со строками и массивами. Это как тренажёрный зал, только для логики и интерфейсов.


В программе:
37 заданий, 54 испытания и 4 вызова, а также 327 баллов.

Подробнее | Кексобот | Правила
63🔥31
Всё про единицы измерения em: просто и понятно

em — мощный инструмент для адаптивной типографики и интерфейсов. Он требует внимательности к контексту, но позволяет легко управлять масштабом и пропорциями элементов на странице.


❗️ В статье разбираем, когда em — лучшее решение, а также рассматриваем примеры его использования.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥3❤‍🔥2
Vue.js 3 на практике: Vite, Composition API, Pinia и тесты

На курсе разбираем современные подходы к клиентским приложениями на Vue.js 3: script setup и реактивность, маршрутизацию с guard’ами, управление состоянием в Pinia, работу с HTTP и обработку ошибок, анимации, модульные тесты на Vitest и Vue Test Utils.

Практика — два проекта: учебный таск-менеджер и фронтенд онлайн-пиццерии поверх готового API. Формат — теория → разбор → задачи. В чате отвечаем на вопросы и показываем типичные решения.

📌 Программа и детали: https://htmlacademy.ru/levelup/vue
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥65❤‍🔥4
Media is too big
VIEW IN TELEGRAM
Где компаниям находить джунов в команду или проблема одинаковых резюме

Вера Ясюкевич, руководитель KLBR Studio, рассказала, почему компании проще брать разработчиков из образовательных программ, чем искать их на платформах онлайн-рекрутинга:

«Вот эти отклики, которые сейчас есть, с абсолютно шаблонными описаниями, с абсолютно шаблонными ответами, без конкретики, где ты сам сидишь, выискиваешь у кандидата, есть у него вообще релевантный опыт или нет, и где его смотреть. Это ад. Поэтому мы пробуем новый путь.


Полный эфир с KLBR Studio — по ссылке:
🐭 Смотреть
🐹 Смотреть
Подробнее о программе
Please open Telegram to view this post
VIEW IN TELEGRAM
4🔥3👍2
Forwarded from Кексобот: неделя знаний
День 6️⃣, сообщение от Кекса

Мур-мур! Сегодня наводим движение без суеты: шлифуем трансформации и тайминг, ставим акценты там, где они нужны, и подключаем переменные, чтобы управлять стилями из одного места — анимации помогают делу, интерфейс остаётся предсказуемым, а финишная прямая уже видна: до финала всего два дня.


В программе:
89 заданий, 4 испытания и 5 вызовов, а также 134 балла.

Подробнее | Кексобот | Правила
42👍1🔥1
Forwarded from Кексобот: неделя знаний
День 7️⃣, сообщение от Кекса

Мр-мяу! Финальный рывок: сегодня собираем «системность» — наводим порядок в стилях с препроцессором и смотрим на проект глазами сервера. Чуть-чуть дисциплины в переменных и цветовых функциях, капля модульности в компонентах, щепотка шаблонов — и интерфейс становится предсказуемым и масштабируемым. Это последний день недели знаний, а завтра — прямой эфир с розыгрышем призов: самое время красиво добежать до ленточки.


В программе:
112 заданий и 6 испытаний, а также 142 балла.

Подробнее | Кексобот | Правила
33🔥2
cause: ключ к понятной обработке ошибок в JavaScript

При работе с ошибками в JavaScript часто возникает ситуация, когда нужно перехватить исключение, выполнить какие-то действия, а затем выбросить новую ошибку. В такой цепочке легко потерять исходную причину вызвавшую ошибку.

Свойство cause позволяет передать оригинальную ошибку дальше по цепочке, не теряя контекста.


📌 Свойство cause поддерживается в современных браузерах и средах, включая Node.js. Разбираем детали и примеры → статья.
Please open Telegram to view this post
VIEW IN TELEGRAM
5🔥3❤‍🔥22👍2
Media is too big
VIEW IN TELEGRAM
Круговая диаграмма на чистом CSS

Чистый CSS уже многое умеет для простой визуализации данных. Только взгляните: круг собирается через conic-gradient, цвета задаются в кастомных свойствах, форма "бублика" получается с помощью масок.

❗️ Смотрите и другие визуализации на удобных площадках:
YouTube | VK Video
🔥124
counter-set в CSS: как задать номер без хака и JavaScript

counter-set — это новое CSS-свойство, с помощью которого можно явно установить значение счётчика в нужный момент.


Свойство поддерживается в современных браузерах и решает задачу, для которой раньше приходилось лезть в HTML или писать JavaScript. В статье рассказываем, где использовать свойство.

🔺 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥63
navigator.credentials: как ускорить вход в браузере



navigator.credentials позволяет браузеру безопасно хранить и по запросу возвращать учётные данные — пароли, токены или ключи. Через get() можно получить сохранённые данные (например, с mediation: optional), а через store() — сохранить их после входа.

Работает по HTTPS, требует фокуса страницы. Поддерживается в Chrome, Edge и Android WebView; в Safari и Firefox — частично или нет.

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍2
HTML Academy
CSS-боль, выпуск про чистый CSS Сегодня две функции: sibling-index() и sibling-count(). Что внутри: - как раньше решали задачу и почему это боль; - как помогали циклы в препроцессорах и зачем от них уходить; - промежуточный вариант на переменных и calc();…
Вышла вторая часть разбора радиальных градиентов в CSS!

В первой мы научились управлять цветами, смещать центр и менять форму. А теперь — идём глубже:

1️⃣ Radial shape: как зафиксировать градиент в форме круга (circle).
2️⃣ Radial size: абсолютные размеры и ограничения для процентов.
3️⃣ Четыре ключевых слова (closest-side, farthest-side, closest-corner, farthest-corner) — как они работают и когда реально выручают.
4️⃣ Практика: делаем анимированный «бильярдный шарик» с бликом.

🐭 Смотреть на YT
🐹 Смотреть в VK Video
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤‍🔥42
Подводим итоги!

Чемпионат по вёрстке подошёл к концу. В 12:00 вместе с экспертами из компаний подведём итоги чемпионата, раздадим оценки и выберем победителя.

🐭 Подключиться в YT
🐹 Подключиться в VK Video
Please open Telegram to view this post
VIEW IN TELEGRAM
15❤‍🔥33🔥2
Сети и протоколы без магии: базовые знания, которые нужны фронтендеру

Разберётесь, как данные реально идут по сети: от модели OSI и стека TCP/IP до различий между HTTP/1.1, HTTP/2 и HTTP/3; когда уместны WebSockets; как работает TLS и проверка сертификатов. С этими знаниями вы осознанно выбираете транспорт под сценарий и понимаете, что происходит при установке защищённого соединения.

Результат — меньше накладных расходов и быстрее метрики вроде TTFB/LCP, плюс снижение рисков уязвимостей за счёт корректной настройки шифрования и аутентификации.

🟠 Смотреть программу
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
2👍2
2025/10/16 16:45:23
Back to Top
HTML Embed Code: