​Пианино на JavaScript

Подробное руководство, как создать собственную веб-версию пианино в браузере! Проект состоит всего лишь из трёх файлов: HTML, CSS-стилей и JavaScript-файла.
Кстати, лучше всего запускать приложение в Chrome, потому что в Safari звук играется с небольшой задержкой:

https://thecode.media/piano-js/

#веб #html #js

Советы, которые помогут увеличить скорость загрузки страницы

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

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

https://levelup.gitconnected.com/html-css-features-tips-for-a-10x-fast-page-loading-speed-5fb6c2d88df8

#html #css

​Новогодний шар — выбираем подарки близким

Если вы не знаете, какой подарок подарить родителям или друзьям, то почему бы не выбрать их с помощью новогоднего шара? Снежный шар написан на JS с помощью HTML и CSS. Нажав на кнопку, шар выберет из списка подарок только один.

Полный код по ссылке:

https://codepen.io/thestemdiaries/pen/qBKbgjQ

#js #html

Как украсить сайт на новый год?

Ёлку поставили, салаты нарезали и перемешали, а может ещё подготовить сайт к Новому году? Мы сделали подборку, которая поможет вам в этом: гирлянды, таймер обратного отсчёта и открытки — в статье:

https://tproger.ru/digest/new-year-scripts/

#js #html

​HTML with Superpowers — бесплатный гайдлайн

Наверняка, если вы изучали основы HTML и CSS, то вам встречались веб-компоненты. Для их использования не требуются продвинутые знания JavaScript или других инструментов, это обычные HTML-элементы со своими свойствами и стилями.

В этом руководстве собрана основная информация, как использовать, создавать и стилизовать веб-компоненты в проекте:

https://htmlwithsuperpowers.netlify.app/

#html

​Создаём Parallax эффект на сайте с горизонтальным скроллом

В этом видеоуроке автор показывает, как сверстать красивый веб-сайт с помощью HTML, CSS и JavaScript.
Вы изучите, как подготовить изображения для Parallax эффекта в CSS, логику движения слоев Parallax, а также для чего нужен transform-style: preserve-3d:

https://youtu.be/QFq6PiZ1BQ8

#web #html #js

​Проект в портфолио на JavaScript

Небольшой видеоурок по созданию клона сервиса по подбору цветов. Урок подойдёт для начинающих, т.к. автор разбирает основы HTML, CSS и JavaScript:

https://youtu.be/OaNICHKM5KM

#ccs #js #html

​Как верстать на CSS Grid?

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

https://youtu.be/pIr6ACmdof4

#css #html

​Шпаргалка по символам и иконкам для фронтенд-разработчика

AmpWhat — это интерактивный справочник с символьными объектами HTML, символами Unicode и 8859-1, кавычек, математических символов, а также греческих букв.

Если вам нужно вставить иконку или найти нужный символ не в формате изображения для вставки в HTML или для псевдоэлементов, то AmpWhat может помочь сгенерировать варианты за несколько секунд:

https://www.amp-what.com/

#html #css

​Новый семантический элемент появился в HTML — <search>

Он должен содержать элементы управления формой (например, ввод текста, выпадающие списки или кнопки). По сути, данный элемент представляет собой раздел документа, который используется для поиска или фильтрации. В этой статье рассматривается его реализация в HTML:

https://alvaromontoro.hashnode.dev/new-html-element-search

#html