​Селектор — это часть CSS-правила, которая сообщает браузеру, к каким элементам веб-страницы будет применён стиль

И если вам это мало о чём говорит или на ум приходят только популярные class и id, то вот отличное видео, в котором объясняют эти и менее известные, но очень полезные селекторы. Например, тильды ~, глобальный селектор *, селектор прямого потомка или соседний селектор + — всего 30 штук.

Всё как вы любите — понятно, доступно и с примерами: https://youtu.be/lyu3jAjmLtM

#css #веб #фронтенд

Айтишная реальность

⁠Просто Дарт Вейдер на CSS. Исходники: https://tprg.ru/R8BZ

#css #видео

Айтишная реальность

​​3D на CSS

Однажды британский фронтендер Кит Кларк решил проверить, можно ли с помощью одного лишь CSS разработать полноценное 3D-пространство.

И у него не просто получилось, а получилось очень даже неплохо. Посмотрите сами: https://tprg.ru/Rl7G

#css #видео

Айтишная реальность

«Мужик, а у тебя есть шпаргалка по CSS, HTML и JS? Держи, мужик, шпаргалку по CSS, HTML и JS»

Очень удобная интерактивная шпаргалка, в которой собрана не только полезная информация по работе с CSS, HTML и JS но и различные генераторы, символы, эмодзи и полезные ссылки.

Сохраните, чтобы не потерять: https://htmlcheatsheet.com/css/

#шпаргалки #css #html #javascript

Айтишная реальность

10 шпаргалок по HTML и CSS

Чтобы не теряться в океане тегов и атрибутов, собрали для вас наиболее полные шпаргалки по HTML и CSS. Никакой воды — максимум пользы.

На картинке всего пара, а в статье полный комплект. Забирайте и сохраняйте:

https://tproger.ru/articles/10-shpargalok-po-html-i-css/

#html #css #шпаргалка

Айтишная реальность

Если вы думаете, что вы достаточно скурпулёзный веб-разработчик, только посмотрите на этот чек-лист!

Его создатели говорят, что если пробежаться по нему и поставить галочку напротив каждого пункта, получится куда более лучшая версия вашего же сайта. И это очень похоже на правду, ведь это действительно огромный чек-лист, в котором затронуты совершенно разные стороны вашего сайта: от шрифтов, JS и CSS до SEO и производительности.

Осторожно, назад пути уже не будет: https://frontendchecklist.io

#веб #css #javascript #seo

Айтишная реальность

Если чувствуете, что «плаваете» в CSS Flexbox, вот вам целых 3 игры, которые помогут наконец в нём разобраться

1. Flexbox Zombies: https://mastery.games/flexboxzombies/
Игра с сюжетом. По ходу игры вы учитесь использовать Flexbox и арбалет для охоты на зомби.

2. Flexbox Froggy: https://flexboxfroggy.com/
Суть игры — усадить лягушек на нужные кувшинки. Имеет 24 уровня сложности.

3. Flexbox Defense: http://www.flexboxdefense.com
Имеет 12 уровней сложности. Последние четыре уровня особенно интересные и немного с подвохом.

#фронтенд #css #веб

Айтишная реальность

Простой гайд, как реализовать лайк двойным нажатием с помощью HTML, CSS и JS.

CodePen проекта: https://codepen.io/rebelchris/pen/LYNjaRQ

#css #javascript #html

Айтишная реальность

Это самый милый codepen-проект, который вы сегодня увидите

Этот чихающий дракончик создан, чтобы продемонстрировать возможности библиотеки Three.js. А суть проекта заключается в том, чтобы заставить дракона чихнуть с помощью кликов — чем их больше, тем сильнее чих:

https://codepen.io/Yakudoo/pen/yNjRRL

#css #javascript #html

Айтишная реальность