DEV Community: Carmichael Ferreira

Introdução ao desenvolvimento web(Front-end) - CSS

Carmichael Ferreira — Fri, 03 Feb 2023 17:34:03 +0000

Esse é o terceiro post de uma série de posts que estou fazendo com o intuito de ajudar iniciantes no mundo do front-end, caso tenha interesse deixo aqui os links para os outros posts da série:

Introdução ao desenvolvimento web(Front-end)

Introdução ao desenvolvimento web(Front-end) - HTML

Link para o repositório com o código final: Código - Introdução ao desenvolvimento web(Front-end) - CSS

O que é CSS?

CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para descrever a apresentação de um documento escrito em HTML. Com o CSS, é possível controlar a aparência de elementos HTML, como cor, fonte, tamanho, espaçamento, posicionamento, etc. O CSS ajuda a separar o conteúdo do documento (HTML) da sua apresentação visual.

A seguir, vou dar alguns exemplos práticos de como o CSS pode ser usado.

Exemplo 1: Configurando a fonte de um elemento

O seguinte trecho de código CSS define a fonte usada em um elemento HTML:

p {
  font-family: Arial, sans-serif;
}

Este código fará com que todos os elementos de parágrafo (<p>) na página usem a fonte Arial. Se a fonte Arial não estiver disponível no sistema do usuário, o navegador usará uma fonte sem serifa padrão.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <p>Este é um parágrafo com fonte Arial.</p>
  </body>
</html>

Exemplo 2: Definindo a cor de um elemento

O seguinte trecho de código CSS define a cor de fundo de um elemento HTML:

h1 {
  background-color: lightgray;
}

Este código fará com que todos os elementos de cabeçalho de primeiro nível (<h1>) na página tenham uma cor de fundo cinza claro.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        background-color: lightgray;
      }
    </style>
  </head>
  <body>
    <h1>Este é um título com fundo cinza claro</h1>
  </body>
</html>

Exemplo 3: Adicionando uma borda a um elemento

O seguinte trecho de código CSS adiciona uma borda sólida de 5 pixels de largura a um elemento HTML:

.bordered {
  border: 5px solid gray;
}

Este código pode ser usado em qualquer elemento HTML que tenha a classe bordered atribuída.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .bordered {
        border: 5px solid gray;
      }
    </style>
  </head>
  <body>
    <div class="bordered">
      <p>Este é um parágrafo com uma borda sólida de 5 pixels de largura.</p>
    </div>
  </body>
</html>

Exemplo 4: Centralizando um elemento

O seguinte trecho de código CSS centraliza um elemento HTML horizontal e verticalmente na página:

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Este código pode ser usado em qualquer elemento HTML que tenha a classe centered atribuída(Importante ressaltar que existem diversas maneiras de se centralizar um elemento utilizando css, é possível centralizar um elemento de forma absoluta, utilizando display flex, grid, dentre outros, essa é somente uma das maneiras existentes).

<!DOCTYPE html>
<html>
  <head>
    <style>
      .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="center">
      <p>Este é um parágrafo centralizado na página.</p>
    </div>
  </body>
</html>

Exemplo 5: Ajustando o espaçamento entre elementos

O seguinte trecho de código CSS ajusta o espaçamento entre elementos HTML:

.spaced {
  padding: 10px;
  margin: 10px;
}

Este código pode ser usado em qualquer elemento HTML que tenha a classe spaced atribuída. A propriedade padding define o espaçamento interno do elemento, enquanto a propriedade margin define o espaçamento externo.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .spaced {
        padding: 10px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="spaced">
      <p>Este é um parágrafo com 10 pixels de espaçamento interno e externo.</p>
    </div>
  </body>
</html>

Exemplo 6: Escondendo um elemento

O seguinte trecho de código CSS esconde um elemento HTML:

.hidden {
  display: none;
}

Este código pode ser usado em qualquer elemento HTML que tenha a classe hidden atribuída.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .hidden {
        display:none;
      }
    </style>
  </head>
  <body>
    <div class="hidden">
      <p>Este é um parágrafo escondido.</p>
    </div>
  </body>
</html>

Exemplo 7: Alterando o tamanho da fonte de um elemento

O seguinte trecho de código CSS altera o tamanho da fonte de um elemento HTML:

.font {
  font-size: 20px;
}

Este código pode ser usado em qualquer elemento HTML que tenha a classe font atribuída. A propriedade font-size define o tamanho da fonte.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .font {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="font">
      <p>Este é um parágrafo com fonte Arial e tamanho de 20 pixels.</p>
    </div>
  </body>
</html>

Exemplo 8: Ajustando a altura e largura de um elemento

O seguinte trecho de código CSS ajusta a altura e largura de um elemento HTML:

.sized {
  height: 200px;
  width: 400px;
}

Este código pode ser usado em qualquer elemento HTML que tenha a classe sized atribuída. A propriedade height define a altura do elemento, e a propriedade width define a largura.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .sized {
        height: 200px;
        width: 400px;
      }
    </style>
  </head>
  <body>
    <div class="sized">
      <p>Este é um parágrafo com 200 pixels de altura e 400 pixels de largura.</p>
    </div>
  </body>
</html>

Exemplo 9: Alinhando o texto de um elemento

O seguinte trecho de código CSS alinha o texto de um elemento HTML:

.text-align {
  text-align: center;
}

Este código pode ser usado em qualquer elemento HTML que tenha a classe text-align atribuída. A propriedade text-align define o alinhamento do texto.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .text-align {
        text-align: center;
      }
  </head>
  <body>
    <div class="text-align">
      <p>Este é um parágrafo centralizado.</p>
    </div>
  </body>
</html>

Exemplo 10: Adicionando uma borda a um elemento

O seguinte trecho de código CSS adiciona uma borda a um elemento HTML:

.border {
  border: 2px solid black;
}

Este código pode ser usado em qualquer elemento HTML que tenha a classe border atribuída. A propriedade border define a borda do elemento, com 2 pixels de largura, solida e de cor preta.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <div class="border">
      <p>Este é um parágrafo com borda preta e 2 pixels de largura.</p>
    </div>
  </body>
</html>

Página completa com CSS

Aqui está uma página completa com CSS utilizando todos os exemplos acima:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .background {
        background-color: lightblue;
      }

      .color {
        color: white;
      }

      .hidden {
        display: none;
      }

      .font {
        font-family: Arial, sans-serif;
        font-size: 20px;
      }

      .sized {
        height: 200px;
        width: 400px;
      }

      .text-align {
        text-align: center;
      }

      .border {
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <div class="background color border">
      <p class="font">Este é um parágrafo com fundo azul claro, cor branca, borda preta, fonte Arial e tamanho de 20 pixels, e centralizado.</p>
    </div>
    <div class="hidden">
      <p>Este é um parágrafo escondido.</p>
    </div>
    <div class="sized">
      <p>Este é um parágrafo com 200 pixels de altura e 400 pixels de largura.</p>
    </div>
  </body>
</html>

Como de costume vou deixar alguns links úteis pra você que quer se aprofundar um pouco mais na tecnologia:

W3Schools - Uma das fontes mais confiáveis e completas para aprender CSS e outras tecnologias web.

Mozilla Developer Network - Oferece uma documentação detalhada e exemplos de código para CSS.

CSS-Tricks - Um blog incrível com tutoriais, artigos e exemplos de código sobre CSS e outras tecnologias web.

https://www.codecademy.com/learn/learn-css- Oferece cursos interativos e desafios práticos para aprender CSS e outras tecnologias web.

FreeCodeCamp - Oferece cursos gratuitos e projetos práticos para ajudá-lo a aprender CSS e outras tecnologias web.

Agradeço por ter lido este artigo sobre o CSS. Espero que você tenha aprendido algo novo e que esteja mais animado para se aventurar no mundo do front-end. Não se esqueça de praticar e sempre estar atualizado com as novas tendências e tecnologias.

Introdução ao desenvolvimento web(Front-end) - HTML

Carmichael Ferreira — Fri, 20 Jan 2023 12:23:24 +0000

Bem-vindo ao meu segundo post sobre introdução ao front-end. No post anterior, eu discuti sobre HTML e como ele é usado para estruturar o conteúdo de uma página web. Neste post, vamos ir um pouco mais além e explorar algumas outras tags HTML utilizando alguns exemplos, em cada exemplo vou explicar o que cada linha faz.

Você pode encontrar o código apresentado nesse post aqui!

Exemplo 1:

<section>
  <p>Este é um parágrafo dentro de uma seção.</p>
  <img src="imagem.jpg" alt="Uma imagem">
</section>

A tag <section> é usada para criar uma seção no documento HTML, por exemplo se eu tenho um site com 2 'seções' cada uma delas será envolta de uma tag section.

A tag <p> é usada para criar um parágrafo de texto, nada mais, nada menos.

A tag <img> é usada para incluir uma imagem em uma página web. O atributo 'src' especifica a localização da imagem e o atributo alt fornece uma descrição alternativa da imagem que aparece no lugar dela caso algum problema aconteça no caminho, você sempre deve usar esse atributo quando estiver trabalhando com imagens para que o seu site seja mais accessível.

Exemplo 2:

<nav>
  <a href="index.html">Home</a> |
  <a href="about.html">Sobre</a> |
  <a href="contact.html">Contato</a>
</nav>

A tag nav é usada para criar uma área de navegação, menus de opções no geral.

A tag <a> é usada para criar um link para outra página externa ou interna. O atributo href especifica o destino do link, quando você clica em algo e é levado para outra parte da página ou para outro site em si, isso é um link.

Exemplo 3:

<article>
  <h2>Título do artigo</h2>
  <p>Conteúdo do artigo.</p>
</article>

A tag <article> é usada para indicar uma seção do site que contém um conteúdo independente, que se fosse tirado dali ainda faria sentido, como por exemplo um artigo ou post de um blog, o conteúdo normalmente é estruturado de maneira bem semelhante a um artigo de jornal ou revista, com um título, autor, data, e corpo principal, mas é importante ressaltar que isso não é uma regra.

A tag <h2> é usada para criar um cabeçalho de nível 2, o que significa que é um cabeçalho menor do que <h1>(Explicado no post anterior).

Exemplo 4:

<aside>
  <h3>Informações adicionais</h3>
  <p>Conteúdo adicional relacionado ao conteúdo principal da página.</p>
</aside>

A tag <h3> como você pode imaginar é utilizada para criar um cabeçalho de nível 3.

A tag <aside> é usada para criar um conteúdo adicional relacionado ao conteúdo principal da página, o dev.to por exemplo faz o uso de 2 tags aside na página de post que você está lendo agora, uma na esquerda e uma na direita da página, caso queira ver você pode inspecionar a página a qualquer momento.

Para inspecionar a página, você pode usar o recurso de inspeção de elementos do navegador web. Isso geralmente pode ser acessado pressionando as teclas "Ctrl + Shift + I" (no Windows) ou "Cmd + Shift + I" (no Mac) enquanto estiver na página que você deseja inspecionar. Isso abrirá uma janela com várias abas, incluindo:

Elements: mostra o código HTML da página, permitindo que você veja como a página é estruturada e que elementos estão sendo usados.
Console: mostra qualquer erro ou saída de console gerada pela página.
Network: mostra informações sobre as solicitações de rede feitas pela página, como imagens, scripts e arquivos CSS.

Existem outras abas e recursos na inspeção de sites porém pretendo falar sobre isso em outro post.

Exemplo 5:

<figure>
  <img src="imagem.jpg" alt="Uma imagem">
  <figcaption>Uma legenda para a imagem</figcaption>
</figure>

A tag <figure> é usada para criar uma seção que contém imagem ou outro conteúdo, como um gráfico ou um código.

A tag <figcaption> é usada para adicionar uma legenda para a imagem.

Em resumo, neste post, discutimos algumas tags HTML adicionais que podem ser úteis na estruturação do conteúdo de uma página web, abaixo segue um exemplo final que utiliza todas as tags que discutimos nesse post e no anterior:

Exemplo final:

<html>
  <header>
    <nav>
      <a href="index.html">Home</a> |
      <a href="about.html">Sobre</a> |
      <a href="contact.html">Contato</a>
    </nav>
  </header>
  <body>
    <section>
      <article>
        <h1>Título do artigo</h1>
        <p>Conteúdo do artigo.</p>
      </article>
      <aside>
        <h3>Informações adicionais</h3>
        <p>Conteúdo adicional relacionado ao conteúdo principal da página.</p>
      </aside>
    </section>
    <figure>
      <img src="imagem.jpg" alt="Uma imagem">
      <figcaption>Uma legenda para a imagem</figcaption>
    </figure>
  </body>
</html>

Este exemplo mostra como as tags discutidas neste post podem ser combinadas para estruturar o conteúdo de uma página web, porém existem muitas outras tags além das que eu mostrei aqui, portanto vou deixar alguns links pra você que quer se aprofundar ainda mais(Inclusive recomendo que acesse elas e tente fazer uma página simples com HTML):

Mozilla docs oferece uma descrição detalhada de todas as tags HTML, incluindo exemplos e informações de compatibilidade do navegador.
W3Schools é um site popular que oferece tutoriais e exemplos para ajudar a aprender HTML e outras tecnologias da web.
FreeCodeCamp tem diversos cursos gratuitos de programação.
Codecademy tem um curso interativo para aprender HTML e CSS.

Obrigado por ler este post! Espero que você tenha aprendido algo novo sobre HTML e como ele pode ser usado para estruturar o conteúdo de uma página web.

Introdução ao desenvolvimento web(Front-end)

Carmichael Ferreira — Thu, 12 Jan 2023 17:52:14 +0000

Esse é o inicio de uma série de posts que vou fazer com o intuito de ajudar você que está entrando no mundo do desenvolvimento web e não faz ideia por onde começar ou o que estudar.

O código desse post se encontra nesse repositório: Clique aqui!

Intruções de configuração:

Recomendo que acompanhe o tutorial com um editor de código aberto para que possa realizar o código junto comigo. Eu utilizo o visual studio code mas você pode usar o que preferir, deixo um passo a passo de como baixar e instalar o visual studio code, caso já tenha um editor de código instalado sinta-se a vontade para pular os passos a seguir.

Primeiro, vá para o site oficial do Visual Studio Code (https://code.visualstudio.com/) e clique no botão "Download" no canto superior direito.
Selecione o sistema operacional que você está usando (Windows, Mac ou Linux) e clique em "Download" novamente.
Aguarde o download do arquivo de instalação do Visual Studio Code. Ele pode levar alguns minutos, dependendo da velocidade da sua conexão à internet.
Quando o download estiver completo, localize o arquivo de instalação no seu computador e execute-o.
Siga as instruções na tela para instalar o Visual Studio Code. Isso pode incluir clicar em "Next", "Install" e "Finish" em diferentes telas.
Depois que a instalação for concluída, abra o Visual Studio Code. Ele pode pedir para você fazer algumas configurações iniciais, como selecionar seu tema e configurações de idioma preferidos.
Agora você está pronto para começar a usar o Visual Studio Code! Para abrir um arquivo ou criar um novo, você pode usar o menu "File" ou pressionar as teclas "Ctrl + O" (Windows) ou "Cmd + O" (Mac).
Para personalizar as configurações do Visual Studio Code, você pode usar o menu "File" > "Settings" ou pressionar as teclas "Ctrl + ," (Windows) ou "Cmd + ," (Mac).
Você também pode baixar extensões para melhorar a sua experiencia de programação, para isso basta clicar em "View" > "Extensions" ou pressionando as teclas "Ctrl + Shift + X" (Windows) ou "Cmd + Shift + X" (Mac).
Agora é só começar a codar e explorar as funcionalidades do Visual Studio Code!

Dentro do desenvolvimento web temos o back-end e o front-end, mas qual a diferença entre esses 2 afinal?

Front-end é tudo aquilo que você vê e interage quando entra em um site, textos, imagens, botões, formulários, tudo isso é front-end e é o que vamos ver nesse post.
Back-end é tudo que fica por trás do front-end, tudo que é invisível para o usuário final, como por exemplo armazenamento de dados, comunicação com outras aplicações, o objetivo do back-end é garantir que a sua aplicação funcione corretamente e execute as tarefas necessárias.

Fazendo um paralelo o front-end seria como os jogadores em campo em um jogo de futebol enquanto que o back-end seria como os técnicos e tudo o que fazem por trás das cenas.

Todos os sites que você vê na internet utilizam 3 tecnologias como base: HTML, CSS e javascript, mas o que são essas tecnologias?

HTML é uma linguagem de marcação(não confunda com linguagem de programação) e é utilizada para marcar o conteúdo do seu site, é a estrutura de tudo, o esqueleto, a base.

Aqui vai um código super simples escrito em HTML(Não se preocupe se você não entender tudo, vou explicar linha por linha como funciona):

<html>
  <body>
    <h1>Eu sou um título</h1>
  </body>
</html>

O HTML é formado por tags, tudo aqui fica envolto de tags e uma tag nada mais é do que uma "etiqueta", ela indica ao navegador como exibir o conteúdo dentro dela, são escritas entre sinais de menor('<') e maior('>') e geralmente possuem uma abertura e fechamento: <tag>conteúdo da tag</tag>, no fechamento utilizamos uma barra depois do sinal de menor para indicar que estamos fechando a tag.

Então se voltarmos ao código acima veremos 3 tags diferentes:

html - diz para o navegador que tudo dentro dela é um site, essa tag sempre estará presente.
body - é uma tag que indica o início do conteúdo do site em si, tudo o que você quiser mostrar aos usuários, como textos, imagens e botões, deve ficar dentro dessa tag, mas qual a diferença entre ela e o html? Parecem a mesma coisa não é? Dentro da tag html podemos ter outra tag além do body que se chama head e dentro dessa tag podemos ter metadados, o título que fica na aba do site, referências para outros arquivos, dentre outros.
h1 - é uma tag para criar um título, o 'h1' indica que é o título principal do site portanto o mais importante, existem 6 diferentes tags relacionadas a títulos, h1, h2, h3, h4, h5 e h6, a única diferença entre elas é a semântica, h1 é a mais importante enquanto a h6 é a menos importante.

Se ainda não abriu o visual studio code essa é a hora! Após abrir crie um arquivo chamado index.html e cole o código que fizemos:

<html>
  <body>
    <h1>Eu sou um título</h1>
  </body>
</html>

E se tudo deu certo esse vai ser o resultado:

Yey! Você criou a sua primeira página HTML, parabéns! Esse é só o início.

Apenas um adendo antes de continuarmos: Caso esteja achando a sua primeira página 'chata' ou 'sem graça', não se preocupe, por enquanto foque apenas em aprender o básico e conforme for aprendendo mais os seus sites vão ser cada vez mais completos!

Existem diversas outras tags no HTML mas por enquanto vamos pular para o CSS já que o intuito desse post é mostrar um pouco das 3 principais tecnologias.

O CSS é utilizado para estilizar elementos HTML, com ele é possível modificar cores, fontes, tamanhos e outros aspectos visuais.

Vamos adicionar uma tag nova no nosso HTML chamada style(A tag style indica ao navegador que o código dentro dela é um estilo CSS):

<html>
  <style></style>
  <body>
    <h1>Eu sou um título</h1>
  </body>
</html>

Dentro dela podemos começar a utilizar o CSS:

<html>
  <style>
    h1 {
      background-color: black;
      color: white;
    }
  </style>
  <body>
    <h1>Eu sou um título</h1>
  </body>
</html>

A sintaxe do CSS é um pouco diferente do HTML, aqui selecionamos tags do HTML e dizemos pro navegador como a formatação delas deve acontecer.

Na primeira linha selecionamos todas as tags h1 no documento e abrimos chaves { isso sinaliza pro navegador onde é o início e o fim de um conjunto de regras CSS.

background-color: black. É uma regra CSS que define a cor de fundo da seleção selecionada(no caso as tags h1) como preto.
color: white. É uma regra de estilo CSS que define a cor da fonte da seleção selecionada (novamente, as tags h1) como branca.
por fim sinalizamos pro navegador o fim das regras fechando chaves }.

Se você já salvou o arquivo e abriu no navegador viu que o resultado é exatamente como eu descrevi:

Como eu disse estamos selecionando todas as tags html, então se adicionarmos um novo h1 o que acontece?

<html>
  <style>
    h1 {
      background-color: black;
      color: white;
    }
  </style>
  <body>
    <h1>Eu sou um título</h1>
    <h1>Eu sou um título 2</h1>
  </body>
</html>

O novo h1 vai ter os mesmos estilos! Legal né? Essa é uma das mágicas do desenvolvimento web, muito código é reutilizável.

O Javascript diferente das outras 2 é uma linguagem de programação, ele é utilizado para criar interações e comportamentos dinâmicos, como por exemplo fazer algo quando o usuário clica com o mouse, ou esconder elementos HTML, mudar regras do CSS, etc.

Vamos adicionar mais uma tag html ao nosso código, a tag script diz pro browser que tudo dentro dela é javascript.

<html>
  <style>
    h1 {
      background-color: black;
      color: white;
    }
  </style>
  <body>
    <h1>Eu sou um título</h1>
    <h1>Eu sou um título 2</h1>
  </body>
  <script>
    alert("Olá mundo!")
  </script>
</html>

O código que adicionamos cria um alerta que dispara assim que a página inicia:

<script>
    alert("Olá mundo!")
</script>

Podemos também adicionar um evento aos títulos que temos na página:

<html>
  <style>
    h1 {
      background-color: black;
      color: white;
    }
  </style>
  <body>
    <h1>Eu sou um título</h1>
    <h1>Eu sou um título 2</h1>
  </body>
  <script>
    alert("Olá mundo!");
    document.querySelectorAll("h1").forEach(
      (title, index) =>
        (title.onclick = () => {
          alert(`Você clicou no ${index} título!`);
        })
    );
  </script>
</html>

document.querySelectorAll("h1") é uma função(Uma função nada mais é do que um trecho de código) que seleciona todas as tags h1 no html.
forEach é uma função JavaScript que itera sobre cada elemento selecionado, então se você tem 2 elementos essa função permite você passar por cada um deles e realizar uma ação.
(title, index) => é uma função, que define dois parâmetros, title e index. Title é o elemento selecionado atual e index é o índice desse elemento na lista de elementos selecionados, no nosso caso temos 2 títulos então na primeira vez que o foreach rodar title vai ser igual ao primeiro título da página e index vai ser igual a 0(na programação não iniciamos contando do 1 e sim do 0, então aqui temos 2 itens, o primeiro(0) e o segundo(1), isso faz mais sentido com o tempo) e na segunda vez title vai ser igual ao segundo título da página e index vai ser igual a 1, se tivéssemos mais tags 'h1' na página o foreach continuaria até chegar no final, como só temos 2 ele para por aqui.
(title.onclick = () => {...}) é uma função JavaScript que atribui uma função(um trecho de código) ao evento onclick do elemento selecionado atual.
alert(Você clicou no ${index} título!). é uma função JavaScript que exibe uma caixa de diálogo com o texto "Você clicou no x título!" onde x é o índice do elemento selecionado.

Em resumo, este código seleciona todas as tags h1 do documento, passa por cada uma delas e atribui um pedaço de código ao evento onclick das tags h1, que exibe um alerta com o número do título clicado.

Recomendo que você modifique o código que criamos tentando adicionar ou remover coisas para criar familiaridade com o código, caso cometa algum erro e queira voltar ao inicio você pode sempre dar uma olhada no repositório onde eu subi o código feito nesse post: Repositório aqui

Por fim, esse é o resultado:

Legal! Agora você tem uma noção básica de como o HTML, CSS e javascript funcionam, mas esse código parece um pouco bagunçado e não é claro o que é HTML, CSS ou Javascript.

Podemos refatorar esse código criando mais 2 arquivos: style.css e main.js

Copie o código css sem a tag para o arquivo style.css:

Copie o código javascript sem a tag script para o arquivo main.js:

Volte para o arquivo index.html e apague a tag style, agora precisamos adicionar o arquivo css no HTML para que o navegador saiba quais estilos usar, fazemos isso adicionando uma tag head e uma tag link logo após a abertura da tag html, o seu arquivo index.html deverá ficar assim:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>
  <body>
    <h1>Eu sou um título</h1>
    <h1>Eu sou um título 2</h1>
  </body>
  <script></script>
</html>

A tag link faz uma referência ao arquivo que criamos, aqui temos que passar alguns atributos, 'href' é o nome do arquivo que criamos, rel é um atributo que indica ao navegador que este é um arquivo de estilo, pois podemos linkar outros tipos de arquivo, type é um atributo que indica ao navegador que este arquivo contém código CSS.

Volte ao arquivo index.html e adicione o atributo src="main.js" na tag script, o arquivo final deve ficar assim:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>
  <body>
    <h1>Eu sou um título</h1>
    <h1>Eu sou um título 2</h1>
  </body>
  <script src="main.js"></script>
</html>

Com o código separado fica mais claro o que é html, o que é css e o que é javascript.

Espero que esse post tenha te ajudado a entender o que é o front-end!

Esse é só o começo! Não desanime e continue estudando, esse é apenas o primeiro de uma série de posts que vou fazer, obrigado por ler até aqui!