> For the complete documentation index, see [llms.txt](https://matheuslaidler.gitbook.io/home/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://matheuslaidler.gitbook.io/home/road2tech/webdev/front-end.md).
# Front-end
### Uma leve Introdução
O desenvolvimento front-end é a parte da programação que lida com a interface do usuário (UI) de um website ou aplicativo. É o que o usuário vê e interage, como botões, menus, imagens, formulários e textos.
### Para que serve?
O objetivo do desenvolvimento front-end é criar uma interface de usuário atraente, interativa e responsiva. É a parte visual e funcional que faz a interação do usuário com o site ou aplicativo.
### Desenvolvimento com HTML, CSS e JavaScript
HTML, CSS e JavaScript são as principais tecnologias usadas no desenvolvimento front-end.
{% tabs %}
{% tab title="HTML " %}
**HTML** é a **linguagem de marcação** que descreve a estrutura do conteúdo em uma página da web. Ela permite definir seções, títulos, parágrafos, imagens, links e outros elementos do conteúdo.
{% content-ref url="/pages/IvIHq7C38WWjYtBwMmOT" %}
[HTML](/home/road2tech/webdev/front-end/html.md)
{% endcontent-ref %}
{% endtab %}
{% tab title="CSS " %}
**CSS** é a **linguagem de estilo** que controla a aparência e o layout do conteúdo. Ela permite definir a cor, tamanho, fonte, margens, espaçamento e outros estilos dos elementos HTML.
{% content-ref url="/pages/Vn4OWMsV3Z4NinWHB9fE" %}
[CSS](/home/road2tech/webdev/front-end/css.md)
{% endcontent-ref %}
{% endtab %}
{% tab title="JavaScript " %}
**JavaScript** é a **linguagem de programação** que controla o comportamento interativo do conteúdo. Ela permite adicionar interatividade, animação e outras funcionalidades ao site ou aplicativo.
{% content-ref url="/pages/EQKZPsltUHOiNvhmmRom" %}
[Javascript](/home/road2tech/webdev/front-end/javascript.md)
{% endcontent-ref %}
{% endtab %}
{% tab title="Exemplo" %}
```html
Exemplo HTML, CSS e JavaScript
Olá, mundo!
Clique no botão para mudar a cor de fundo da página:
Cuidado pra não me deixar vermelho... hihi
Uma clicada é um tapa em Matheus Laidler :D
```
Código do exemplo em prática:
{% embed url="" %}
{% endtab %}
{% endtabs %}
{% hint style="info" %}
***HTML***** não é** considerado linguagem de **programação** ;)
{% endhint %}
{% hint style="info" %}
Embora o CSS não seja considerado uma linguagem de programação completa, ele possui recursos que se **assemelham à programação**, como seletores, propriedades e valores.
No entanto, a principal função do CSS é controlar a aparência visual dos elementos da página, e não realizar cálculos complexos ou processar **lógica de programação.**
{% endhint %}
### Exemplificação
Acima foi colocado um exemplo de código que utiliza, em um mesmo arquivo .html, todos as linguagens mencionadas como um projeto inicial básico de front end.
É um exemplo básico de como HTML, CSS e JavaScript podem trabalhar **juntos** para criar uma página web interativa. Neste caso, não estão sendo usadas separadamente em diferentes formatos de arquivos, *como um "style.css" e um "index.html"*. Quando se trata de projeto super pequeno e simples, como este, colocar tudo junto pode ser bem interessante - até porque pode não compensar criar um .js ou .css apenas para uma pequena função.
Salvando o exemplo em um **arquivo HTML** temos o seguinte resultado já apresentado anteriormente:
{% embed url="" %}
Nessa página temos u***m título***, ***um parágrafo***, ***um botão*** e **funcionalidade** com *um pouco de CSS e JavaScript*.
**-** O **CSS é definido dentro do cabeçalho do HTML**, e é usado para **estilizar o botão**.
\- O **JavaScript é definido dentro do corpo do HTML**, e é usado para **mudar a cor** de fundo da página **quando o botão é clicado**.
Ao abrir este arquivo em um navegador, você verá "Olá, mundo!" em um cabeçalho e um botão "Clique aqui" abaixo dele.
Quando você clica no botão, a cor de fundo da página muda para vermelho, graças à função JavaScript `mudarCor()`.
O CSS é usado para definir o estilo do botão, incluindo a cor de fundo, a cor do texto, o espaçamento, a forma e o cursor do mouse.
Este é apenas um exemplo básico de como HTML, CSS e JavaScript podem trabalhar juntos. Há muitas outras coisas que podem ser feitas com essas linguagens, dependendo da criatividade e habilidade do desenvolvedor.
### Diferenças entre HTML, CSS e JavaScript
* **HTML** é usado para criar a **estrutura do conteúdo**
* **CSS** é usado para controlar a **aparência** e o **layout**
* **JavaScript** é usado para adicionar **interatividade** e **funcionalidade**.
**HTML é estático**, ou seja, ele define a estrutura da página e não muda sem que seja alterado manualmente. Já **CSS e JavaScript são dinâmicos**, ou seja, eles podem mudar a aparência e o comportamento do conteúdo de acordo com a interação do usuário.
### Conclusão
O desenvolvimento front-end é uma parte importante do processo de criação de um site ou aplicativo. *HTML, CSS e JavaScript* são as principais tecnologias usadas para criar interfaces de usuário atraentes, interativas e responsivas. Entender as diferenças entre elas é essencial para criar sites e aplicativos de alta qualidade e com bom desempenho.