✅ Значения свойства list-style-type
Данное свойство определяет как будут маркироваться элементы списка, в шпаргалке представлены все возможные значения, принимаемые им.
Также существует схожее свойство list-style-image. С помощью него можно задать свой маркер в виде изображения
@code_ready | #шпаргалка #css
Данное свойство определяет как будут маркироваться элементы списка, в шпаргалке представлены все возможные значения, принимаемые им.
Также существует схожее свойство list-style-image. С помощью него можно задать свой маркер в виде изображения
@code_ready | #шпаргалка #css
🔥34👍12
✅ Вопрос с собеседования
Чем отличается map от set в JavaScript?
Ответ:
Map и Set - это две различные структуры данных в JavaScript, которые предназначены для хранения уникальных значений.
• map – коллекция пар ключ-значение. ключи могут быть любого типа данных, включая объекты или примитивные значения. Используется для хранения пар ключ-значение,где у каждого элемента есть свой ключ, который не может повторяться
• set – коллекция уникальных значений, так называемое «множество». Используется для хранения уникальных значений, и не создает 2 и более одинаковых, во многих ЯПах эта структура называется множеством
@code_ready | #собеседование
Чем отличается map от set в JavaScript?
Ответ:
• map – коллекция пар ключ-значение. ключи могут быть любого типа данных, включая объекты или примитивные значения. Используется для хранения пар ключ-значение,где у каждого элемента есть свой ключ, который не может повторяться
• set – коллекция уникальных значений, так называемое «множество». Используется для хранения уникальных значений, и не создает 2 и более одинаковых, во многих ЯПах эта структура называется множеством
@code_ready | #собеседование
👍36🔥6❤1
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Загрузка файлов на JavaScript
Пожалуй лучшее решение для интуитивно понятного интерфейса для загрузки файлов, это так называемый "Drag and Drop".
Пользователь может,как просто перетащить файл в выделенное поле, так и выбрать его самостоятельно
Готовый код для этого веб-приложения, я оставлю в моем репозитории на GitHub
@code_ready | #обучение #github
Пожалуй лучшее решение для интуитивно понятного интерфейса для загрузки файлов, это так называемый "Drag and Drop".
Пользователь может,как просто перетащить файл в выделенное поле, так и выбрать его самостоятельно
Готовый код для этого веб-приложения, я оставлю в моем репозитории на GitHub
@code_ready | #обучение #github
👍44🔥17
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Как создать loader на сайт?
Анимация довольно простая, но очень эффективная. Занимает немного строк кода в Html и Css. Всё что нужно, это создать keyframes анимацию и с помощью transform менять размер каждого блока в два раза.
@code_ready | #обучение #css
Анимация довольно простая, но очень эффективная. Занимает немного строк кода в Html и Css. Всё что нужно, это создать keyframes анимацию и с помощью transform менять размер каждого блока в два раза.
<div class="loader">
<span class="loader__element"></span>
<span class="loader__element"></span>
<span class="loader__element"></span>
</div>
.loader {
display: flex;
align-items: center;
justify-content: center;
}
.loader__element {
border-radius: 100%;
border: 5px solid #555;
margin: calc(5px *2);
}
.loader__element:nth-child(1) {
animation: preloader .6s ease-in-out alternate infinite;}
.loader__element:nth-child(2) {
animation: preloader .6s ease-in-out alternate .2s infinite;}
.loader__element:nth-child(3) {
animation: preloader .6s ease-in-out alternate .4s infinite;}
@keyframes preloader {
100% { transform: scale(2); }}
@code_ready | #обучение #css
👍32🔥15❤1
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Как отслеживать свое рабочее время?
WakaTime — это плагин отслеживания времени для разработчиков. Он интегрируется в текстовые редакторы и IDE, а также в браузеры, такие как Chrome.
Предоставляет автоматическое отслеживание времени, аналитику использования языков программирования и инструменты для повышения производительности.
@code_ready | #плагин
WakaTime — это плагин отслеживания времени для разработчиков. Он интегрируется в текстовые редакторы и IDE, а также в браузеры, такие как Chrome.
Предоставляет автоматическое отслеживание времени, аналитику использования языков программирования и инструменты для повышения производительности.
@code_ready | #плагин
🔥28👍7
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Адаптивное модальное окно
Часто возникает задача создания модального окна? Данный скрипт является примером его реализации, с применением адаптивности.
Окно закрывается как при нажатии на крестик в верхнем правом углу,так и при нажатии на любую точку вне окна
😸 Готовый код для этого примера, я оставлю в моем репозитории на GitHub
@code_ready | #обучение #github
Часто возникает задача создания модального окна? Данный скрипт является примером его реализации, с применением адаптивности.
Окно закрывается как при нажатии на крестик в верхнем правом углу,так и при нажатии на любую точку вне окна
@code_ready | #обучение #github
Please open Telegram to view this post
VIEW IN TELEGRAM
👍39🔥8
✅ Фильтры к фрагментам элемента
Благодаря свойству backdrop-filter в CSS, вы можете применить фильтры к элементу, который находится за ним, создавая уникальные и привлекательные визуальные эффекты.
Может принимать следующие значения:
• none — фильтры не применяются (по умолчанию)
• blur (px) — размывает элемент
• brightness (%) — изменяет яркость
• contrast (%) — изменяет контрастность
• grayscale (%) — преобразует элемент в оттенки серого
• hue-rotate (градус) — вращает цветной круг элемента
• invert (%) — инвертирует цвета
• opacity (percentage) — изменяет прозрачность
• saturate (%) — изменяет насыщенность цветов
• sepia (%) — применяет сепийный фильтр к элементу
👉 @code_ready | #свойство #css
Благодаря свойству backdrop-filter в CSS, вы можете применить фильтры к элементу, который находится за ним, создавая уникальные и привлекательные визуальные эффекты.
Может принимать следующие значения:
• none — фильтры не применяются (по умолчанию)
• blur (px) — размывает элемент
• brightness (%) — изменяет яркость
• contrast (%) — изменяет контрастность
• grayscale (%) — преобразует элемент в оттенки серого
• hue-rotate (градус) — вращает цветной круг элемента
• invert (%) — инвертирует цвета
• opacity (percentage) — изменяет прозрачность
• saturate (%) — изменяет насыщенность цветов
• sepia (%) — применяет сепийный фильтр к элементу
👉 @code_ready | #свойство #css
👍39🔥11
✅ Вопрос с собеседования
Что такое деструктуризация в JavaScript?
Ответ:
• Деструктуризация в JavaScript — это синтаксический сахар, который позволяет нам извлекать данные из объектов и массивов и присваивать их переменным в одном шаге. Этот синтаксис упрощает работу с данными, позволяя писать менее многословный и более читаемый код.
• Кроме того, деструктуризация также позволяет нам обмениваться значениями переменных без использования дополнительной переменной.
👉 @code_ready | #собеседование
Что такое деструктуризация в JavaScript?
Ответ:
• Кроме того, деструктуризация также позволяет нам обмениваться значениями переменных без использования дополнительной переменной.
В первом примере мы создаем объект с тремя свойствами. После, достаём эти свойства из объекта и присваиваем их переменным с теми же именами.
Во втором примере, в массиве достаем первые два значения без циклов, так же с помощью этой особенности языка.
👉 @code_ready | #собеседование
👍38🔥6👎1
✅ Значения свойства filter
filter часто используется в совершенно разных целях, данная шпаргалка представляет собой все принимаемые значения этого свойства.
@code_ready | #шпаргалка #css
filter часто используется в совершенно разных целях, данная шпаргалка представляет собой все принимаемые значения этого свойства.
@code_ready | #шпаргалка #css
🔥25👍9👎1
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Готовое меню авторизации
Данный код представляет собой простое готовое меню авторизации для вашего сайта на градиентном фоне, написанное при помощи CSS.
Поле ввода пароля автоматически шифруется "*".
👉 @code_ready | #обучение #css
Данный код представляет собой простое готовое меню авторизации для вашего сайта на градиентном фоне, написанное при помощи CSS.
Поле ввода пароля автоматически шифруется "*".
<form action="/login"method="post" class="login-form">
<label for="username" class="login-form__label">Username:</label>
<input type="text" id="username" name="username" class="login-form__input">
<label for="password" class="login-form__label">Password:</label>
<input type="password" id="password" name="password" class="login-form__input">
<button type="button" class="login-form__submit">Submit</button>
</form>
Продолжение CSS кода, я оставил в комментариях под этим постом, ставь реакцию и пользуйся) 👍🔥
👉 @code_ready | #обучение #css
🔥43👍25👎6
✅ Свойство direction в CSS
С помощью свойства direction, вы можете изменить направление текста.
Принимает следующие значения:
• ltr — слева направо (по умолчанию)
• rtl — справа налево
• inherit — наследует значение от родительского элемента
Применяется к элементам, в которых важно учитывать направление текста, например, при работе с разными языками.
👉 @code_ready | #свойство #css
С помощью свойства direction, вы можете изменить направление текста.
Принимает следующие значения:
• ltr — слева направо (по умолчанию)
• rtl — справа налево
• inherit — наследует значение от родительского элемента
Применяется к элементам, в которых важно учитывать направление текста, например, при работе с разными языками.
👉 @code_ready | #свойство #css
👍28🔥8
Какого метода строки не существует в JavaScript?
Anonymous Quiz
22%
charAt
11%
trim
56%
merge
11%
includes
👍21🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Конвертор валют на JavaScript
Данный код представляет собой конвертации между рублями, долларами и евро.
Задействован APi ЦБ РФ, для актуального курса валют.
👉 @code_ready | #обучение #js
Данный код представляет собой конвертации между рублями, долларами и евро.
Задействован APi ЦБ РФ, для актуального курса валют.
<input type="number" id="amount" placeholder="Введите сумму">
<select id="from">
<option value="RUB">RUB</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
<select id="to">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="RUB">RUB</option>
</select>
<button onclick="convert()">Конвертировать</button>
<p id="result"></p>
JavaScript код оставлю в комментариях под этим постом, ставь реакцию и пользуйся) 👍🔥
👉 @code_ready | #обучение #js
👍40🔥28
✅ Вопрос с собеседования
Что такое функция setTimeout в JavaScript?
Ответ:
• setTimeout — это функция, которая позволяет отложить выполнение функции на определённое время. Функция будет вызвана один раз по истечении этого интервала.
• Она принимает два обязательных аргумента: функцию, которую нужно выполнить, и время задержки в миллисекундах. Также можно передать дополнительные аргументы, которые будут переданы в вызываемую функцию.
👉 @code_ready | #собеседование
Что такое функция setTimeout в JavaScript?
Ответ:
• Она принимает два обязательных аргумента: функцию, которую нужно выполнить, и время задержки в миллисекундах. Также можно передать дополнительные аргументы, которые будут переданы в вызываемую функцию.
В примере на картинке, мы задаем чтобы функция выполнилась через 5 секунд.
Однако, выполнение функции, переданной в setTimeout, отменяется с помощью clearTimeout, и сообщение "This will not be logged" никогда не появится в консоли.
👉 @code_ready | #собеседование
👍34🔥6
✅ Псевдокласс ::firstletter
Данный псевдокласс позволяет стилизовать первую букву текстового элемента. Он часто используется для создания инициалов или других типографических эффектов.
Принимаемые свойства:
• color — цвет первой буквы
• background-color — цвет фона
• font-family — шрифт первой буквы
• font-size — размер шрифта
• font-weight — жирность шрифта
• line-height — высота строки
• text-decoration — текстовое оформление (подчеркивание, перечеркивание)
• text-transform — преобразование текста (заглавные буквы, прописные буквы)
• margin — внешние отступы
• padding — внутренние отступы
• border — граница первой буквы
• float — Выравнивание (например: слева, справа).
• text-shadow — тень текста
👉 @code_ready | #псевдокласс #css
Данный псевдокласс позволяет стилизовать первую букву текстового элемента. Он часто используется для создания инициалов или других типографических эффектов.
Принимаемые свойства:
• color — цвет первой буквы
• background-color — цвет фона
• font-family — шрифт первой буквы
• font-size — размер шрифта
• font-weight — жирность шрифта
• line-height — высота строки
• text-decoration — текстовое оформление (подчеркивание, перечеркивание)
• text-transform — преобразование текста (заглавные буквы, прописные буквы)
• margin — внешние отступы
• padding — внутренние отступы
• border — граница первой буквы
• float — Выравнивание (например: слева, справа).
• text-shadow — тень текста
👉 @code_ready | #псевдокласс #css
👍49🔥12
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Создание анимированного фона в тексте
Для создания красивого фона для текста используется свойство background-image, которое принимает значение в виде фото, либо ссылки на любое фото и видео через url()
• color: transparent — делает текст прозрачным. Это необходимо для того, чтобы текст был видимым только за счет фонового изображения.
• -moz-background-clip и -webkit-background-clip — специальные свойства для других браузеров, которые ограничивают отображение фонового изображения только областью текста.
👉 @code_ready | #обучение #css
Для создания красивого фона для текста используется свойство background-image, которое принимает значение в виде фото, либо ссылки на любое фото и видео через url()
• color: transparent — делает текст прозрачным. Это необходимо для того, чтобы текст был видимым только за счет фонового изображения.
• -moz-background-clip и -webkit-background-clip — специальные свойства для других браузеров, которые ограничивают отображение фонового изображения только областью текста.
h1 {
font-family: sans-serif;
text-align: center;
font-size: 80px;
font-weight: 800;
text-transform: uppercase;
background-image: url(https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExYTlmN2h0MnhhNHFqcDFwaWYxMXd0NjlrZTE0NDBoY3N0M2hiNnY5ayZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XQsEy59pNgaVu6QlGi/giphy-downsized-large.gif);
background-size: cover;
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
}
👉 @code_ready | #обучение #css
👍46🔥22
0604.gif
5.1 MB
✅ Сжатие кода
Плагин Better Minify позволяет минифицировать html, css, js и многие другие языки.
Выбранный файл при команде minify files создает в текущей директории второй файл с названием "имя файла.min.расширение"
👉 @code_ready | #плагин
Плагин Better Minify позволяет минифицировать html, css, js и многие другие языки.
Выбранный файл при команде minify files создает в текущей директории второй файл с названием "имя файла.min.расширение"
👉 @code_ready | #плагин
👍30🔥13😁7👎5
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Адаптивные таблицы
Пользователи сайта могут иметь разную ширину экрана, так как же дать всем удобный доступ к информации из таблицы?
Для таких случаев используют адаптивное изменение таблицы, при маленьком экране она становится вертикальной, при широком горизонтальной
😸 Готовый код для этого примера, я оставлю в моем репозитории на GitHub
👉 @code_ready | #github
Пользователи сайта могут иметь разную ширину экрана, так как же дать всем удобный доступ к информации из таблицы?
Для таких случаев используют адаптивное изменение таблицы, при маленьком экране она становится вертикальной, при широком горизонтальной
👉 @code_ready | #github
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥33👍9👎2
✅ Свойство z-index
С помощью свойства z-index, можно изменять порядок наложения элементов друг на друга по оси z.
Принимает следующие значения:
• auto — не имеет z-индекса (по умолчанию)
• number — целое число, которое задает порядок наложения элементов. Чем больше, тем выше других элементов с меньшим z-индексом.
• inherit — наследует значение от родительского элемента
• initial — устанавливает значение по умолчанию, заданное в браузере.
Применяется к элементам, которые имеют свойство position со значением, отличным от static, и которые перекрывают друг друга.
👉 @code_ready | #свойство #css
С помощью свойства z-index, можно изменять порядок наложения элементов друг на друга по оси z.
Принимает следующие значения:
• auto — не имеет z-индекса (по умолчанию)
• number — целое число, которое задает порядок наложения элементов. Чем больше, тем выше других элементов с меньшим z-индексом.
• inherit — наследует значение от родительского элемента
• initial — устанавливает значение по умолчанию, заданное в браузере.
Применяется к элементам, которые имеют свойство position со значением, отличным от static, и которые перекрывают друг друга.
👉 @code_ready | #свойство #css
🔥26👍12😁3👎2
✅ Вопрос с собеседования
Как работает оператор new в JavaScript?
Ответ:
Оператор new используется в JavaScript для создания новых объектов. Он вызывает конструктор функции, создает новый объект и возвращает его.
Когда мы используем оператор new перед вызовом функции, происходит следующее:
• Создается новый пустой объект.
• Этот объект наследует свойства и методы из прототипа функции.
• Этот объект передается в качестве контекста вызова функции (this внутри функции указывает на новый объект).
• Если функция не возвращает другой объект, то новый объект возвращается автоматически.
👉 @code_ready | #собеседование
Как работает оператор new в JavaScript?
Ответ:
Оператор new используется в JavaScript для создания новых объектов. Он вызывает конструктор функции, создает новый объект и возвращает его.
Когда мы используем оператор new перед вызовом функции, происходит следующее:
• Создается новый пустой объект.
• Этот объект наследует свойства и методы из прототипа функции.
• Этот объект передается в качестве контекста вызова функции (this внутри функции указывает на новый объект).
• Если функция не возвращает другой объект, то новый объект возвращается автоматически.
В примере кода мы создаем новый объект с помощью new, так как у нас есть функция-конструктор MyFunction
👉 @code_ready | #собеседование
👍38🔥5👎2