HTML with Superpowers — бесплатный гайдлайн
Наверняка, если вы изучали основы HTML и CSS, то вам встречались веб-компоненты. Для их использования не требуются продвинутые знания JavaScript или других инструментов, это обычные HTML-элементы со своими свойствами и стилями.
В этом руководстве собрана основная информация, как использовать, создавать и стилизовать веб-компоненты в проекте:
https://htmlwithsuperpowers.netlify.app/
#html
Наверняка, если вы изучали основы HTML и CSS, то вам встречались веб-компоненты. Для их использования не требуются продвинутые знания JavaScript или других инструментов, это обычные HTML-элементы со своими свойствами и стилями.
В этом руководстве собрана основная информация, как использовать, создавать и стилизовать веб-компоненты в проекте:
https://htmlwithsuperpowers.netlify.app/
#html
👍2
Создаём Parallax эффект на сайте с горизонтальным скроллом
В этом видеоуроке автор показывает, как сверстать красивый веб-сайт с помощью HTML, CSS и JavaScript.
Вы изучите, как подготовить изображения для Parallax эффекта в CSS, логику движения слоев Parallax, а также для чего нужен transform-style: preserve-3d:
https://youtu.be/QFq6PiZ1BQ8
#web #html #js
В этом видеоуроке автор показывает, как сверстать красивый веб-сайт с помощью HTML, CSS и JavaScript.
Вы изучите, как подготовить изображения для Parallax эффекта в CSS, логику движения слоев Parallax, а также для чего нужен transform-style: preserve-3d:
https://youtu.be/QFq6PiZ1BQ8
#web #html #js
YouTube
Создание красивого сайта с горизонтальным Parallax эффектом (HTML CSS JavaScript)
💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/
В этом уроке мы рассмотрим создание сайта с горизонтальным скроллом. Ключевой особенностью данного примера является красивый parallax эффект, который добавляет глубину и объем в сцену.…
В этом уроке мы рассмотрим создание сайта с горизонтальным скроллом. Ключевой особенностью данного примера является красивый parallax эффект, который добавляет глубину и объем в сцену.…
👍8🔥5
Проект в портфолио на JavaScript
Небольшой видеоурок по созданию клона сервиса по подбору цветов. Урок подойдёт для начинающих, т.к. автор разбирает основы HTML, CSS и JavaScript:
https://youtu.be/OaNICHKM5KM
#ccs #js #html
Небольшой видеоурок по созданию клона сервиса по подбору цветов. Урок подойдёт для начинающих, т.к. автор разбирает основы HTML, CSS и JavaScript:
https://youtu.be/OaNICHKM5KM
#ccs #js #html
❤5
Как верстать на CSS Grid?
В этом видеоуроке рассматривается, как создать красивый сайт с нуля, используя гриды. Также автор показывает лучшие практики работы с CSS и несколько фишек в вёрстке:
https://youtu.be/pIr6ACmdof4
#css #html
В этом видеоуроке рассматривается, как создать красивый сайт с нуля, используя гриды. Также автор показывает лучшие практики работы с CSS и несколько фишек в вёрстке:
https://youtu.be/pIr6ACmdof4
#css #html
❤5👍2
Шпаргалка по символам и иконкам для фронтенд-разработчика
AmpWhat — это интерактивный справочник с символьными объектами HTML, символами Unicode и 8859-1, кавычек, математических символов, а также греческих букв.
Если вам нужно вставить иконку или найти нужный символ не в формате изображения для вставки в HTML или для псевдоэлементов, то AmpWhat может помочь сгенерировать варианты за несколько секунд:
https://www.amp-what.com/
#html #css
AmpWhat — это интерактивный справочник с символьными объектами HTML, символами Unicode и 8859-1, кавычек, математических символов, а также греческих букв.
Если вам нужно вставить иконку или найти нужный символ не в формате изображения для вставки в HTML или для псевдоэлементов, то AmpWhat может помочь сгенерировать варианты за несколько секунд:
https://www.amp-what.com/
#html #css
👍2🔥2
Новый семантический элемент появился в HTML — <search>
Он должен содержать элементы управления формой (например, ввод текста, выпадающие списки или кнопки). По сути, данный элемент представляет собой раздел документа, который используется для поиска или фильтрации. В этой статье рассматривается его реализация в HTML:
https://alvaromontoro.hashnode.dev/new-html-element-search
#html
Он должен содержать элементы управления формой (например, ввод текста, выпадающие списки или кнопки). По сути, данный элемент представляет собой раздел документа, который используется для поиска или фильтрации. В этой статье рассматривается его реализация в HTML:
https://alvaromontoro.hashnode.dev/new-html-element-search
#html
🎉4👍1
Search: новый HTML-элемент в 2023
Статья рассматривает новый семантический элемент <search> в стандарте HTML, предназначенный для разделов страницы, используемых для поиска или фильтрации.
#статья #html
Статья рассматривает новый семантический элемент <search> в стандарте HTML, предназначенный для разделов страницы, используемых для поиска или фильтрации.
#статья #html
❤3👍1
Что такое <!DOCTYPE> и зачем он нужен
Для начала, стоит разобрать, что такое quirks mode и standards mode.
Quirks Mode (режим совместимости) — это режим работы веб-браузеров, который сознательно симулируют множество багов старых браузеров. Этот режим необходим для поддержки сайтов, созданных до начала широкого применения веб стандартов.
Standards Mode (стандартный режим) — это режим, при котором поведение браузера соответствует описанному в спецификациях HTML и CSS. Этот режим используется во всех современных браузерах.
Вернемся к доктайпу.
<!DOCTYPE html> — это описание типа документа, которое позволяет браузеру понять, какую версию html следует использовать. Поставьте его первой строчкой HTML-документа, и браузер обработает страницу правильно, в стандартном режиме. Без него браузер переключается в режим совместимости со старым кодом.
Если сравнивать HTML с устройством человека, то <!DOCTYPE> — это его вид. Важно знать, что было раньше, но стоит быть австралопитеком. Единственный вариант, который можно использовать — это <!DOCTYPE html>, все остальные устарели.
#html
Для начала, стоит разобрать, что такое quirks mode и standards mode.
Quirks Mode (режим совместимости) — это режим работы веб-браузеров, который сознательно симулируют множество багов старых браузеров. Этот режим необходим для поддержки сайтов, созданных до начала широкого применения веб стандартов.
Standards Mode (стандартный режим) — это режим, при котором поведение браузера соответствует описанному в спецификациях HTML и CSS. Этот режим используется во всех современных браузерах.
Вернемся к доктайпу.
<!DOCTYPE html> — это описание типа документа, которое позволяет браузеру понять, какую версию html следует использовать. Поставьте его первой строчкой HTML-документа, и браузер обработает страницу правильно, в стандартном режиме. Без него браузер переключается в режим совместимости со старым кодом.
Если сравнивать HTML с устройством человека, то <!DOCTYPE> — это его вид. Важно знать, что было раньше, но стоит быть австралопитеком. Единственный вариант, который можно использовать — это <!DOCTYPE html>, все остальные устарели.
#html
👍19❤🔥4🍌2