Entrar Ainda não tem acesso?
1
resposta

Dicas de como melhora meu codigo

por Jorge Henrique Nicolau da Silva
| 55.5k xp | 73 posts

Eu tenho alguns dados e gostaria de sabe como melhorar podem me da uma dica!

<!DOCTYPE html>
<html lang="pt-br">

<head>

<meta charset="UTF-8">
<title>Lista De Atividade</title>
<link rel="stylesheet" href="style.css"> 

</head>

<body>
    <header>
        <h1 class="titulo-principal">Lista do Jorge</h1>
    </header>
    <h2 class="titulo-centralizado">Tabela</h2>
    <ul>
        <li class="Atividade">Pedalar</li>
        <li class="Atividade">Camilhar</li>
        <li class="Atividade">Estudar</li>
        <li class="Atividade">Socialisar</li>
        <li class="Atividade">Fazer isames de rotina</li>
        <li class="Atividade">Boa alimitação</li>
    </ul>
    

</body>
    
    h1  {
    text-align: center;
    color: brown;
}

 .titulo-principal {
    text-align: center;
    color: #093298;
 }
 h2 {
    text-align: center;
    color: blue;
 }
 .titulo-centralizado{
    text-align: center;
    color: #bcc511;
 }
 .Atividade{
    text-align: center;
    color: rgb(33, 197, 27);
 }

    
    <canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0,0,600,400);
    
</script>
1 resposta
por Lorena Garcia
| 9898.1k xp | 14876 posts
Alura Scuba Team Suporte Educacional

Oi, Jorge! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Notei que você está misturando HTML, CSS e JavaScript diretamente no mesmo arquivo. Isso funciona, mas podemos organizar melhor separando as responsabilidades: HTML para estrutura, CSS para estilo e JavaScript para comportamento.

Veja este exemplo com a estrutura organizada:

<!-- index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Lista de Atividades</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header>
    <h1 class="titulo-principal">Lista do Jorge</h1>
  </header>

  <h2 class="titulo-centralizado">Tabela</h2>

  <ul>
    <li class="atividade">Pedalar</li>
    <li class="atividade">Caminhar</li>
    <li class="atividade">Estudar</li>
    <li class="atividade">Socializar</li>
    <li class="atividade">Fazer exames de rotina</li>
    <li class="atividade">Boa alimentação</li>
  </ul>

  <canvas width="600" height="400"></canvas>
  <script src="script.js"></script>

</body>
</html>

/* style.css */
.titulo-principal {
  text-align: center;
  color: #093298;
}

.titulo-centralizado {
  text-align: center;
  color: #bcc511;
}

.atividade {
  text-align: center;
  color: rgb(33, 197, 27);
}

// script.js
let tela = document.querySelector('canvas');
let pincel = tela.getContext('2d');

pincel.fillStyle = 'lightgrey';
pincel.fillRect(0, 0, 600, 400);
Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!