Front-End de Web Parte 1 (HTML)
101 de HTML
O que é Front-End?
Web, web, web querida, o que seríamos sem você?…
Pode parar por aí, porque o segredo da Web não está nela mesma, mas sim, em seus desenvolvedores. Mais ainda, sabe aquele visual maravilhoso, aqueles sites criativos e lindos? Muitos deles são assim por causa de desenvolvedores Front-End.
São eles que vão posicionar cada detalhe, trabalhar na melhor disposição, fazer com que tudo funcione de forma fluida e responsiva para todas as plataformas. Tá, legal, mas como que eles fazem isso?
Tudo isso é feito através de três principais tecnologias: HTML, CSS e JavaScript (de vez em quando PhP). Isso pode parecer simples, mas, na prática, não é tanto assim. Cada … além disso, o funcionamento de cada uma pode variar de acordo com o navegador.
Vou te ensinar os básicos do Front-End, mas com um exemplo super bonitinho que a equipe aqui da 0&Umas desenvolveu!
Para essa nossa Parte 1, nós vamos aprender sobre como o HTML desse website foi desenvolvido. Na Parte 2, vamos dar uma olhada em CSS e JavaScript!
HTML
Bom, o primeiro passo para fazer tudo isso é estruturar o seu HTML. Uma das melhores fontes para estudar é o W3Schools para HTML; por meio dele, você pode aprender sobre cada elemento que usamos para construir nosso site.
Bom, mas o que tivemos que usar para construir o nosso site?
- A estrutura básica de HTML, com Head, Body, Header, Sections e Footer: https://www.w3schools.com/html/html_basic.asp
- Navegação: https://www.w3schools.com/tags/tag_nav.asp
- Divs: https://www.w3schools.com/tags/tag_div.asp
- Headings: https://www.w3schools.com/html/html_headings.asp
- Imagens: https://www.w3schools.com/html/html_attributes.asp
- Links: https://www.w3schools.com/html/html_links.asp
- A estrutura de formulário: https://www.w3schools.com/html/html_forms.asp
Agora que você tem essas referências maravilhosas, vamos colocar a mão na massa.
A primeira coisa que fazemos é colocar as declarações iniciais para começar a brincar com o código. Tudo vai ficar dentro da tag <html>.
O próximo passo é adicionar as informações do Head. Aqui você vai informar o título que aparece na tab quando abrimos novos sites. Mas o mais importante: aqui são feitas importações de elementos essenciais para o nosso site, como CSS, JavaScript e, até mesmo, fontes personalizadas.
Agora é a hora de começarmos a colocar a estrutura em si do site, e ela fica toda dentro do Body, como mostra o trecho de código abaixo. O importante é notar que, de agora em diante, tudo vai ter uma relação com o CSS que vai ser construído, então vão começar a aparecer as classes que vamos utilizar lá. O segredo é pensar na estrutura que você vai criar, então linhas, colunas, quem vai ficar no lado de quem, quem precisa adaptar o seu tamanho dinamicamente.
O nosso Header é a primeira parte que aparece do site. No nosso caso, ele vai ter duas coisas: a barra de navegação e a parte que fala sobre Quem Somos.
Aqui você vai ver que utilizamos a tag <nav> para fazer a navegação. Dentro dela fizemos uma linha que tem o nosso logo, nome e a navegação em si (usando ul, li e span).
Já no Quem Somos, criamos uma linha que possui duas colunas. Na primeira, colocamos o nosso nome, uma descrição e os links para as nossas redes sociais. Na segunda, colocamos a imagem maravilhosa que temos na direita.
Para a nossa segunda seção, nós vamos ter, novamente, duas colunas.
Na primeira, vamos colocar a imagem do curso, porque ela vai ficar posicionada na esquerda.
Na segunda, temos o título, a descrição e o nosso botão. Existem diversas formas de fazer botões, mas escolhemos fazer com a tag <form>, porque precisávamos colocar o link para o nosso formulário.
Agora entramos na parte mais complicadinha do nosso HTML: a seção de contato.
Primeiro precisamos fazer a divisão entre os textos na esquerda e o formulário na direita. Fazendo isso, podemos colocar o título e a descrição que ficam na direita. Agora começa a aventura do formulário em si.
Precisamos criar a instancia do formulário. Se analisarmos como ele funciona, precisamos ter quatro linhas e a primeira e a última vão ter duas colunas. Nessas duas colunas inicias, vamos ter uma tag input que seja do tipo text e a outra será email. Logo abaixo precisamos da linha para o assunto que será inserido, com o tipo text e, em seguida, a mensagem em si. Essa mensagem vai precisar ter o tipo message, mas precisamos determinar o seu tamanho para que o usuário não adapte o seu tamanho. Na parte de baixo do formulário, temos um botão e imagem. Para posicioná-los, fizemos duas colunas, colocando o botão na esquerda e a imagem na direita.
Ufa, terminamos o formulário!
Agora vamos para a última parte (do HTML hahah).
Aqui nós temos uma linha com duas colunas. Na primeira coluna temos com uma chamada à ação, então usamos uma tag <p> padrão. Mas na segunda coluna, temos os nossos ícones das redes sociais. Utilizamos a mesma estrutura que tínhamos lá em cima na parte de Quem Somos.
Bom, agora que terminamos o HTML foi tudo né? Só que não. Ainda temos que fazer todo o CSS para que tudo fique posicionado da forma que queremos e adicionar os detalhes em JavaScript para que o nosso formulário funcione corretamente.
Mas, não vamos falar sobre isso hoje!
Conclusão
Bom, hoje aprendemos muitas coisas.
Agora vocês sabem montar o HTML inteiro de um site como o nosso, vocês devem entender melhor sobre as estruturas do HTML e como adaptá-las para o seu site, como utilizar as tags e como importar o CSS e o JavaScript para o seu código.
Lembre-se, pense sempre no que você precisa lá na frente. Então se você vai querer adicionar CSS ao seu código, pense nisso antes de começar a desenvolver o seu HTML, mesma coisa para qualquer outra linguagem que será associada.
Agora fica de olho aberto que esse fim de semana tem Medium extra para a Parte 2! Vocês vão aprender sobre como adicionar nesse mesmo site CSS e JavaScript!
Boa criação!
