25 HTML тегов, элементов и атрибутов, которые должен знать каждый фронтендер
#почитать
В HTML есть средства для создания раскрывающихся виджетов, индикаторов прогресса и скалярных значений, переадресации на нужный URL, воспроизведения аудио/видео, сохранения форматирования кода и валидации с помощью regex.
⏱ Список
#почитать
В HTML есть средства для создания раскрывающихся виджетов, индикаторов прогресса и скалярных значений, переадресации на нужный URL, воспроизведения аудио/видео, сохранения форматирования кода и валидации с помощью regex.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7👍3🔥1
JavaScript с нуля до профи
Авторы: Лоренс Ларс Свекис,
М. ван Путтен, Р. Персиваль
Год издания: 2023
#javascript #ru
Скачать книгу
Авторы: Лоренс Ларс Свекис,
М. ван Путтен, Р. Персиваль
Год издания: 2023
#javascript #ru
Скачать книгу
🔥9👍2😁2
Хотите освоить прогрессивный фреймворк для создания веб-приложений на JS?
➡️ Ждем вас на открытом вебинаре 23 октября в 20:00 мск, где мы разберем:
✔️ архитектурные принципы Nest.Js, включая внедрение зависимостей и модульность;
✔️ как создавать маршруты, контроллеры и использовать middleware;
✔️ как работать с базами данных, включая MongoDB, PostgreSQL и MySQL;
✔️ методы тестирования и отладки приложений Nest.Js.
Спикер Николай Лапшин — опытный архитектор, тимлид, преподаватель и разработчик с широким технологическим стеком.
Встречаемся в преддверии старта курса «Node.js Developer». Все участники вебинара получат специальную цену на обучение!
➡️ Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://u.to/caTuIA
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru, erid: LjN8JyLdf
Спикер Николай Лапшин — опытный архитектор, тимлид, преподаватель и разработчик с широким технологическим стеком.
Встречаемся в преддверии старта курса «Node.js Developer». Все участники вебинара получат специальную цену на обучение!
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru, erid: LjN8JyLdf
Please open Telegram to view this post
VIEW IN TELEGRAM
😁7
Сборник CSS-градиентов
#почитать
Подборка 23-х фонов с линейным и радиальным градиентом.
⏱ Читать статью
#почитать
Подборка 23-х фонов с линейным и радиальным градиентом.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9👎2🔥1
Тестирование кода HTML при помощи CSS
#почитать
⏱ Читать статью
#почитать
Давным-давно я написал довольно популярный фрагмент открытого исходного кода под названием REVENGE.CSS (заглавные буквы указаны намеренно). При этом следует сразу сказать, что данный проект не поддерживался уже годами, и если я когда-нибудь все-таки соберусь с силами для его поддержки, то только для того, чтобы добавить значок "Поддержка не планируется". Увы, технически это будет считаться поддержкой.
Тем не менее, мне недавно напомнили о его существовании, потому что, как ни странно, со мной связалась компания, которая хотела спонсировать его разработку. Из этого ничего не вышло, что является обычным для подобных импровизированных предложений. Но это заставило меня снова задуматься о тестировании при помощи возможностей CSS (тестирование целостности HTML с использованием CSS-селекторов) и о том, что могут предложить последние новшества самого CSS.
В двух словах, цель REVENGE.CSS - расстановка визуальных пояснений к HTML элементам, нарушающим шаблон. Он делает так, чтобы плохой HTML элемент выглядел плохо.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🤔2🔥1
Полупрозрачный градиент над картинкой на чистом CSS
#почитать
⏱ Читать статью
#почитать
Я переделывал страницу и захотел немного улучшить скучную секцию «Обо мне».
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8👎2
Шпаргалки для начинающего
верстальщика HTML/CSS
Автор: Эберт Елена
Год издания: 2021
#html #css #ru
Скачать книгу
верстальщика HTML/CSS
Автор: Эберт Елена
Год издания: 2021
#html #css #ru
Скачать книгу
🤔7❤1👍1
Продвинутая адаптивная верстка - CSS container queries
#посмотреть
Технология адаптивной верстки container queries, позволяющая изменять элементы в зависимости от их размера.
⏱ Смотреть на YouTube ⏱15 минут
#посмотреть
Технология адаптивной верстки container queries, позволяющая изменять элементы в зависимости от их размера.
Please open Telegram to view this post
VIEW IN TELEGRAM
👏9
Чистый CSS или фреймворк
#почитать
Пару очевидных и не очень фактов:
• Flex - первый инструмент для работы с макетами, но имеет недостатки.
• Grid позволяет думать о макете в целом и заменяет множество элементов-контейнеров.
• Использование функций min, max и clamp упрощает изменение ширины элементов в адаптивных макетах.
• Aspect-ratio упрощает отображение адаптивных изображений и видео с определенным соотношением сторон.
• Определение пользовательских переменных упрощает использование одного и того же значения цвета в разных местах на странице.
• CSS предоставляет механизм управления состоянием, включая использование псевдокласса focus-within.
• Использование относительных единиц, таких как em и rem, вместо статических значений пикселей может быть более предпочтительным.
• Ориентирование на цвета HSL упрощает вычисление красивой цветовой палитры.
⏱ Читать статью
#почитать
Пару очевидных и не очень фактов:
• Flex - первый инструмент для работы с макетами, но имеет недостатки.
• Grid позволяет думать о макете в целом и заменяет множество элементов-контейнеров.
• Использование функций min, max и clamp упрощает изменение ширины элементов в адаптивных макетах.
• Aspect-ratio упрощает отображение адаптивных изображений и видео с определенным соотношением сторон.
• Определение пользовательских переменных упрощает использование одного и того же значения цвета в разных местах на странице.
• CSS предоставляет механизм управления состоянием, включая использование псевдокласса focus-within.
• Использование относительных единиц, таких как em и rem, вместо статических значений пикселей может быть более предпочтительным.
• Ориентирование на цвета HSL упрощает вычисление красивой цветовой палитры.
Please open Telegram to view this post
VIEW IN TELEGRAM
👏9👎2🔥1
Основы и практика CSS Grid Layout
#почитать
Grid — это способ двумерной раскладки. Именно ДВУмерной, в отличии от Flexbox. Flexbox позволяет полноценно управлять элементами только по одной оси.
⏱ Читать статью
#почитать
Grid — это способ двумерной раскладки. Именно ДВУмерной, в отличии от Flexbox. Flexbox позволяет полноценно управлять элементами только по одной оси.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤2🔥1
Как CSS-специфичность работает в браузере
#почитать
⏱ Читать статью
#почитать
Многие считают CSS сложным. Они придумывают разные оправдания: не хватает способностей понимать CSS, или CSS сам по себе плох.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤2🔥1
Советы по вёрстке от гика
#почитать
▪️почему декоративные элементы, сделанные с помощью чистого CSS могут не отобразиться в режиме повышенной контрастности Windows;
▪️чем можно заменить объявления свойства height со значением auto для изображений;
▪️какой есть нюанс при установке максимальной ширины у группы элементов;
▪️плавную прокрутку без неприятных ситуаций для пользователя;
▪️чего не хватает при использовании фоновых изображений.
⏱ Читать статью
#почитать
▪️почему декоративные элементы, сделанные с помощью чистого CSS могут не отобразиться в режиме повышенной контрастности Windows;
▪️чем можно заменить объявления свойства height со значением auto для изображений;
▪️какой есть нюанс при установке максимальной ширины у группы элементов;
▪️плавную прокрутку без неприятных ситуаций для пользователя;
▪️чего не хватает при использовании фоновых изображений.
Please open Telegram to view this post
VIEW IN TELEGRAM
👏8👍3🤔2🔥1
Виды анимаций на верстке
#почитать
CSS Transition, CSS Animation, SVG animation, JS-Анимацию, JS canvas и JS. WebGL / ThreeJs.
⏱ Читать статью
#почитать
CSS Transition, CSS Animation, SVG animation, JS-Анимацию, JS canvas и JS. WebGL / ThreeJs.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥3
Ограничение Contain
#почитать
Ограничение области применения стилей, компоновок и отрисовок.
⏱ Читать
⏱ Также новый подробный гайд DevNotes
#почитать
Ограничение области применения стилей, компоновок и отрисовок.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍2❤1
#посмотреть
Разбираемся с асинхронностью в JavaScript, изучаем промисы (Promise), async await и узнаем, как работает событийный цикл (Event Loop).
Please open Telegram to view this post
VIEW IN TELEGRAM
🙈7❤2
50 сайтов с бесплатными HTML/CSS/JS шаблонами
#почитать
Источники вдохновения, или творческого заимствования.
⏱ Ознакомиться
#почитать
Источники вдохновения, или творческого заимствования.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13👎1
Ускоряем сайт с помощью CSS
#почитать
Какие проблемы возникают с CSS:
CSS блокирует рендеринг: каждый @import останавливает другие загрузки, пока браузер загружает и анализирует требуемый файл CSS;
CSS влияет на рендеринг. Браузеры рендерят страницу в три этапа: (размер элементов), рисование (текст, цвета и т.д.) и позиционирование. Некоторые свойства CSS запускают все три фазы, что может сказаться на производительности;
Код CSS со временем может разрастаться. Выявление неиспользуемых стилей может быть сложной задачей, а их удаление может привести к хаосу, но разработчики выбирают лёгкий путь и добавляют больше свойств. Таблица стилей становится всё больше. Отсюда вывод: чем больше файл, тем дольше время загрузки и обработки.
⏱ Читать статью
#почитать
Какие проблемы возникают с CSS:
CSS блокирует рендеринг: каждый @import останавливает другие загрузки, пока браузер загружает и анализирует требуемый файл CSS;
CSS влияет на рендеринг. Браузеры рендерят страницу в три этапа: (размер элементов), рисование (текст, цвета и т.д.) и позиционирование. Некоторые свойства CSS запускают все три фазы, что может сказаться на производительности;
Код CSS со временем может разрастаться. Выявление неиспользуемых стилей может быть сложной задачей, а их удаление может привести к хаосу, но разработчики выбирают лёгкий путь и добавляют больше свойств. Таблица стилей становится всё больше. Отсюда вывод: чем больше файл, тем дольше время загрузки и обработки.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
#посмотреть
Плавающие элементы и очистка потока (Floating Elements & Clearfix)
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🤔3❤1