desafio-cards

Desafio 01 - Cards

Objetivo:

  1. Renderização de Cards:
    • Crie uma página HTML que exiba os produtos contidos no arquivo produtos.json em forma de cards.
    • Os cards devem exibir, no mínimo, a imagem, o nome e o preço do produto. Não é necessário incluir todas as informações do arquivo JSON.
  2. Responsividade:
    • Implemente responsividade na página para que os cards sejam apresentados de maneira adaptável:
      • Em telas menores, os cards devem ser exibidos em uma única coluna.
      • Em telas maiores, a página deve acomodar até 4 colunas de cards.
    • Para testar a responsividade, adicione mais produtos ao arquivo produtos.json, garantindo que o layout continue funcionando corretamente em diferentes tamanhos de tela.

Desafio 02 - Lista

Objetivo:

  1. Renderização de Lista:
    • Crie uma página HTML que exiba os produtos contidos no arquivo produtos.json em formato de lista.
    • A lista deve exibir, no mínimo, o nome e o preço do produto. Não é necessário incluir todas as informações do arquivo JSON.

image image image image

Desafio 03 - UX (User Experience)

Objetivo:

  1. Melhoria na Experiência do Usuário:
    • Crie uma nova página HTML chamada index.html.
    • Adicione dois botões no cabeçalho:
      • Um botão para exibir os produtos em formato de cards.
      • Outro botão para exibir os produtos em formato de lista.
    • Os botões devem alternar entre as visualizações dinamicamente ao serem clicados, sem precisar recarregar a página.

image image