Шпаргалка по регуляркам

Интересная задача
https://www.codewars.com/kata/5679aa472b8f57fb8c000047/train/javascript

Удобный роад мап, для фронт энд разработчиков.
Можно тыкать на блоки и учиться, если шарить за англ
https://roadmap.sh/frontend

Полезные штуки для оформления гитхаба https://www.markdownguide.org/basic-syntax/

Где и когда использовать разные контейнеры:

<div> — контейнер общего назначения, не обязательно смысловой. Дивы используются для разметки мелких блоков, создания сетки и декоративных эффектов.
<section> — более крупный логический контейнер, объединяющий содержание по смыслу. Например, блок «О компании», список товаров, раздел личной информации в профиле и так далее.
<article> — самостоятельный, цельный и независимый раздел документа. Этот раздел можно в неизменном виде использовать в различных местах, в том числе и на других сайтах. Примеры: статья, пост в блоге, сообщение на форуме и так далее.

nav
Тег <nav> — специальный элемент для навигационных блоков. Меню и блоки ссылок лучше оборачивать не в дивы, а в навы.

aside
<aside> — это дополнительное содержание, не связанное напрямую с основным. Ещё такие блоки часто называют «сайдбарами» или боковыми панелями.

figure и figcaption
<figure> — цельный и независимый блок содержания. Внутри этого тега размещают демонстрационный материал: изображения, схемы, куски кода и так далее.

<figcaption> — разъясняющий комментарий, или «легенда». Размещается первым или последним элементом внутри <figure>. Пример:

Небольшая шпаргалка, хотя нахуй она нужна, не знаю.

background: [bc] [bi] [br] [bp] [ba];
/* Обозначения:
[bc] — background-color
[bi] — background-image
[br] — background-repeat
[bp] — background-position
[ba] — background-attachment
*/
Если какой-то компонент не указан, то берется значение по умолчанию. Ниже примеры.

background: #e74c3c;
background: url("img.png") no-repeat;
background: url("img.png") 10px 20px;

Множественные фоновые изображения — это очень просто. Берёте знакомое свойство background и перечисляете в нем картинки через запятую. Например:


background:
url("img1.png") no-repeat 0 0,
url("img2.png") repeat-x 50% 50%,
url("img3.png");

Немножечко полезной информации про селекторы. Часть 1.

Контекстные селекторы
Селектор может состоять из нескольких частей, разделённых пробелом, например:

p strong { ... }
ul .hit { ... }
.footer .menu a { ... }
Такие селекторы называют контекстными или вложенными. Их используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент.

Читать их проще всего справа налево:

/* выбрать все теги strong внутри тегов p */
p strong { ... }

/* выбрать все элементы с классом .hit внутри тегов ul */
ul .hit { ... }

/* выбрать все ссылки внутри элементов с классом .menu,
которые лежат внутри элементов с классом .footer */
.footer .menu a { ... }

Соседние селекторы
Соседние селекторы используются для расположенных рядом элементов.

Например, теги <li> в списке являются соседними по отношению друг к другу и вложенными в тег <ul>.

Соседние селекторы записываются с помощью знака +, например, селектор1 + селектор2. Стили применятся к элементу, подходящему под селектор2, только если сразу перед ним расположен элемент, подходящий под селектор1.

Пример. Есть два элемента списка:

<ul>
<li class="hit"></li>
<li class="miss"></li>
</ul>
Селектор .hit + .miss применит стили к элементу с классом miss, так как перед ним есть элемент с классом hit.

Селекторы в CSS можно очень гибко комбинировать. В частности, можно комбинировать контекстные и соседние селекторы.

Дочерние селекторы
Любые элементы, расположенные внутри родительского элемента называются потомками. А дочерними элементами являются ближайшие потомки. Взгляните на пример:

<ul>
<li><span>...</span></li>
<li><span>...</span></li>
</ul>
По отношению к списку <ul> элементы <li> являются дочерними элементами и потомками, а <span> — потомки, но не дочерние элементы.

Контекстные селекторы влияют на всех потомков.

Если нужно задать стили только для дочерних элементов используется дочерний селектор, в котором используется символ >. Например: ul > li или ul > li > span.

<b>Селекторы атрибутов</b>
Селекторы атрибутов позволяют выбирать элементы по любым атрибутам. Они записываются с использованием квадратных скобок: элемент[атрибут]. Примеры селекторов:

input[checked] { ... }
input[type="text"] { ... }
Первый селектор выберет поля формы, у которых есть атрибут checked, второй селектор выберет поля формы, у которых атрибут type имеет значение text.

Очень крутая статья
https://abatickaya.medium.com/%D0%B4%D1%83%D0%BC%D0%B0%D1%8F-%D0%BE-%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D0%B8-%D0%BF%D0%B8%D1%88%D0%B5%D0%BC-css-9032d7b64fb2

Доброе утро! За чашечкой кофэ предлагаю ознакомиться с прекрасной статьёй.
https://isqua.ru/blog/2016/06/19/crash-test-viorstki/