Найти в Дзене
Как стилизовать type="radio" - html / css
type="radio" один из самых сложно поддающихся стилизации элиментов в html. Его вид напрямую зависит от настроек браузера и везде выглядит по-разному. Если мы хотим стилизовать инпут, нам нужно полностью сбросить вид стандартных кружков и добавить стилизацию для "накладных" HTML: делаем сам инпут: <input class="rooms-radio-real" type="radio" value="1"> и рядом делаем span для "накладной" опции <span class="rooms-radio-fake">1</span> CSS: (сбрасываем все стили) .rooms-radio-real { opacity: 0; appearance:...
2 года назад
Расширения для VSC для Front-end разработчика
Безусловно, существует огромное количество расширений, которые может использовать разработчик, но проблема заключается в том, что их так много, что выбирать и искать что-то под себя очень трудно. Здесь собрано несколько расширений, которые я лично использую и рекомендую каждому. 1. Auto Rename Tag Очень удобное расширение, которое самостоятельно переименновывает теги и вам не нужно за этим следить. 2. VS HTML to CSS Одно из моих любимых расширений. Здесь вы задаёте все теги, классы и их id, а затем при помощи простой комбинации плагин переносит названия в CSS файл...
2 года назад
С чего начать Front-end разработчику? (часть 1)
Самый сложный шаг для взрослого человека при смене профессии - это, как ни странно, начать. Перед нами открывается огромное количество страхов, вопросов, непонимания и просто желания всё бросить. Я, безусловно, не исключение. Чем больше ты начинаешь учить, искать и узнавать, тем больше кажется, что ты просто ничего не знаешь и ничего не умеешь. Это совершенно нормально. Решение? Системное изучение, повторение и совершенствование своих навыков. Чем больше вы практикуесь, решаете задачи и фиксите...
2 года назад
ClassList - JS
При использовании прослушивания событий у нас может возникнуть необходимость добавлять класс при клике или, например, наведении мыши. Здесь мы можем столкнуться с проблемой, что же нам выбрать: ✅ add добавит класс один раз; При первом клике у нас сработает прописанное событие, но далее, сколько бы раз мы не нажимали на кнопку - ничего не произойдет до перезагрузки страницы...
2 года назад
Генерация размера фигуры JS
1. Начнём с создания переменных: const circle = document.createElement('div') 2. Зададим функцию, которая будет генерировать рандомные числа: function getRandomNumber (min, max){ return Math.round(Math.random() * (max - min) + min) } //допустим, что у нашего обьекта вот такие размеры const size = getRandomNumber(10,60) circle.style.width = `${size}px` circle.style.height = `${size}px` 3. Далее нам нужны константы, которые всегда будут находиться в пределах нашего поля и нам не нужно будет каждый раз вводить значения ширины и высоты const {width, height} = board...
2 года назад
Если нравится — подпишитесь
Так вы не пропустите новые публикации этого канала