HTML e CSS: habilidades essenciais para qualquer desenvolvedor web
Falar em criar páginas web atrativas e responsivas envolve necessariamente o domínio de dois elementos: HTML e CSS. Embora haja quem sugira que a Inteligência Artificial (IA) possa substituir a sua utilização, é pouco provável que isso aconteça a curto prazo.
Embora a IA possa melhorar a eficiência e a automação em certos aspectos do design e desenvolvimento web, HTML e CSS continuam a ser essenciais para a criação e apresentação de conteúdo em páginas web.
HTML é uma série de tags que descrevem as diferentes partes de uma página da web, como títulos, parágrafos, imagens e links. Ao usar essas tags, você pode criar uma estrutura hierárquica que torna mais fácil para os mecanismos de pesquisa e humanos entenderem o conteúdo da sua página.
Neste artigo vou mostrar como desenvolver um site. Para isso vamos recorrer a uma empresa que não existe, que chamarei de UniFin, dedicada ao financiamento de estudos. Nesse sentido, criar projetos fictícios pode ser uma excelente prática para aprimorar suas habilidades e adicionar mais projetos ao seu catálogo. Você aprenderá a criar tudo do zero. Divirta-se!
Primeiro passo
É importante visualizar como queremos que nossa página seja distribuída e podemos fazer um esboço. Uma ferramenta útil para isso é o Excalidraw, que nos permite desenhar o que quisermos em um quadro branco compartilhado e colaborativo. Agora, explicarei como passar de um esboço a um design real.
Segundo passo
Com a ideia em mente, devemos abrir o editor de código de nossa escolha e moldar o projeto através do código. Neste caso, usaremos o Visual Studio Code. Para começar, criaremos uma pasta em nosso computador com o nome do projeto, UniFin, onde ficará armazenado todo o código que dará forma ao projeto.
Para iniciar a programação, iremos ao arquivo .html. Sim, nós escrevemos! No início do arquivo, o editor insere automaticamente a estrutura de um arquivo HTML, incluindo o código para tornar uma página web responsiva. A seguir, adicionaremos um título à página e linhas de código que conectarão o arquivo .html ao arquivo de estilos .css. Além disso, podemos adicionar fontes através do Google Fonts e ícones com Fontawesome. Tudo isso irá dentro da tag , ou seja, antes da tag <body>.
Excelente! Você já está no processo de criação de um site. Lembre-se que é importante que o título seja claro e representativo do conteúdo da página. Para vincular arquivos de estilo e fonte, use as tags correspondentes no cabeçalho do seu documento HTML.
Terceiro passo
De acordo com o esboço do início do artigo, a primeira coisa que será criada será a barra de navegação <nav>. A navbar está localizada no topo das páginas da web. Concluída a navbar, serão criadas as seguintes seções, que serão os containers do projeto e armazenarão as informações que serão exibidas na tela.
Existem diferentes maneiras de estruturar o código. Neste caso, toda a estrutura HTML será criada e então será adicionada interatividade com a folha de estilos CSS. À medida que você aprende a estruturar páginas web, você poderá realizar muito mais projetos como esse, proporcionando mais experiência e conhecimento que poderá agregar ao seu portfólio. Por enquanto, todas as seções e informações a serem renderizadas estarão organizadas.
A seção mostrada na imagem possui rótulos como listas não ordenadas, que incluem ícones que dão personalidade à página. Esses ícones são importados na inicialização e pertencem ao Fontawesome. Depois de criar o primeiro contêiner de página, você pode prosseguir para a próxima seção até completar a estrutura desejada. Também corrigi alguns erros ortográficos.
Quarto passo
Nas seções que você vê acima são colocadas todas as informações que geram interesse no usuário que visita a página.
Uma frase de chamariz também foi usada para levar o usuário a uma conversa direta com o provedor de serviços. Para isso foi utilizada uma tag âncora <a>, um elemento que cria links para outras páginas.
Se quiser adicionar mais elementos ou contêineres à página da web, você pode fazer isso. Deixe isso para sua imaginação e criatividade. Lembre-se que se trata de um projeto fictício, mas pode ser muito útil quando se trata de um projeto real.
Diferente da navbar, o footer está localizado no final da página da web. Na seção de rodapé você pode adicionar mais informações sobre a empresa, contato, ofertas de emprego, redes sociais, informações sobre o país em que foi feito, direitos autorais, entre outros.
Quinto passo
Mostraremos como fica a página da web com a estrutura HTML sem CSS. Posteriormente colocaremos todas as propriedades CSS necessárias para tornar este projeto interativo, agradável e com um bom design.
Você está pronto para ver como ficou o projeto em HTML sem CSS? Aqui vamos nós:
Não estamos na era das cavernas. Este projeto não está sendo renderizado como um projeto real. Hoje, nenhum site se parece com este. Para estilizá-lo, usaremos a folha de estilos CSS.
Colocamos um asterisco (*) no início, pois ele funciona como um curinga e aponta para todos os elementos da página. As propriedades margin e padding controlam o espaço fora e dentro da fronteira.
Eu defino o tipo de fonte da página com font-family, seu tamanho e sua cor. Devo colocar um indicador ou classe em todos os elementos que desejo intervir com estilo. A propriedade display especifica como exibir elementos HTML na página e display: flex permite capacidade de resposta e flexibilidade nos designs.
Você deseja que as opções da barra de navegação sejam interativas quando você passa o mouse sobre elas e isso é feito usando o seletor hover.
Você também deseja dar estilo e cor aos outros contêineres ou seções do projeto. Além disso, queremos que o contêiner tenha um formato oval, o que é conseguido usando a propriedade border-radius.
Esta propriedade é usada para especificar o arredondamento dos cantos de um elemento. Pode ser usado para criar retângulos arredondados, círculos e outras formas, definindo diferentes valores para a propriedade border-radius.
O botão que será utilizado no projeto deve ter gradiente de cores e ser interativo ao passar o mouse sobre ele. Para conseguir isso, a função é usada linear-gradient.
Uma página web é mais interativa e atraente quando inclui imagens. Durante o projeto serão utilizadas diferentes imagens e você deseja que elas sejam arredondadas. Para conseguir isso, a propriedade CSS correspondente deve ser usada.
Na seção HTML da página, você encontrará uma tag âncora <a> para o ícone do WhatsApp. Você deseja que este ícone fique visível em toda a página web e, para isso, deve utilizar a propriedade CSS display: inline-block, o que permite que o elemento se comporte como um elemento embutido e permaneça na mesma linha que o conteúdo adjacente. Além disso, o imóvel será utilizado position: fixed para que a posição do elemento permaneça fixa, mesmo que o usuário role a página para baixo.
Se quiser que este mesmo elemento fique acima dos demais, deve-se utilizar a propriedade z-index, o que indica que o elemento se sobrepõe a elementos com valores de z-index menores e, desta forma, estará acima dos demais elementos.
Antes de finalizar o artigo, o rodapé é estilizado, os elementos são alinhados e são fornecidas a cor de fundo e o preenchimento.
O leitor é convidado a usar este guia como ponto de partida para aprender sobre desenvolvimento web usando HTML e CSS, ao mesmo tempo que sugere diversas maneiras de adicionar funcionalidade a uma página web, como interatividade com JavaScript, botões de compartilhamento social e conexões com bancos de dados.
Dependendo da funcionalidade desejada, diferentes linguagens e tecnologias podem ser utilizadas. Vamos trabalhar e criar seus próprios projetos de desenvolvimento web!
É a sua vez de fazer seu próprio projeto. Espero que você possa aproveitar este guia completo e acessível para criar páginas usando essas duas tecnologias básicas de desenvolvimento front-end. Se você deseja começar no desenvolvimento web, esta é uma excelente introdução. Você pode tomá-lo como ponto de partida se for uma pessoa interessada em aprender sobre desenvolvimento web usando HTML e CSS.
Você pode adicionar funcionalidade a este e a qualquer projeto que esteja iniciando. Existem várias maneiras pelas quais funcionalidades podem ser adicionadas a uma página da web básica. Aqui estão algumas ideias:
- Interatividade com JavaScript: Uma maneira comum de adicionar interatividade a uma página da web é usando JavaScript. Por exemplo, botões, formulários e validações de entrada podem ser adicionados.
- Funcionalidade de compartilhamento social: Botões de compartilhamento podem ser adicionados para que os visitantes possam compartilhar o conteúdo da página em suas redes sociais.
- Conexões com bancos de dados e armazenamento de informações: Para adicionar mais funcionalidades, o site poderia ser conectado a um banco de dados e permitir que os usuários armazenassem e consultassem informações através do site.
Dependendo da funcionalidade que você deseja adicionar ao seu site, diferentes linguagens e tecnologias podem ser utilizadas, como JavaScript, PHP ou bancos de dados SQL.
Sucesso!
A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.