Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

product preview using html and css

marina 50

@ladymarina08

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I did my best to stay faithful to the original layout but I know it wasn't, so please, if anyone can point out my mistakes, I'd be grateful.

Community feedback

@R3ygoski

Posted

Olá marina, bom trabalho, desculpa responder depois de 10 dias da postagem, seu projeto ficou fiel ao mobile.

Mas notei que você não fez o design de Desktop. Isso ocorre porque você limitou a sua <section> class="mobile", no css você colocou pra que ela tivesse 375px, isso não era necessário, já que você poderia ter feito ela ter 100% ou 100vw (tamanho total da largura da tela) e só precisaria centralizar o resto do conteúdo. E para fazer esse alinhamento, você só precisaria usar a propriedade de display: flex no CSS.

Quando vamos criar um projeto que é para celular, tablet, laptops, desktops e tv's, nós não fazemos eles pensando no HTML, o que fazemos é, criamos a estrutura no HTML de acordo, e quando vamos estilizar utilizamos o media query para que possamos definir como o projeto deve se apresentar em cada tela.

E uma outra dica, evite ao máximo usar caracteres especiais no seu HTML e CSS, pois podem dar conflito no JavaScript, ou seja, não usar ~ (til), ç, ã,õ, sempre focar em escrever sem esses caracteres para que não tenha problemas futuros. Dessa forma: em vez de descrição usaria descricao, em vez de preço usaria preco, e por aí vai.

Novamente, parabéns por ter feito um projeto que ficou fiel ao mobile, se precisar de ajuda com qualquer coisa, pode comentar aqui que eu tentarei ao máximo te ajudar com o possível.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord