This media is not supported in your browser
VIEW IN TELEGRAM
Фильтрация HTML элементов
В данной реализации при нажатии на ссылку, автор скрывает элементы на странице, которые не соответствуют данной ссылке. При этом, запускает анимацию.
В данной реализации при нажатии на ссылку, автор скрывает элементы на странице, которые не соответствуют данной ссылке. При этом, запускает анимацию.
Какая ширина у тега span?
Anonymous Quiz
15%
500px
78%
ширина содержимого span
1%
100px
6%
ширина окна браузера
This media is not supported in your browser
VIEW IN TELEGRAM
Burger menu на CSS
В качестве кнопки для открытия меню автор использует тег label.
Label он стилизует с помощью вложенного элемента span, а также псевдоэлементов.
Открытие меню автор анимирует с помощью свойства transform.
В качестве кнопки для открытия меню автор использует тег label.
Label он стилизует с помощью вложенного элемента span, а также псевдоэлементов.
Открытие меню автор анимирует с помощью свойства transform.
Генераторы CSS кода
Генератор CSS-кода — весьма удобный инструмент, который может сэкономить веб-разработчику немало времени, а также уберечь от лишних ошибок. Кроме того, ваш код станет более читабельным.
CSS Click Chart - C помощью этого инструмента можно посмотреть, как реализуется действие на CSS. Также отображается поддержка браузерами.
Web Code Tools - Продвинутый инструмент работы с разными элементами CSS. Кроме того, можно генерировать код на HTML, JSON.
CSS CheatSheet - Динамическая шпаргалка для CSS.
Spritebox - Создаёт CSS-спрайты — с их помощью мелкие картинки объединяются в один файл и выводятся с помощью CSS.
Clean CSS - Позволяет форматировать, минимизировать или украсить свой код.
CSS Animate - Cоздаёт анимации на CSS.
Генератор CSS-кода — весьма удобный инструмент, который может сэкономить веб-разработчику немало времени, а также уберечь от лишних ошибок. Кроме того, ваш код станет более читабельным.
CSS Click Chart - C помощью этого инструмента можно посмотреть, как реализуется действие на CSS. Также отображается поддержка браузерами.
Web Code Tools - Продвинутый инструмент работы с разными элементами CSS. Кроме того, можно генерировать код на HTML, JSON.
CSS CheatSheet - Динамическая шпаргалка для CSS.
Spritebox - Создаёт CSS-спрайты — с их помощью мелкие картинки объединяются в один файл и выводятся с помощью CSS.
Clean CSS - Позволяет форматировать, минимизировать или украсить свой код.
CSS Animate - Cоздаёт анимации на CSS.
Какой будет результат выполнения функции?
Anonymous Quiz
32%
SyntaxError
21%
undefined
42%
3
5%
null
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация букв при печати.
При реализации использованы css анимации и JavaScript для определения цвета летящих букв, и их положения.
Кликните по «бумаге», чтобы взять ее в фокус, и начните вводить свой текст.
При реализации использованы css анимации и JavaScript для определения цвета летящих букв, и их положения.
Кликните по «бумаге», чтобы взять ее в фокус, и начните вводить свой текст.
This media is not supported in your browser
VIEW IN TELEGRAM
Айтишники, хорошая новость! 👾
Появился канал с удалёнными вакансиями в IT: @theyseeku_it
Здесь ищут девелоперов, разработчиков, проект-менеджеров, UX/UI-дизайнеров, SEOшников и других специалистов.
• Вакансии от известных IT-компаний;
• Заработная плата от 30 до 500 тысяч рублей;
• Должности для опытных и начинающих специалистов;
• Только удалённая занятость.
Присоединяйся и стань частью IT-индустрии с проверенным работодателелем.
Появился канал с удалёнными вакансиями в IT: @theyseeku_it
Здесь ищут девелоперов, разработчиков, проект-менеджеров, UX/UI-дизайнеров, SEOшников и других специалистов.
• Вакансии от известных IT-компаний;
• Заработная плата от 30 до 500 тысяч рублей;
• Должности для опытных и начинающих специалистов;
• Только удалённая занятость.
Присоединяйся и стань частью IT-индустрии с проверенным работодателелем.
Какое значение примет 1vmax, если ширина вьюпорта 1000px, а высота 800px?
Anonymous Quiz
35%
100px
20%
80px
14%
8px
31%
10px
CSS - Медиа запросы
Медиа запросы (media queries) - это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений параметров устройств. Они предназначены для создания адаптивных сайтов.
Синтаксис:
and - требует обязательного выполнения всех условий.
, - требует обязательного выполнения хотя бы одного условия.
not - предназначен для отрицания условия.
Медиа функции:
width - указывает требования к ширине области просмотра устройства.
min-width - задаёт минимальную ширину области viewport.
max-width - определяет максимальную рабочую область устройства.
height, min-height и max-height - задают требования аналогично, но в отношении высоты viewport.
Пример:
Медиа запросы (media queries) - это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений параметров устройств. Они предназначены для создания адаптивных сайтов.
Синтаксис:
@media условие {
/* стили (они будут выполняться, если устройство соответствует указанному условию)
}
Логические операторы:and - требует обязательного выполнения всех условий.
, - требует обязательного выполнения хотя бы одного условия.
not - предназначен для отрицания условия.
Медиа функции:
width - указывает требования к ширине области просмотра устройства.
min-width - задаёт минимальную ширину области viewport.
max-width - определяет максимальную рабочую область устройства.
height, min-height и max-height - задают требования аналогично, но в отношении высоты viewport.
Пример:
@media not screen and (orientation: portrait),
(min-width: 992px){ /* Стили CSS ... */ }Мы теперь есть ВКонтакте, заходите, контент отличается от телеграма
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация Canvas + Javanoscript
Автор использует Canvas, и в Javanoscript создает снежинки, которым добавляет анимацию падения.
Автор использует Canvas, и в Javanoscript создает снежинки, которым добавляет анимацию падения.
🔴 Фронтенд не просто учить, правда?
Лично мне знакомы ощущения когда не знаешь с чего начать, в голове каша, вроде все понимаешь, но приложение тебя не слушается и спросить некого, не можешь оценить задачу, чувствуешь что не дотягиваешь
Тогда нужна отправная точка знаний с которой уже можно развиваться в хорошем темпе в хорошей компании, с ранее размещенных курсов получил отличный фидбек и на этот раз посоветую пару специальностей от SkillFactory
Frontend-разработчик
SkillFactory предлагает стать фронтенд-разработчиком с нуля за 6 месяцев. Теоретические блоки по HTML и CSS, JavaScript и видам вёрстки чередуются с практическими заданиями в специальном тренажёре.
Курс рассчитан на новичков в разработке и на тех, кто хочет повысить свой скилл во фронтенде. В свою очередь, команда наставников и персональный ментор всегда придут на помощь.
Fullstack-разработчик на JavaScript
А этот курс уже посерьезней - он на 12 месяцев и финальный проект там - это
сайт каршеринга с адаптивным интерфейсом на JS+React+Redux и серверной частью на Node.js + Nest.js с подключением к высоконагруженной базе данных и к платежной системе, с личным кабинетом и нотификациями
P.S. У них сейчас скидки 40%
Лично мне знакомы ощущения когда не знаешь с чего начать, в голове каша, вроде все понимаешь, но приложение тебя не слушается и спросить некого, не можешь оценить задачу, чувствуешь что не дотягиваешь
Тогда нужна отправная точка знаний с которой уже можно развиваться в хорошем темпе в хорошей компании, с ранее размещенных курсов получил отличный фидбек и на этот раз посоветую пару специальностей от SkillFactory
Frontend-разработчик
SkillFactory предлагает стать фронтенд-разработчиком с нуля за 6 месяцев. Теоретические блоки по HTML и CSS, JavaScript и видам вёрстки чередуются с практическими заданиями в специальном тренажёре.
Курс рассчитан на новичков в разработке и на тех, кто хочет повысить свой скилл во фронтенде. В свою очередь, команда наставников и персональный ментор всегда придут на помощь.
Fullstack-разработчик на JavaScript
А этот курс уже посерьезней - он на 12 месяцев и финальный проект там - это
сайт каршеринга с адаптивным интерфейсом на JS+React+Redux и серверной частью на Node.js + Nest.js с подключением к высоконагруженной базе данных и к платежной системе, с личным кабинетом и нотификациями
P.S. У них сейчас скидки 40%
Какое значение примет line-height элемента h1?
Anonymous Quiz
24%
48px
20%
2px
39%
32px
7%
16px
10%
24px
This media is not supported in your browser
VIEW IN TELEGRAM
Всплывающее окно на чистом CSS
Автор использует кастомный checkbox для открытия выплывающего окна, которое он анимирует с помощью CSS свойства transition.
Автор использует кастомный checkbox для открытия выплывающего окна, которое он анимирует с помощью CSS свойства transition.