Как работает атрибут `autocomplete` в HTML и зачем он нужен
Пример:
В этом примере браузер сможет предложить варианты для полей "Имя" и "Эл. почта" на основе данных, которые пользователь вводил ранее.
Значение
Этот атрибут повышает удобство пользователей, сокращая время на заполнение данных и минимизируя ошибки ввода.
#урок #html
Учитесь фронтенду с нами — подпишитесь 💻
autocomplete
— это атрибут, который можно применять к элементам форм, таким как <input>
или <form>
. Он помогает браузеру предлагать пользователю автозаполнение полей формы на основе ранее введённых данных.Пример:
<form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name" autocomplete="name">
<label for="email">Эл. почта:</label>
<input type="email» id="email» name="email" autocomplete="email">
<input type="submit» value="Отправить">
</form>
В этом примере браузер сможет предложить варианты для полей "Имя" и "Эл. почта" на основе данных, которые пользователь вводил ранее.
Значение
autocomplete
может быть как on (включено), так и off (выключено), а также иметь более конкретные значения, как в примере выше — name
, email
.Этот атрибут повышает удобство пользователей, сокращая время на заполнение данных и минимизируя ошибки ввода.
#урок #html
Полный курс HTML & CSS за 6 часов
Это бесплатный курс на YouTube, где вы узнаете о структуре HTML и разнице между различными тегами, а также способы подключения CSS и базовые стили.
Вы также изучите блочную модель CSS, позиционирование элементов на странице, псевдоклассы и псевдоэлементы. Кроме того, вы научитесь работать с flexbox и использовать его для создания гибких и адаптивных макетов.
В курсе также будет практика на реальных макетах, адаптивная верстка, гриды, Bootstrap, анимации и transitions в CSS.
Успейте посмотреть, пока YouTube ещё работает:
https://youtu.be/TPas02fsuKU
#видео #курс #html #css https://youtu.be/TPas02fsuKU?si=8wn65R5ltccC6wQe
Учитесь фронтенду с нами — подпишитесь 💻
Это бесплатный курс на YouTube, где вы узнаете о структуре HTML и разнице между различными тегами, а также способы подключения CSS и базовые стили.
Вы также изучите блочную модель CSS, позиционирование элементов на странице, псевдоклассы и псевдоэлементы. Кроме того, вы научитесь работать с flexbox и использовать его для создания гибких и адаптивных макетов.
В курсе также будет практика на реальных макетах, адаптивная верстка, гриды, Bootstrap, анимации и transitions в CSS.
Успейте посмотреть, пока YouTube ещё работает:
https://youtu.be/TPas02fsuKU
#видео #курс #html #css https://youtu.be/TPas02fsuKU?si=8wn65R5ltccC6wQe
YouTube
Полный курс HTML & CSS за 6 часов
Привет! Я рада представить вам мой полный курс по HTML и CSS на YouTube! Если вы хотите научиться создавать красивые и функциональные веб-страницы, то этот курс для вас.
Я покажу вам, как клиент взаимодействует с сервером и как использовать текстовый редактор…
Я покажу вам, как клиент взаимодействует с сервером и как использовать текстовый редактор…
Макеты Figma: Сайт для доступа к нейросетям
Сложность: высокая
Ссылка на макет
#figma #макет
Учитесь фронтенду с нами — подпишитесь 💻
Сложность: высокая
Ссылка на макет
#figma #макет
24 CSS-проекта за два с половиной часа
В этом видео собраны 24 задания, на протяжении которых вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и других. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS.
Смотрим тут:
https://youtu.be/TzuWIHGFKCQ
#видео #css #туториал
Учитесь фронтенду с нами — подпишитесь 💻
В этом видео собраны 24 задания, на протяжении которых вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и других. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS.
Смотрим тут:
https://youtu.be/TzuWIHGFKCQ
#видео #css #туториал
YouTube
24 CSS Projects: Loading Animations, Progress Bars, Flashcards & More!
Find out how well you really know CSS with this bumper pack of challenges, all contained in one easy-access video.
✏️ Study this course interactively on Scrimba: https://v2.scrimba.com/css-challenges-c02p
Code is available on the Scrimba course page for…
✏️ Study this course interactively on Scrimba: https://v2.scrimba.com/css-challenges-c02p
Code is available on the Scrimba course page for…
Что делает директива
Пример:
Без строгого режима такие ошибки могли бы остаться незамеченными и привести к неожиданным проблемам в коде.
Как включить строгий режим:
— в начале файла:
— в пределах функции:
Использовать строгий режим рекомендуется всегда, чтобы ваш код был безопаснее и поддерживал лучшие практики.
#урок #javascript
Учитесь фронтенду с нами — подпишитесь 💻
"use strict"
в JavaScript"use strict"
— это способ включить строгий режим в коде JavaScript. Он помогает сделать ваш код более безопасным и чистым, выявляя ошибки, которые в обычном режиме могли бы быть незаметны.Пример:
"use strict";
var x = 1;
delete x; // Ошибка: нельзя удалить объявленную переменную
function test() {
y = 2; // Ошибка: "y" не объявлена
}
test();
Без строгого режима такие ошибки могли бы остаться незамеченными и привести к неожиданным проблемам в коде.
Как включить строгий режим:
— в начале файла:
"use strict";
— в пределах функции:
function myFunction() { "use strict"; /* код */ }
Использовать строгий режим рекомендуется всегда, чтобы ваш код был безопаснее и поддерживал лучшие практики.
#урок #javascript
8 советов, которые сделают JavaScript-код чище
Если у вас много сложного кода и вы не работаете над его очисткой, вам будет очень сложно его поддерживать. Если вы изначально пишите код, не задумываясь о том, как его поддерживать дальше, вам будет очень сложно.
Вот 8 советов, которые сделают JavaScript-код более читабельным и чистым, упростив работу с ним в будущем:
https://nuancesprog.ru/p/19910/
#статья #javascript
Учитесь фронтенду с нами — подпишитесь 💻
Если у вас много сложного кода и вы не работаете над его очисткой, вам будет очень сложно его поддерживать. Если вы изначально пишите код, не задумываясь о том, как его поддерживать дальше, вам будет очень сложно.
Вот 8 советов, которые сделают JavaScript-код более читабельным и чистым, упростив работу с ним в будущем:
https://nuancesprog.ru/p/19910/
#статья #javascript
Ищем шрифты для сайта как настоящие ниндзя
Fonts Ninja — это полезный инструмент, который поможет вам подобрать идеальный шрифт для вашего проекта. Он может определять шрифты на сайтах, сохранять их в закладки, а также подсказать, где взять такой шрифт и является ли он платным.
Fonts Ninja
#инструменты
Учитесь фронтенду с нами — подпишитесь 💻
Fonts Ninja — это полезный инструмент, который поможет вам подобрать идеальный шрифт для вашего проекта. Он может определять шрифты на сайтах, сохранять их в закладки, а также подсказать, где взять такой шрифт и является ли он платным.
Fonts Ninja
#инструменты
fonts.ninja
Discover, buy and download awesome fonts - Fonts Ninja
Fonts Ninja helps designers discover awesome fonts and create stunning designs. Explore thousands of fonts and download them for free or buy premium ones.
Сегодня поговорим о спред-операторе (
Спред-оператор позволяет «разложить» массив или объект на отдельные элементы. Он используется в разных контекстах: при копировании, объединении массивов и объектов, а также при передаче аргументов в функции.
Примеры:
Копирование массива:
Объединение массивов:
Копирование объекта:
Объединение объектов:
Преимущества:
— упрощает операции с массивами и объектами;
— делает код более читабельным;
— помогает избежать мутаций и побочных эффектов.
Теперь, когда вы знаете, как использовать спред-оператор, ваш код станет ещё более элегантным и эффективным!
#урок #javascript
Учитесь фронтенду с нами — подпишитесь 💻
...
) в JavaScriptСпред-оператор позволяет «разложить» массив или объект на отдельные элементы. Он используется в разных контекстах: при копировании, объединении массивов и объектов, а также при передаче аргументов в функции.
Примеры:
Копирование массива:
const originalArray = [1, 2, 3];
const copyArray = [...originalArray];
console.log(copyArray); // [1, 2, 3]
Объединение массивов:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]
Копирование объекта:
const originalObject = { a: 1, b: 2 };
const copyObject = { ...originalObject };
console.log(copyObject); // { a: 1, b: 2 }
Объединение объектов:
const object1 = { a: 1, b: 2 };
const object2 = { c: 3, d: 4 };
const combinedObject = { ...object1, ...object2 };
console.log(combinedObject); // { a: 1, b: 2, c: 3, d: 4 }
Преимущества:
— упрощает операции с массивами и объектами;
— делает код более читабельным;
— помогает избежать мутаций и побочных эффектов.
Теперь, когда вы знаете, как использовать спред-оператор, ваш код станет ещё более элегантным и эффективным!
#урок #javascript
Telegram
Frontend.school() | изучаем HTML, CSS, JavaScript вместе!
Крутым фронтендером не рождаются — им становятся на канале @frontend_school!
Наш чат: @frontend_school_chat
Наша флудилка: @frontend_school_flud
Другие проекты: t.me/addlist/dIq-3zEMMugwZTgy
Мы в VK: vk.com/frontend_school
Связь: @jellyjail
Наш чат: @frontend_school_chat
Наша флудилка: @frontend_school_flud
Другие проекты: t.me/addlist/dIq-3zEMMugwZTgy
Мы в VK: vk.com/frontend_school
Связь: @jellyjail
Выполнение реального заказа на разработку дизайна и вёрстку сайта
Теория и практика — разные вещи. Если вам кажется, что вы уже всё знаете и умеете, то на практике часто оказывается не так. Нашли для вас видео, где фрилансер показывает реальное выполнение заказа в режиме реального времени.
Смотрите, запоминайте и делайте выводы:
https://youtu.be/ofE_sxcIQS4
#видео
Учитесь фронтенду с нами — подпишитесь 💻
Теория и практика — разные вещи. Если вам кажется, что вы уже всё знаете и умеете, то на практике часто оказывается не так. Нашли для вас видео, где фрилансер показывает реальное выполнение заказа в режиме реального времени.
Смотрите, запоминайте и делайте выводы:
https://youtu.be/ofE_sxcIQS4
#видео
YouTube
Выполняю РЕАЛЬНЫЙ ЗАКАЗ дизайн + вёрстка сайта на фрилансе LIVE / Веб-дизайн Figma + Craftum
Создайте сайт с помощью Craftum: https://clck.ru/39bcDz
Зарабатывай вместе с партнерской программой Craftum: https://clck.ru/39bcLL
Реклама: ООО «Юникод», ИНН 7810799137, Erid: LjN8Jta58
Поступил заказ на разработку дизайна лендинга для ниши модульных домой.…
Зарабатывай вместе с партнерской программой Craftum: https://clck.ru/39bcLL
Реклама: ООО «Юникод», ИНН 7810799137, Erid: LjN8Jta58
Поступил заказ на разработку дизайна лендинга для ниши модульных домой.…
Макет Figma: Decipad — интерактивный блокнот
Сложность: средняя
Ссылка на макет
#figma #макет
Учитесь фронтенду с нами — подпишитесь 💻
Сложность: средняя
Ссылка на макет
#figma #макет
Ещё немного про use strict в дополнение к этому посту.
#викторина #javascript
Учитесь фронтенду с нами — подпишитесь 💻
#викторина #javascript
Какое из следующих утверждений о строгом режиме ("use strict") в JavaScript является неверным?
Anonymous Quiz
37%
В строгом режиме недопустимо присваивание значений необъявленным переменным.
31%
В строгом режиме this внутри функции, вызванной как метод объекта, равен undefined по умолчанию.
17%
В строгом режиме запрещено удалять несвойства объектов.
15%
В строгом режиме функции не могут содержать дублирующиеся параметры.
Как работает движок JavaScript, а также что такое JIT-компилятор, стек, куча, память, примитивы, ссылки и сборка мусора
Нашёл для вас статью, где понятно и, главное, наглядно показывается, как работает движок JS и его основные составляющие. Не обязательно пытаться всё это запомнить. Но если прочитаете, то станете лучше понимать механизмы языка. Это точно положительно скажется на качестве вашего кода:
https://nuancesprog.ru/p/21194/
#статья #javascript
Учитесь фронтенду с нами — подпишитесь 💻
Нашёл для вас статью, где понятно и, главное, наглядно показывается, как работает движок JS и его основные составляющие. Не обязательно пытаться всё это запомнить. Но если прочитаете, то станете лучше понимать механизмы языка. Это точно положительно скажется на качестве вашего кода:
https://nuancesprog.ru/p/21194/
#статья #javascript
Frontend_Roadmap_2024_|_Что_должен_учить_фронтенд_разработчик_в.webm
802.9 MB
Что должен учить фронтенд-разработчик в 2024 году
Полезное видео, которое поможет вам сориентироваться в мире фронтенда, наметить для себя основные вехи и темы обучения.
Так как YouTube у многих не работает, мы скачали его для вас. Первоисточник: https://youtu.be/1WRJKgwlX9w
#видео #roadmap
Полезное видео, которое поможет вам сориентироваться в мире фронтенда, наметить для себя основные вехи и темы обучения.
Так как YouTube у многих не работает, мы скачали его для вас. Первоисточник: https://youtu.be/1WRJKgwlX9w
#видео #roadmap
Любите ARIA? Нет, Кипелов тут не причем
ARIA (Accessible Rich Internet Applications) — это набор атрибутов, разработанный для того, чтобы улучшить доступность веб-приложений для людей с ограниченными возможностями. Он помогает разработчикам создавать интерфейсы, которые могут быть более легко интерпретированы вспомогательными технологиями, такими как экранные читалки. Это особенно важно для людей с ограниченным зрением или моторикой.
Основные атрибуты ARIA:
1. aria-label: используется для предоставления текста этикетки для элемента.
2. aria-hidden: указывает, что элемент и его дочерние элементы недоступны для вспомогательных технологий.
3. aria-live: сообщает экранному чтецу об изменениях в содержимом, которые происходят динамически.
4. aria-expanded: указывает состояние раскрытия или сворачивания элементов интерфейса (например, аккордеоны, выпадающие списки).
5. role: Определяет роль элемента интерфейса, помогая вспомогательным технологиям понять его назначение.
Преимущества использования ARIA:
— лучшая доступность: делает ваше приложение доступным для большего круга пользователей;
— социальная ответственность: помогает соблюдать стандарты доступности и поддерживать инклюзивность;
— улучшение SEO: иногда улучшает видимость вашего контента для поисковых систем.
Использование ARIA атрибутов поможет вам создать более доступные и понятные веб-приложения для всех пользователей.
Почитать подробнее можно в этой статье: https://doka.guide/a11y/aria-intro/
#урок #html
Учитесь фронтенду с нами — подпишитесь 💻
ARIA (Accessible Rich Internet Applications) — это набор атрибутов, разработанный для того, чтобы улучшить доступность веб-приложений для людей с ограниченными возможностями. Он помогает разработчикам создавать интерфейсы, которые могут быть более легко интерпретированы вспомогательными технологиями, такими как экранные читалки. Это особенно важно для людей с ограниченным зрением или моторикой.
Основные атрибуты ARIA:
1. aria-label: используется для предоставления текста этикетки для элемента.
<button aria-label="Закрыть">X</button>
2. aria-hidden: указывает, что элемент и его дочерние элементы недоступны для вспомогательных технологий.
<div aria-hidden="true">Этот текст будет игнорироваться.</div>
3. aria-live: сообщает экранному чтецу об изменениях в содержимом, которые происходят динамически.
<div aria-live="polite">Контент будет прочитан экранным чтецом при изменении.</div>
4. aria-expanded: указывает состояние раскрытия или сворачивания элементов интерфейса (например, аккордеоны, выпадающие списки).
<button aria-expanded="false">Меню</button>
5. role: Определяет роль элемента интерфейса, помогая вспомогательным технологиям понять его назначение.
<div role="alert">Это важное сообщение!</div>
Преимущества использования ARIA:
— лучшая доступность: делает ваше приложение доступным для большего круга пользователей;
— социальная ответственность: помогает соблюдать стандарты доступности и поддерживать инклюзивность;
— улучшение SEO: иногда улучшает видимость вашего контента для поисковых систем.
Использование ARIA атрибутов поможет вам создать более доступные и понятные веб-приложения для всех пользователей.
Почитать подробнее можно в этой статье: https://doka.guide/a11y/aria-intro/
#урок #html
Дока
Введение в ARIA — Доступность — Дока
Что такое ARIA и как правильно этим пользоваться.
JavaScript эволюционирует: новые методы и функции для эффективной разработки
Новые функции появились в JavaScript и мы спешим поделиться ими с вами. Здесь вы узнаете про:
— новый метод группировки элементов массива;
— обновление в регулярных выражениях;
— обновлённые промисы;
— новые методы для мутаций массивов.
Интересно? Тогда скорее переходите по ссылке: https://proglib.io/p/javascript-evolyucioniruet-novye-metody-i-funkcii-dlya-effektivnoy-razrabotki-2024-07-22
#статья #javascript
Учитесь фронтенду с нами — подпишитесь 💻
Новые функции появились в JavaScript и мы спешим поделиться ими с вами. Здесь вы узнаете про:
— новый метод группировки элементов массива;
— обновление в регулярных выражениях;
— обновлённые промисы;
— новые методы для мутаций массивов.
Интересно? Тогда скорее переходите по ссылке: https://proglib.io/p/javascript-evolyucioniruet-novye-metody-i-funkcii-dlya-effektivnoy-razrabotki-2024-07-22
#статья #javascript
antizapret-vpn.sh
8.6 KB
Небольшая инструкция, как починить роутер или любое другое устройство, если на нём почему-то перестали работать некоторые популярные сайты: https://dear-class-cb2.notion.site/YouTube-OpenVPN-1d15dceb4d1e4fd0ac07b4f867765557
Файл из инструкции прилагаю на всякий случай.
Да не в тему, но я бился с этим 2 дня. Хочу поделиться результатом своих трудов)
Файл из инструкции прилагаю на всякий случай.
Да не в тему, но я бился с этим 2 дня. Хочу поделиться результатом своих трудов)