*transform:translate

Прочитать https://ru.bem.info/methodology/quick-start/#%D0%9C%D0%BE%D0%B4%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%82%D0%BE%D1%80

Про курсы и то как получать скидку в 100 %

Макет который верстали сегодня https://www.figma.com/file/uGtvZIZvQeyaCVhb1aFHf5/BEP-20-(Copy)?node-id=3%3A28360

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

Интересная задача
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 { ... }