Вероника

https://codepen.io/kevinweber/pen/dXWoRw

Не знаю как это работает, но попробовать можно :))

К сожалению никак. В этом и есть суть Sass, что всё в одну строку. Если ооочень надо - сделайте на SCSS

Про работу с DOM javascript.ru/tutorial/dom/modify

let i,
    arrayItem,
    rows = arr.length,
    tableBody = document.querySelector('.tbody');

for (i = 0; i < rows; i++) {
    arrayItem = arr[i];
    tableBody.innerHTML += `<tr><td>${arrayItem.id}</td><td>${arrayItem.name}</td><td>${arrayItem.last}</td><td>${arrayItem.com}</td></tr>`;
}

Это по быстрому. Лучше создать отдельный шаблон для строки, особенно если там ещё классы будут, потом вызывать функцию добавления данных в шаблон. Например:

function createImageCardTemplate(image) {
  let imageTemplate = document.createElement("div");
  imageTemplate.classList.add(`${USER_GALLERY_CLASS}__item`, "js-show-image");
  imageTemplate.setAttribute("data-target-image", image.id);
  imageTemplate.innerHTML =
        `<img class="${USER_GALLERY_CLASS}__image" src="${image.filePath}" alt="${image.fileName}">`;

  return imageTemplate;
}

function renderGallery(images) {
  let imagesCount = images.length,
      $image,
      imageData,
      i;

  $gallery.addEventListener("click", bindImageCardClick);

  if (!imagesCount) {
    $gallery.innerText = "No images found";
    return;
  }
  $gallery.innerText = "";

  for (i = 0; i < imagesCount; i++) {
    imageData = images[i];
    $image = createImageCardTemplate(imageData);
    $gallery.appendChild($image);
  }
}

Если проще - при клике вешать класс, например, "active". И задать ему в css стили. Всё :)

$('.faq__question').on('click', function () {
  $('.faq__question').removeClass('active');
  if (!$(this).hasClass('active')) {
    $(this).addClass('active');      
  }
  $(this).next('.faq__answer').slideToggle();
  $(this).closest('.frame').siblings().find('.faq__answer').slideUp();
});

Когда мы искали верстальщика, то сначала звали без тестового. Приходили люди, которые даже не знали как центрировать блок внутри другого блока. У некоторых опыт 1-2 года - по идее должны были знать; у некоторых до года, но это же основы основ.

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

Выполняется за пару часов. Требования - BEM-нэйминг, использование препроцессора, без использования Bootstrap и тому подобное. Элементы должны быть адаптивными, десктоп и мобильная версия были отрисованы. Модальное реализовать через JS (кому сложно - jQuery).

И это задание было сотавлено ТОЛЬКО для проверки знаний, и никакую рабочую силу мы не использовали. Многие делали, откровенно говоря, плохо. Им мы отправляли респонс, почему не будем звать и какие знания человеку надо подтянуть. Кто делал хорошо - приглашали на собеседование уже.

Миксин для scss https://gist.github.com/jonathantneal/d0460e5c2d5d...

Если писать именно на sass, там не должно быть переноса строки, всё в одну

я сделала вот так

.canvas {
    width: inherit;
    height: inherit;
    border-radius: 50%;
}

и всё хорошо

Бесплатно только сыр в мышеловке :)

Как вариант смотреть реализацию уже готовых сайтов и различне туториалы (я именно так и училась), например на codrops или на css-tricks

По поводу курсов спорный вопрос, кому-то заходит, кому-то нет. Зависит от типа курсов и наличии свободного времени. Вообще все курсы, которые идут по потокам - зло. Я за вид обучения, когда есть ментор.

С Figma как дизайнер пыталась поработать, но пока не зашло. Со стороны верстальщика мне совсем не нравится, сервис сыроват.

Sketch отличная программа, но только под macOS.
Как аналог есть AdobeXD, который довольно быстро развивается.

Все мои друзья дизайнеры новичкам люто советуют начинать с Photoshop, но как по-мне там слишком много лишнего функционала. У вас больше времени уйдёт на его освоение, чем на изучение и разработку дизайна.

Есть ещё InVision Studio, открывала посмотерть, врорде у них много шансов ворваться на рынок.

Так как у вас пишутся медиа запросы от меньшего к большему (mobile-first), то в таком порядке они и должны

@mixin mq-small {
  media (min-width: $small) and (max-width: $medium - 1px){
    @content;
  }
}
@mixin mq-small-up {
  media (min-width: $small) {
    @content;
  }
}
@mixin mq-medium {
  media (min-width: $medium) and (max-width: $larger - 1px) {
    @content;
  }
}
@mixin mq-medium-up {
  media (min-width: $medium) {
    @content;
  }
}
@mixin mq-larger {
  media (min-width: $larger) {
    @content;
  }
}

То есть в таком же порядке, как вы вызываете миксины, вы должны их прописать

Линукс и макось это не понты, а уверенность и стабильность, если не хотите, чтобы ваш компьютер вырубился просто так. Изучать линукс нет смысла - вся работа это терминал, браузеры и приложения (IDE)

Зачем вы делаете это отдельным блоком? Повесьте событие `:hover` либо `:focus` (который по клике срабатывает) на ссылки

.toggle-menu__link:hover {
    background-color: rgba(79, 54, 173, 0.6);
}