Верстальщику в помощь — подборка инструментов для проверки вёрстки

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

BrowserStack.
Покажет, как выглядит вёрстка в разных браузерах.

Генератор HTML-дерева.
Покажет структуру разметки и структуру заголовков на странице.

PerfectPixel.
Плагин, который покажет насколько вёрстка близка к макету.

CSS Peeper.
Расширение, которое позволит быстро промониторить стили, картинки, и снять размеры без открытия инструментов разработчика.

#htmlacademy_полезное

Получите 3 месяца подписки на тренажёры бесплатно 🎁

22 февраля у Академии день рождения, в честь праздника мы решили организовать бесплатный марафон для начинающих веб-разработчиков и разыграть призы среди всех участников.

Первый розыгрыш 3 месяцев подписки пройдёт в нашем сообществе ВКонтакте, подробности в посте.

Свежие новости на канале блога

Фронтенд-новости 44. Дайджест новостей и полезных статей о фронтенде.

🔥 Самое важное

CSS Snapshot 2023. Основная задача — сформировать текущее состояние CSS на 2023 год.

Выражения от контейнеров теперь есть во всех основных браузерных движках.

Документальный фильм про React.

💫 Что нового

У WCAG 2.1 появился перевод на каталонский, а мы напомним, что есть и русский перевод для WCAG 2.0.

Декларативный Shadow DOM в Safari TP 162
[](https://webislife.ru/strokoff/deklarativnyj-shadow-dom/)

Что нового в Lighthouse 10

Firefox 110 (и ещё для разработчиков)

Chrome 111 DevTools

🧬 HTML и CSS

Как с помощью size-adjust, ascent-override, descent-override и line-gap-override уменьшить сдвиг интерфейса.

Как отслеживать изменения в DOM-дереве.

С какими проблема вы столкнётесь при создании фавиконки для тёмной и светлой темы.

Как создать разноцветные полупрозрачные градиентные тени.

Как работает box-sizing.

🏝️ JavaScript

10 ошибок, которых следует избегать при работе с Vue 3.

State of React Native 2023

Рефакторинг компонентов TypeScript React в VS Code.

А что если не использовать системы сборки для JS?

Использование RxDB в качестве базы данных в Node.js.

▶️ Игорь Антонов про протокол node:. История возникновения и как пользоваться.

Используйте MutationObserver для обработки узлов DOM, которых еще не существует.

Полное руководство по тайм-аутам в Node.js.

Представьте, что Node.js работает прямо в вашем браузере. Узнайте о веб-контейнерах.

🦭 Общее

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

SPA нужен не всегда.

Git Notes: самая крутая и самая нелюбимая функция Git? Знаете ли вы, что вы можете добавлять примечания к коммитам (помимо обычных сообщений коммитов) с помощью git из командной строки?

Последняя бета-версия iOS и iPadOS 16.4 поддерживает API Web Push для веб-приложений на главном экране.


Подпишитесь на @html_blog, чтобы не пропустить следующие выпуски.

Сегодня день рождения у Академии, нам исполнилось 11 лет. Наш подписчик Рустам прислал нам вот такую картинку в честь праздника. Спасибо, долго смеялись 😄

Хотим спросить у вас: какой самый странный и необычный подарок получали в День рождения?

Шпаргалка для новичков по CSS-селекторам 🗂️
Селекторы — это шаблоны, которые используются для привязки стилевых свойств к элементам в документе. Вы можете задать стиль для всех элементов или сократить выбор с помощью определённого селектора.

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

#htmlacademy_статьи