Как сделать свою картинку font awesome?

mUchenik,
Спрайты css.yoksel.ru/svg-groups-use
Bg css.yoksel.ru/inline-styles-in-background
Маски https://codepen.io/noahblon/post/coloring-svgs-in-...
URL-encoder for SVG https://yoksel.github.io/url-encoder/

Как сделать свою картинку font awesome?

На icomoon.io можете сгенерировать.
Но только зачем это делать в современном мире не очень ясно.
Используйте спрайты и/или вставляйте инлайном в css.

Наткнулся на нечто новое в верстке и просто не понимаю что делать?

codepen timeline

p.s. тег sass уберите, он вообще не имеет отношения к вопросу.

Как не сужать меню при уменьшении окна?

Markiv07, если к вопросу прикладывать кроме стилей ещё и разметку, то будет проще жить. И вы ответ быстрее получите и нам не нужно играть в угадайку.
А ещё лучше сразу кроме кода, делать песочницу на codepen.io и прикреплять к вопросу.

Ладно, если ваши элементики это div, то, во-первых, ему флекс вообще даром не нужен, во-вторых, он сам лишний.

Теперь со стилями: у меню ширина 50%. Не очень видно от чего, но предположим, что у родителя ширина не фиксированная. Значит, при уменьшении экрана меню становится уже. И в него перестают помещаться div'ы, у которых фикс ширина 340px по 3 в ряд.

Вывод: ответ примерно тот же самый: если вы хотите, чтобы помещалось по 3 элемента в ряду без отступов между ними, их ширина должна быть 33.33%

Альтернатива - гриды в три столбца по 1fr каждый. Совсем ничего считать не нужно.

По какой причине может не работать font-weight?

zeaovede, тоже ход))

Как не сужать меню при уменьшении окна?

Задайте нужный размер во flex-basis или width. Типа 33.33% или просто в px.

Сейчас вы творите что-то странное. Родитель фиксированной в px ширины.
Вам нужно поставить дочерние по три в ряд.
Зачем вы пишете flex-basis: 100%;, зачем вам flex-grow и flex-shrink отличные от 0.
Зачем width: inherit;? Вам же не нужно 340px для дочерних.

По какой причине может не работать font-weight?

zeaovede, дело в том, что нет гарантии, что все браузеры будут поступать одинаково. Я к этому.
Поэтому лучше указывать именно ту жирность, которую вы собираетесь использовать. Также лучше указывать запасной подходящий безопасный шрифт или хотя бы семейство. Чтобы случайно не получить засечки как замену шрифту без засечек.

По какой причине может не работать font-weight?

zeaovede, осталось для ясности попробовать вернуть local, указав верную жирность.
Потом local снова убрать, чтобы обезопасить себя от того, что у пользователя может стоять шрифт какой угодно кривизны.

По какой причине может не работать font-weight?

zeaovede,

Перед этим установливал roboto condensed для фотошопа.

Я поэтому и сказала, удалите local.

Почему у меня не получается учиться, даже когда я все делаю все в точности как в видеоуроках?

Пожалуй добавлю еще мысль: если хочется избавиться от гуглежки и самостоятельных раскопок информации, если такая деятельность действительно доставляет страдания или неудобства, то пересмотрите свои желания уже сейчас и хорошенько подумайте, а стоит ли продолжать расходовать время на айти.
Это не с целью вас обидеть или задеть.
Серьезно. Очень много рабочего, да и свободного времени тратится именно на это. (Да просто потому что обычно это в кайф и интересно :) )

По какой причине может не работать font-weight?

zeaovede,

roboto-condensed не существует с начертанием 600.

Ага. Так я и спрашиваю, зачем вы задаете font-weight: 600;

По какой причине может не работать font-weight?

В первом попавшемся месте в коде, в которое я тыкнула, написано font-weight: 600;. Где у вас подключаются файлы для 600 жирности?
Их браузер рисует обычным bold.

И это явно не только 400

Смущает последняя буква r по названии файла

"/wp-content/themes/eloboost-child/fonts/RobotoCondensed/RobotoCondensed-Lightr.woff2"

И попробуйте убрать local.

Почему у меня не получается учиться, даже когда я все делаю все в точности как в видеоуроках?

и мне приходиться лезть в гугл чтобы это исправить, тратя на это много времени.

Неа. Наоборот. Только в это время вы и учитесь.

Почему у меня не получается учиться, даже когда я все делаю все в точности как в видеоуроках?

Вероятно, потому что у вас не совсем верное представление об обучении, по крайней мере в этой отрасли. Т.е. что именно является обучением, получением навыков и продвижением, а что нет или не в полной мере.

И самое главное. Есть ли способ от этого избавиться?

Ага. Перестать смотреть пошаговые уроки и повторять за лектором.
Если речь про верстку, то берете простенький макет и начинаете верстать самостоятельно пользуясь справочником тегов/атрибутов/свойств и гуглом. При наступлении полного караула, выкладываете проблемное место на codepen.io и приходите, например, сюда, рассказываете что делали, чего ожидали и что пошло не так. Или не сюда. Полно профильных телеграм-чатов и т.д.
Если не про верстку, то аналогично.

Как правильно по БЭМу?

Лев Александров,

Тогда как решать? Каждый делает, как хочет?

Именно так. Причём, возможно, по-разному в разных проектах.

Как увеличить область зачета клика?

1.при нажатии на левый квадратик,делающий галачку плохо срабатывает область нажатия(правая сторона).как можно сделать область зачета клика клика нормальной?

Нормально:
Скрытый с помощью паттерна visually-hidden (гуглится) инпут, после него лейбл, чтобы нажимать можно было в том числе и на текст. У лейбла - псевдо для стилизации под чекбокс.

2.как то можно сделать,чтобы при смене категорий таски задвигались и выдвигались из нужной категории?

Угу.
transition, @keyframes
Но не очень понятно что именно вы для этого делали и в чем именно сложность.

3.подобные проекты,где по большей части работа идет с js можно ложить в портфолио?

Это ваше портфолио, что хотите то и складывайте.

Как сделать такой эффект?

NQUAREx, css.yoksel.ru/radial-gradients

Почему изменяя font-size h1, меняется размер img,?

изменяя font-size у h1, размер картинки стал увеличиваться

Было бы логично, если бы при увеличении шрифта картинка увеличивалась, а при уменьшении наоборот.
Что вас удивляет?

Есть флекс-родитель, в нем два элемента. (Третий зачем-то абсолютом).
При увеличении одного из них увеличивается родитель. Поскольку по умолчанию stretch, то и второй тоже увеличивается.

Наверное... Будет песочница на codepen.io, будет точно.

Но вообще, скорее всего, эта картинка вообще не контентная (т.е. не img). Но нет макета, так что снова не точно.

Как в массиве выделить каждые n элементов?

Игорь Мясников как узнать, что число делится на 6? ;)
Только не забудьте, что счетчик с нуля, а не с 1.

Как правильно по БЭМу?

Сергей delphinpro, ещё обычно к нему прилагаются вариации товар в корзине, товар в подтверждении заказа и т.д.
Но это не аргумент ни в ту ни в другую сторону :)

Как правильно по БЭМу?

Сергей delphinpro, с БЭМ хорошо, "куда повернул, то и вышло" и вариантов решений много.