3 Projetos para Enriquecer seu Portfólio Utilizando Apenas HTML e CSS

#HTML
#CSS

Olá, comunidade da DIO!

HTML e CSS pode ser muitas vezes por onde muitas pessoas tem o primeiro contato com o mundo da programação, principalmente quando estamos falando do universo Front-End.

Porém, você já parou para pensar que eles podem ser utilizados para criar projetos robustos e surpreender os recrutadores?

É isso mesmo! A dupla pode ajudar você a se destacar em uma entrevista de emprego e ainda ter um portfólio de respeito.

Neste artigo, compartilho com vocês 3 ideias de projetos que, utilizando apenas, HTML e CSS e te ajudar a ter um perfil no GITHUB com projetos ricos!

Vamos lá?

Primeira Ideia Seu Portfólio Pessoal

Já imaginou ter uma página que é a sua cara para apresentar seus projetos? É possível construir uma, utilizando apenas HTML e CSS. Para isso você precisa ter basicamente conhecimentos em:

Estrutura HTML: seria legal estruturar seu código em HTML como:

 <html>, <head> e <body>

Tags semânticas para deixar seu site pessoal mais organizado:

 <header>, <nav>, <section>, <article> e <footer>

Cabeçalho (Header):

Desenvolva uma seção de cabeçalho que contenha basicamente o seu nome, uma breve descrição sobre seu momento profissional e ainda, uma imagem ou foto pessoal.

Seção de Habilidades e Informações Pessoais:

Crie uma seção que destaque suas habilidades, experiência e outras informações pessoais relevantes. Use listas ou tabelas para organizar esses dados.

Projetos Anteriores:

Inclua uma seção para destacar alguns dos seus projetos anteriores. Você pode criar miniaturas das imagens dos projetos, com links para páginas individuais ou demos.

Contato:

Adicione informações de contato, como endereço de e-mail, links para suas redes sociais e, se desejar, um formulário de contato simples.

Estilo CSS:

Utilize CSS para estilizar sua página e torná-la visualmente atraente.

Aprenda a selecionar elementos HTML usando seletores CSS e a aplicar estilos como cores, fontes, margens, preenchimentos e bordas.

Layout Responsivo:

Torne sua página responsiva para que ela seja exibida de maneira adequada em dispositivos de diferentes tamanhos. Utilize media queries para ajustar o layout conforme necessário.

Efeitos e Transições:

Adicione efeitos visuais, como transições suaves, ao interagir com os elementos da página. Por exemplo, você pode adicionar efeitos ao passar o mouse sobre projetos ou links.

Validação de Código:

Certifique-se de que seu código HTML e CSS está válido para garantir a consistência e o correto funcionamento em diferentes navegadores.

A prática leva a perfeição!

A prática é essencial para avançar na sua carreira. Crie versões iterativas do seu portfólio, experimente diferentes estilos e layouts, se sentir necessidade, pedir a opinião de uma pessoa de sua confiança pode ajudar.

Aqui na DIO temos as duas Formações, HTML e CSS e você pode aprender a criar seu portfólio. Porém, existem muitos recursos online, tutoriais e documentações que podem ajudá-lo a aprender HTML e CSS. Lembre-se de praticar regularmente e experimentar para desenvolver suas habilidades.

Segunda Ideia Landing Pages

As chamadas Landing Pages são páginas utilizadas para, na maioria das vezes vender um produto ou serviço. E o melhor, é possível ganhar uma renda extra construindo Landing Pages!

Para criar a sua própria Landing Page você precisa conhecer basicamente:

Estrutura Básica do HTML:

Crie a estrutura básica do seu documento HTML usando as tags:

 <html>, <head> e <body>.

Utilize tags semânticas como:

 <header>, <section>, <article>, <footer>

elas podem ajudar você na organização do conteúdo da sua página.

Cabeçalho (Header):

Desenvolva um cabeçalho que contenha o título ou logotipo da sua landing page.

Use a tags

 <h1> <h2> <h3>

<h1> pode ser utlizada para o título principal.

<h2> para subtítulo e;

<h3> para outros tópicos dentro da landing page, fica ao seu critério.

Seção de Destaque:

A seção de destaque pode ser utilizada para chamar a atenção do visitante. Adicione uma breve descrição ou slogan com texto convincente.

Formulário de Inscrição:

Se sua landing page tem como objetivo capturar informações do visitante, como e-mails, adicione um formulário de inscrição. Use a tag

 <form>

combinada com a tag

<input>

pois, combinadas elas podem coletar dados.

Imagens e Vídeos:

Adicione imagens ou vídeos relevantes para destacar seu produto ou serviço. Para isso,

Use a tag

<img>

para imagens de diferentes formatos e;

e a tag

<video>

para vídeos, se desejar.

Benefícios e Recursos:

Destaque os benefícios e recursos do seu produto ou serviço. Use listas ou seções para organizar essas informações.

Estilo CSS:

Utilize CSS para estilizar sua landing page e torná-la visualmente atraente.

Aplique estilos para cores, fontes, margens, preenchimentos e bordas.

Certifique-se de que a página seja responsiva para uma boa experiência em dispositivos móveis.

Faça sempre perguntas com foco em seu cliente, pense: o que meu cliente espera de uma landing page? Qual estilo de design ele mais gosta?

Botões de Chamada para Ação (CTA):

Adicione botões de CTA que incentivem os visitantes a realizar a ação desejada, seja fazer uma compra, inscrever-se em um serviço ou fornecer informações de contato.

Rodapé (Footer):

Inclua um rodapé com informações adicionais, links de contato, políticas de privacidade, etc.

Validade seu Código:

Certifique-se de que seu código HTML e CSS estão válidos. Isso ajuda a garantir uma renderização consistente em diferentes navegadores.

Teste e Otimização:

Teste sua landing page em diferentes navegadores e dispositivos para garantir que ela seja eficaz e responsiva.

Considere a otimização do desempenho, como o tamanho de imagens para carregamento rápido.

Lembre-se sua primeira landing page pode ser simples, não deixe de praticar para se tornar cada vez melhor e evoluir na sua carreira, não deixe também de pedir feedback de outras pessoas para saber se alcançou seus objetivos.

Terceira ideia FAQ ou Simplesmente uma Página de Perguntas Frequentes

Outra maneira interessante de utilizar HTML e CSS para ter projetos em seu portfólio é construir uma página de perguntas frequentes. Atualmente, elas são fundamentais para tirar dúvidas dos clientes e podem ser uma ferramenta poderosa de conversão e fidelização de clientes.

Para construir seu próprio FAQ você vai precisar ter os conhecimentos dos dois exemplos anteriores, além de adicionar uma seção de perguntas e respostas. Utilize a tag

<div>

para realizar o agrupamento das perguntas e respostas.

Você pode se inspirar em vários exemplos que estão disponíveis na internet e criar seu próprio FAQ. É sempre importante lembrar que você está apenas no começo, por isso não deve se cobrar tanto para construir projetos iguais a profissionais que já possuem anos de experiência.

Considerações Finais

Neste artigo, foi apresentado 3 ideias para você deixar seu portfólio de projetos mais rico, utilizando apenas HTML e CSS. Lembre-se que os projetos podem ser utilizados com outros recursos para deixar cada um deles ainda melhor. Se você desejar acrescentar uma linguagem de programação ou até mesmo um banco de dados ou um Framework pode ser muito útil.

Não deixe de praticar e testar seus projetos! Continue sua jornada de aprendizado e não tenha medo de errar, pois essa é uma das melhores maneiras de se aprender, mantenha sempre o pensamento positivo e crie projetos únicos!

Não deixe de compartilhar seus projetos aqui na DIO e nas Redes Sociais.

Bons estudos!

Referências

HTML. Documentação Oficial. Disponível em: <https://developer.mozilla.org/pt-BR/docs/Web/HTML>. Acesso 22/01/2024;