Desafio Frontend Mentor: Gerador de Conselhos Aleatórios.

Este é um projeto do Frontend Mentor que visa construir um aplicativo web capaz de gerar conselhos aleatórios para o usuário. O projeto foi dividido em duas etapas principais:

Etapa 1: Estrutura e Estilização (HTML e CSS):

Nesta etapa, o foco foi a criação da estrutura do aplicativo utilizando HTML e a estilização da interface com CSS. O objetivo era criar um layout responsivo e visualmente agradável, que se adaptasse a diferentes tamanhos de tela e dispositivos.

Etapa 2: Funcionalidade e Interação (JavaScript e API Slip Advice):

Após a estrutura e estilização estarem prontas, foi utilizado JavaScript para adicionar interatividade e funcionalidades ao aplicativo. O principal objetivo era consumir dados da API Slip Advice, que fornece conselhos aleatórios em formato JSON. Com o JavaScript, foram feitas requisições para a API, os dados recebidos foram processados e os conselhos foram exibidos na tela de forma dinâmica.

Tecnologias Utilizadas:

• HTML: Linguagem de marcação para estruturar o conteúdo do aplicativo.
• CSS: Linguagem de estilo para estilizar a interface e criar um layout responsivo.
• JavaScript: Linguagem de programação para adicionar interatividade e consumir dados da API.
• API Slip Advice: Fonte de dados externa que fornece conselhos aleatórios em formato JSON.

Funcionalidades:

• Geração de conselhos aleatórios: Ao clicar em um botão, o aplicativo busca um novo conselho na API Slip Advice e o exibe na tela.
• Design responsivo: O layout do aplicativo se adapta a diferentes tamanhos de tela e dispositivos, garantindo uma boa experiência do usuário em qualquer plataforma.

Como executar o projeto:

1. Clone este repositório: git clone https://github.com/RobertCastro86/gerador-de-conselhos.git
2. Abra o arquivo index.html em seu navegador.

Próximos Passos

Com este layout inicial em HTML e CSS, você tem uma base sólida para começar a adicionar a funcionalidade com JavaScript e integrar a API Slip Advice. Lembre-se de seguir as melhores práticas de desenvolvimento web e testar seu aplicativo em diferentes dispositivos para garantir a responsividade e a acessibilidade.

Recursos Úteis:

• Documentação da API Slip Advice: https://api.adviceslip.com/
• Desafios do Frontend Mentor: https://www.frontendmentor.io/challenges

Font family para ser usada no projeto:

• Family: [Manrope Google Fonts](https://fonts.googleapis.com/css2?family=Manrope)
• Weight: 800

Cores para utilização:

Cor do texto: hsl(193, 38%, 86%); Cor do botão do card e do texto: hsl(150, 100%, 66%); Cor do card: hsl(217, 19%, 24%); Cor de fundo (body): hsl(218, 23%, 16%);

Layout esperado para desktop:

Layout esperado para mobile:

Com este guia e os recursos mencionados, você estará pronto para começar a construir seu gerador de conselhos aleatórios e aprimorar suas habilidades de desenvolvimento web!