Пианино на JavaScript
Подробное руководство, как создать собственную веб-версию пианино в браузере! Проект состоит всего лишь из трёх файлов: HTML, CSS-стилей и JavaScript-файла.
Кстати, лучше всего запускать приложение в Chrome, потому что в Safari звук играется с небольшой задержкой:
https://thecode.media/piano-js/
#веб #html #js
Подробное руководство, как создать собственную веб-версию пианино в браузере! Проект состоит всего лишь из трёх файлов: 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
Ни для кого не секрет, что на скорость страницы влияет множество факторов. Однако сделать сайт быстрым и удобным для пользователей — актуальная задача для любого разработчика.
Для начала можно улучшить скорость загрузки страницы оптимизируя 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
Если вы не знаете, какой подарок подарить родителям или друзьям, то почему бы не выбрать их с помощью новогоднего шара? Снежный шар написан на JS с помощью HTML и CSS. Нажав на кнопку, шар выберет из списка подарок только один.
Полный код по ссылке:
https://codepen.io/thestemdiaries/pen/qBKbgjQ
#js #html
Как украсить сайт на новый год?
Ёлку поставили, салаты нарезали и перемешали, а может ещё подготовить сайт к Новому году? Мы сделали подборку, которая поможет вам в этом: гирлянды, таймер обратного отсчёта и открытки — в статье:
https://tproger.ru/digest/new-year-scripts/
#js #html
Ёлку поставили, салаты нарезали и перемешали, а может ещё подготовить сайт к Новому году? Мы сделали подборку, которая поможет вам в этом: гирлянды, таймер обратного отсчёта и открытки — в статье:
https://tproger.ru/digest/new-year-scripts/
#js #html
HTML with Superpowers — бесплатный гайдлайн
Наверняка, если вы изучали основы HTML и CSS, то вам встречались веб-компоненты. Для их использования не требуются продвинутые знания JavaScript или других инструментов, это обычные HTML-элементы со своими свойствами и стилями.
В этом руководстве собрана основная информация, как использовать, создавать и стилизовать веб-компоненты в проекте:
https://htmlwithsuperpowers.netlify.app/
#html
Наверняка, если вы изучали основы 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
В этом видеоуроке автор показывает, как сверстать красивый веб-сайт с помощью HTML, CSS и JavaScript.
Вы изучите, как подготовить изображения для Parallax эффекта в CSS, логику движения слоев Parallax, а также для чего нужен transform-style: preserve-3d:
https://youtu.be/QFq6PiZ1BQ8
#web #html #js
YouTube
Создание сайта с горизонтальным Parallax эффектом (HTML CSS JavaScript)
Все курсы в одном комплекте: https://wd-m.ru/bundle
Веб-дизайн с нейросетями: https://wd-m.ru/design
Рассмотрим создание сайта с горизонтальным скроллом. Ключевой особенностью данного примера является красивый parallax эффект, который добавляет глубину и…
Веб-дизайн с нейросетями: https://wd-m.ru/design
Рассмотрим создание сайта с горизонтальным скроллом. Ключевой особенностью данного примера является красивый parallax эффект, который добавляет глубину и…
Проект в портфолио на JavaScript
Небольшой видеоурок по созданию клона сервиса по подбору цветов. Урок подойдёт для начинающих, т.к. автор разбирает основы HTML, CSS и JavaScript:
https://youtu.be/OaNICHKM5KM
#ccs #js #html
Небольшой видеоурок по созданию клона сервиса по подбору цветов. Урок подойдёт для начинающих, т.к. автор разбирает основы HTML, CSS и JavaScript:
https://youtu.be/OaNICHKM5KM
#ccs #js #html
Как верстать на CSS Grid?
В этом видеоуроке рассматривается, как создать красивый сайт с нуля, используя гриды. Также автор показывает лучшие практики работы с CSS и несколько фишек в вёрстке:
https://youtu.be/pIr6ACmdof4
#css #html
В этом видеоуроке рассматривается, как создать красивый сайт с нуля, используя гриды. Также автор показывает лучшие практики работы с CSS и несколько фишек в вёрстке:
https://youtu.be/pIr6ACmdof4
#css #html
Шпаргалка по символам и иконкам для фронтенд-разработчика
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
Новый семантический элемент появился в HTML — <search>
Он должен содержать элементы управления формой (например, ввод текста, выпадающие списки или кнопки). По сути, данный элемент представляет собой раздел документа, который используется для поиска или фильтрации. В этой статье рассматривается его реализация в HTML:
https://alvaromontoro.hashnode.dev/new-html-element-search
#html
Он должен содержать элементы управления формой (например, ввод текста, выпадающие списки или кнопки). По сути, данный элемент представляет собой раздел документа, который используется для поиска или фильтрации. В этой статье рассматривается его реализация в HTML:
https://alvaromontoro.hashnode.dev/new-html-element-search
#html
Search: новый HTML-элемент в 2023
Статья рассматривает новый семантический элемент <search> в стандарте HTML, предназначенный для разделов страницы, используемых для поиска или фильтрации.
#статья #html
Статья рассматривает новый семантический элемент <search> в стандарте HTML, предназначенный для разделов страницы, используемых для поиска или фильтрации.
#статья #html
Что такое <!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
Что такое <html> и зачем он нужен
Элемент <html> представляет собой элемент верхнего уровня HTML-документа, который называют корневым элементом. Все другие элементы должны быть потомками этого элемента то есть должны находиться внутри него. Тег <html> ставят сразу после <!DOCTYPE>.
К этому элементу применимы следующие атрибуты:
#html
Элемент <html> представляет собой элемент верхнего уровня HTML-документа, который называют корневым элементом. Все другие элементы должны быть потомками этого элемента то есть должны находиться внутри него. Тег <html> ставят сразу после <!DOCTYPE>.
К этому элементу применимы следующие атрибуты:
manifest — указывает URI (унифицированный идентификатор ресурса) манифеста, который сообщает браузеру, какие элементы страницы могут быть закэшированы;title — добавляет всплывающую подсказку, которая появляется, когда курсор мыши задерживается в окне веб-страницы;prefix — здесь прописывают open-graph разметку, она используется для того, чтобы при репосте из соцсетей передавались те заголовки, картинки и описания, которые мы укажем.xmlns — необязательный для HTML5, но необходимый для XHTML-документов атрибут. Определяет пространство имён XML, в котором находится документ;version — определяет версию шаблона HTML-документа, но необходимости в этом нет (вышел из употребления с версии HTML5);lang — подсказывает браузеру язык, на котором написан текст на странице и позволяет понять, отличается ли язык страницы от языка вашей системы.#html
Разбор вопросов с собеседований frontend-разработчика
Держите целую серию небольших видео, в которых автор разбирает распространённые вопросы с собеседований на тему HTML, CSS и JS. Например, «позиционирование в CSS», «разница между == и ===», «чем отличается адаптивный и отзывчивый дизайн» и многое другое.
@prog_point #frontend #трудоустройство
Держите целую серию небольших видео, в которых автор разбирает распространённые вопросы с собеседований на тему HTML, CSS и JS. Например, «позиционирование в CSS», «разница между == и ===», «чем отличается адаптивный и отзывчивый дизайн» и многое другое.
@prog_point #frontend #трудоустройство
YouTube
#1 Front-end. Вопросы на собеседовании
#YauhenK #webDev #HTML #CSS #JS
Всем привет!
Добро пожаловать в видеокаст «Front-end. Вопросы на собеседовании».
В данной серии видео я постараюсь помочь вам подготовиться к собеседованиям на позицию Junior и Middle Front-end разработчик. Видеокаст представлять…
Всем привет!
Добро пожаловать в видеокаст «Front-end. Вопросы на собеседовании».
В данной серии видео я постараюсь помочь вам подготовиться к собеседованиям на позицию Junior и Middle Front-end разработчик. Видеокаст представлять…
Где бесплатно выучить HTML и CSS?
Не обязательно покупать платные курсы, чтобы стать фронтенд-разработчиком. Нужный для обучения материал можно найти на бесплатных ресурсах.
Например, вот тут много курсов для начинающих:
— htmlacademy.ru
— hexlet.io
— wayup.in
— itproger.com
— stepik.org
Для продолжающих тоже есть площадки с обучающими материалами. Например сайт htmlacademy или канал ВебКамеди. Но ещё больше полезных ресурсов по изучению HTML и CSS вы можете найти в этой статье.
@prog_point #web #frontend #html #css
Не обязательно покупать платные курсы, чтобы стать фронтенд-разработчиком. Нужный для обучения материал можно найти на бесплатных ресурсах.
Например, вот тут много курсов для начинающих:
— htmlacademy.ru
— hexlet.io
— wayup.in
— itproger.com
— stepik.org
Для продолжающих тоже есть площадки с обучающими материалами. Например сайт htmlacademy или канал ВебКамеди. Но ещё больше полезных ресурсов по изучению HTML и CSS вы можете найти в этой статье.
@prog_point #web #frontend #html #css
HTML Academy
Журнал «Доктайп»
Сборник понятных способов стать веб-разработчиком и не страдать.
Детальный справочник для веб-разработчиков от А до Я
Если вы искали ресурс, где в одном месте собрано всё, что нужно знать по фронтенд-разработке, то рекомендуем вам Дока. Здесь собрана информация как по основам вёрстки, так и по фреймворкам, JS и TS. Абсолютно бесплатно!
https://doka.guide/
#шпаргалка #веб #javascript #html #css
Если вы искали ресурс, где в одном месте собрано всё, что нужно знать по фронтенд-разработке, то рекомендуем вам Дока. Здесь собрана информация как по основам вёрстки, так и по фреймворкам, JS и TS. Абсолютно бесплатно!
https://doka.guide/
#шпаргалка #веб #javascript #html #css
Forwarded from Сохранёнки программиста
Целых 10 шпаргалок по HTML и CSS
В шпаргалках как обычно — полезная всячина, которую удобней хранить где-то в заметках, чем теснить в памяти. Ту часть, которая в картинках, прикрепляем к посту.
Полный список шпаргалок в источнике.
#шпаргалка #web #html #css
В шпаргалках как обычно — полезная всячина, которую удобней хранить где-то в заметках, чем теснить в памяти. Ту часть, которая в картинках, прикрепляем к посту.
Полный список шпаргалок в источнике.
#шпаргалка #web #html #css
Media is too big
VIEW IN TELEGRAM
21 рекомендация по HTML
Нашёл материал для тех, кто решил погрузиться в мир фронтенд-разработки. Здесь собраны довольно базовые советы. Тем не менее, они будут крайне полезны тем, кто только начинает свой путь. Вы найдёте рекомендации по семантической вёрстке, правильному использованию базовых тегов и многому другому.
Подробнее в материале.
#html #веб
Нашёл материал для тех, кто решил погрузиться в мир фронтенд-разработки. Здесь собраны довольно базовые советы. Тем не менее, они будут крайне полезны тем, кто только начинает свой путь. Вы найдёте рекомендации по семантической вёрстке, правильному использованию базовых тегов и многому другому.
Подробнее в материале.
#html #веб
Media is too big
VIEW IN TELEGRAM