O seu problema é que você está realizando operações matemáticas com string. `document.getElementById('..').value` retorna uma string e isso gera comportamentos inesperados.

Como resolver isso? 

- ## Conversão! 

Converta os tipos string para número simplismente adicionando um `+` na frente da variável.

Veja como:

```
let inicio = document.getElementById('inicio').value;
let fim = document.getElementById('fim').value;
let passo = document.getElementById('passo').value;
let res = document.getElementById('res');

// convertemos aqui o "fim", "passo" e "inicio" para número
fim = +fim;
passo = +passo;
inicio = +inicio;
```
Veja como ficaria a função `contar`:
```
function contar() {
  let inicio = document.getElementById('inicio').value;
  let fim = document.getElementById('fim').value;
  let passo = document.getElementById('passo').value;
  let res = document.getElementById('res');

  fim = +fim;
  passo = +passo;
  inicio = +inicio;

  res.innerHTML = `Resultado:<br>`;

  if (inicio != 0 && fim != 0 && passo != 0) {
    for (let c = inicio; c <= fim; c += passo) {
      res.innerHTML += ` - ${c}`;
    }
  } else {
    alert(
      '[ERRO] Não foi inserido os valores corretamente, tente novamente.',
    );
  }
}
```
O código funcionando:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function contar() {
      let inicio = document.getElementById('inicio').value;
      let fim = document.getElementById('fim').value;
      let passo = document.getElementById('passo').value;
      let res = document.getElementById('res');

      fim = +fim;
      passo = +passo;
      inicio = +inicio;

      res.innerHTML = `Resultado:<br>`;

      if (inicio != 0 && fim != 0 && passo != 0) {
        for (let c = inicio; c <= fim; c += passo) {
          res.innerHTML += ` - ${c}`;
        }
      } else {
        alert(
          '[ERRO] Não foi inserido os valores corretamente, tente novamente.',
        );
      }
    }

<!-- language: lang-css -->

    body {
      background: rgb(2, 168, 168);
      font: normal 20pt Arial;
      width: 600px;
      margin: auto;
      margin-top: 200px;
    }
    header {
      color: white;
      text-align: center;
    }
    section {
      background: white;
      border-radius: 10px;
      padding: 15px;
      width: 500px;
      margin: auto;
      box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.288);
      text-align: left;
    }
    footer {
      color: white;
      text-align: center;
      font-style: italic;
    }

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html lang="pt-br">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Exercício Repetição</title>
        <link rel="stylesheet" type="text/css" href="estilo.css" />
      </head>
      <body>
        <header>
          <h1 id="title">Repetições</h1>
        </header>
        <section>
          <div id="inputs">
            <p>
              <label>Início:</label>
              <input type="number" id="inicio" />
            </p>
            <label>Fim:</label>
            <input type="number" id="fim" />
            <p>
              <label>Passo:</label>
              <input type="number" id="passo" />
            </p>
            <input type="button" value="Contar" onclick="contar()" />
          </div>
          <div id="res"></div>
        </section>
        <footer>
          <p>&copy; Joao</p>
        </footer>
      </body>
    </html>


<!-- end snippet -->

Adicionei um `-` em `res.innerHTML += ' - ${c}';` apenas para facilitar a visualização...