Как украсить сайт на новый год?
Ёлку поставили, салаты нарезали и перемешали, а может ещё подготовить сайт к Новому году? Мы сделали подборку, которая поможет вам в этом: гирлянды, таймер обратного отсчёта и открытки — в статье:
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
Media is too big
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Учимся верстать сайты на гридах
Держите небольшой плейлист с видеоуроками по вёрстке с помощью современных веб-технологий на чистом HTML и CSS без использования препроцессоров, автоматизации и других дополнительных возможностей.
Здесь будут использоваться как Flexbox, так и CSS Grid, а также плавные эффекты при наведении, CSS-анимация, SVG-спрайт и доступность.
#веб #css #html
Держите небольшой плейлист с видеоуроками по вёрстке с помощью современных веб-технологий на чистом HTML и CSS без использования препроцессоров, автоматизации и других дополнительных возможностей.
Здесь будут использоваться как Flexbox, так и CSS Grid, а также плавные эффекты при наведении, CSS-анимация, SVG-спрайт и доступность.
#веб #css #html
Media is too big
VIEW IN TELEGRAM
Верстаем сайт-портфолио для Frontend-разработчика
В резюме разработчики перечисляют hard skills и применяемый стек технологий, но как проверить эти знания? GitHub и его аналоги требуют загрузки проектов, чтобы изучить их детально. У работодателя или потенциального клиента может не быть на это времени.
Собственный сайт-визитка помогает продемонстрировать знания разработчика и может стать визуальным резюме с красивыми анимациями и переходами.
Как создать красивый личный веб-сайт на HTML, CSS и JavaScript с разными темами можно посмотреть в этом видео.
#html #js #фронтенд
В резюме разработчики перечисляют hard skills и применяемый стек технологий, но как проверить эти знания? GitHub и его аналоги требуют загрузки проектов, чтобы изучить их детально. У работодателя или потенциального клиента может не быть на это времени.
Собственный сайт-визитка помогает продемонстрировать знания разработчика и может стать визуальным резюме с красивыми анимациями и переходами.
Как создать красивый личный веб-сайт на HTML, CSS и JavaScript с разными темами можно посмотреть в этом видео.
#html #js #фронтенд
Делаем форму обратного звонка: лендинг, Go и SMS-уведомления
Классный туториал от Екатерины Саяпиной для вашего портфолио. Форма обратного звонка довольно часто используется на сайтах, поэтому умение делать её крайне полезно и может быть отмечено при трудоустройстве.
В этом руководстве вы научитесь не просто верстать блок обратной связи, но и делать бэкенд-часть на Go, работать с Callback и SMS API. Отдельный плюс — для этого вам не нужны сложные фреймворки — только HTML, Go и чуть-чуть JavaScript.
Старт по ссылке: https://habr.com/ru/companies/ru_mts/articles/856232/
#туториал #golang #javascript #html
Классный туториал от Екатерины Саяпиной для вашего портфолио. Форма обратного звонка довольно часто используется на сайтах, поэтому умение делать её крайне полезно и может быть отмечено при трудоустройстве.
В этом руководстве вы научитесь не просто верстать блок обратной связи, но и делать бэкенд-часть на Go, работать с Callback и SMS API. Отдельный плюс — для этого вам не нужны сложные фреймворки — только HTML, Go и чуть-чуть JavaScript.
Старт по ссылке: https://habr.com/ru/companies/ru_mts/articles/856232/
#туториал #golang #javascript #html