Друзья, поздравляем вас с Новым годом!

Желаем в 2026-м всё-таки доосвоить все оставшиеся фронтенд-фреймворки научиться программировать на CSS и HTML и верстать красивые сайты на Node.js.

Верим, что всё у вас получится. Спасибо, что вы с нами.

Как устроен рендеринг в браузере

Что происходит между вводом URL-адреса в браузере и моментом отображения веб-страницы? Такой вопрос могут задать на собеседовании, да и просто это полезно знать.

Давайте интерактивно изучим сложный процесс рендеринга в браузере с помощью этой статьи.

Генератор праздничного текста крестиком

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

Попробуйте сами и посмотрите код.

#codepen

Упрощаем себе создание grid-вёрстки на сайте с помощью CSS Grid Generator

Как видно на видео, он помогает посмотреть, как будет выглядеть итоговая сетка и после этого получить готовый CSS-код. Всё, что вам нужно: задать количество строк, колонок и расстояния между ними, а потом нарисовать расположение div-блоков.

Инструмент бесплатный, доступен по ссылке: https://cssgrid-generator.netlify.app/

#инструменты #css

Заказчик: Нужно на нашем сайте сделать кнопки зеркальными, чтобы пользователь заходил и видел своё отражение.

Я: Подержите моё пиво.

CodePen-проект: https://codepen.io/tyeb_11/pen/dygoJow

#codepen

Perspective Loader на чистом CSS

Вы, скорее всего, видели этот шуточный ролик, где показывается почему на самом деле лоадер прерывается во время загрузки или установки.

Пользователь CodePen решил повторить его во фронтенде и сделал анимацию, которая работает исключительно на HTML и CSS.

Посмотреть код можно здесь:
https://codepen.io/jh3y/pen/xxWdOQy

#codepen #css

Как сделать условный border-radius в CSS

Хотите узнать технику, которая позволяет автоматически настраивать border-radius для карточного компонента в зависимости от размеров экрана?

Вам потребуется прописать одну хитрую формулу. О ней, а также способе её применения рассказали в этой статье.

#фронтенд #css

Look At Pointer

Автор реализовал анимацию движения линий с отслеживанием положения курсора. В проекте используется CSS и JavaScript.

https://codepen.io/JuanFuentes/pen/bPGVZx

Игра «Охота на утку» на CSS

Помните эту легендарную игру на Dendy, где нужно было выстрелить из специального ружья в кинескопный телевизор? Сегодня такую игру может создать практически любой, даже не используя языки программирования.

Автору этой реализации хватило HTML и CSS, обёрнутых препроцессорами: https://tprg.ru/eVuM

#codepen

Пишем игру на JS/TS и развиваем навык работы с кодом

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

Сохраните, чтобы не потерять: https://tproger.ru/articles/pet-proekt-pishem-igru-na-js-ts-i-razvivaem-navyk-raboty-s-kodom/

#typescript #javascript #петпроект

Интересный codepen-проект: Balloon Bears

Это небольшая игра, написанная на React с использованием gsap.

Исходники: https://codepen.io/jh3y/pen/NWOLyGd

#codepen