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

Responsive app | CSS Grid/Flex | JavaScript + API

@VFGarciaDev

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm proud of using an API and sync it with JavaScript dom elements

What specific areas of your project would you like help with?

I'm open and happy to receive any suggestion!!

Community feedback

@R3ygoski

Posted

Olá Vitor, parabéns pela conclusão do seu projeto, ele ficou muito bom, e ele está perfeitamente igual ao design proposto.

Seu HTML está impecável, semântico e bem estruturado, seu JS a mesma coisa, ele está muito bom, e seu CSS em grande parte também, eu só gostaria de recomendar uma coisa relacionada ao CSS, que é de utilizar medidas relativas para definir o tamanho dos elementos e espaçamento, como no card por exemplo, que dessa forma, se um usuário utilizar uma configuração de fonte maior, isso fará com que ele expanda algumas partes, deixando mais responsivo e aumentando a acessibilidade.

Edit: Sobre o comentário acima (ou abaixo), que fala sobre a atributtion, não é necessário fazer isso de definir no body o position: relative, isso porque como seu attribution é absolute, e não tem nenhum parente com relative, ele vai pro parente mais próximo, que no caso é o body.

E novamente, parabéns, seu projeto está impecável. Caso algo que eu tenha dito não tenha ficado claro, por favor, pergunte aqui embaixo que tentarei ajudar da melhor forma possível.

0
Sivaprasath 2,520

@sivaprasath2004

Posted

Hello, I would like to extend my congratulations on completing this challenge.

  • I will give some suggestion i believe its used for improve your skill.
  • In .attribution tag to add challenge by and coded by it's not perfect in the mobile site. Use this following code to change that will be proper work in the mobile devices.
  • HTML <body><main></main><footer><div class='attribution'></div></footer></body> change to following structure .
  • change the following CSS in your solution
body{
position:relative;
}
.attribution {
    position: absolute;
    bottom: 0;
}
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