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

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

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

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

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

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

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

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

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

и всё хорошо

Про работу с 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);
  }
}

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

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