Skip to content
OverviewSolutions
21
Comments
5
Gabriel Felonta De Oliveira
@felonta

All comments

  • Ingrid Souza•240
    @IngridsSilveiraSubmitted over 2 years ago

    Terminei este desafio, se puderam dar um feedback sobre, eu agradeço!

    QR CODE COMPONENT

    2
    Gabriel Felonta De Oliveira•300
    @felontaPosted over 2 years ago

    Olá @IngridsSilveira 👋👋👋

    Primeiramente parabéns por ter conseguido finalizar o desafio ficou muito bom, tenho apenas algumas dicas/adendos, recomendo sempre utilizar TAGS como MAIN ou SECTION quando para containers no seu caso você utilizou DIV que não está errada mas não tão aceita pelo publico em geral, ainda sobre o container irei passar algumas linhas de códigos que caso deseje pode estar colocando em seu código,

     body{
 //deixe sem nada alterar apenas o container
 }

 .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background-color: hsl(212, 45%, 89%);
}

    Dessa forma seu container irá ficar centralizado, ocupar todo espaço disponível para ele, retirar a margem branca no topo, você ainda pode colocar seu FOTTER dentro do container fazendo que ele faça parte realmente do CARD QRCODE e não algo separado de tudo, fora isso você foi muito boa em seu codigo, caso tenha duvida pode perguntar que tentarei lhe ajudar ou verifique em minha solução.

    Boa codificação 🚀🚀🚀

    1
  • Nairet•10
    @NaiforsythSubmitted over 2 years ago

    Hi!

    I liked the challenge, so I'd like to ask:

    -Is it a good idea to use the CSS grid for this case? Or maybe it's better to use it for something more complex?

    -Is it better to use rem or px or '%' for Responsive?

    Thanks

    QR code component challenge using HTML and Sass

    4
    Gabriel Felonta De Oliveira•300
    @felontaPosted over 2 years ago

    Hello @Naiforsyth 👋👋👋,

    I will try to help with your questions hope I can,

    • 1 - In question which way you will use to style your project, always choose the one you know the most and are comfortable with, never try to do something complex simply because it is complex, many developers (including me) at first think that doing something complex is better than doing the simple but it's totally the opposite, think that the simpler and more functional the code the faster it will run and have a better performance, always do what makes you more relaxed when coding, doing it that way you will have more confidence when coding and consequently learning more and more.

    • 2 - About px, rem or % specifically about responsiveness it's better rem and % but that doesn't rule out the use of PX, for example when you want an image to always occupy half of your page regardless of the screen it is being displayed use % , but in others cases you will want, for example, that your logo always has the same size regardless of the screen that is being displayed in this case use PX, in the case of REM for fonts I always use it and I have already discarded the use of PX when it comes to fonts, because REM becomes much easier and more responsive in the overall design.

    I hope I was able to help you in some way, I apologize for the explanation I'm not very good with it, if you have any doubts ask me and I'll try to help you :)

    Congratulations on completing the challenge, Good Coding 🚀🚀🚀

    Marked as helpful
    0
  • Gabriela Freitas•30
    @GPSFreitasSubmitted over 2 years ago

    Só faltou alinhar ao centro certinho, tentei de varias maneiras mais nenhuma funcionou, alguma dica?

    CSS, HTML

    1
    Gabriel Felonta De Oliveira•300
    @felontaPosted over 2 years ago

    Eai @GPSFreitas tudo certo? Primeiramente parabéns por ter conseguido codificar e completar o desafio, para centralizar você pode sempre utilizar o FLEXBOX em sua DIV container (DIV que contem toda sua estrutura), no seu caso para não precisar modificar muita coisa basta utilizar diretamente na sua body (lembre-se que é recomendado utilizar na container) coloque a sua body como display: flex e um min-height: 100vh que irá alinhar ao centro, para futuros projetos que vá fazer basta utilizar a formula abaixo para centralizar:

       .container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
}

    caso ainda tenha duvidas pode estar vendo na minha solução a forma que eu fiz ou perguntar por aqui que estarei ajudando como posso :)

    Feliz codificação 👏👏👏

    Marked as helpful
    0
  • Gabriel Felonta De Oliveira•300
    @felontaPosted over 2 years ago

    Eai @romuloqueiroz tudo certo ? cara primeiramente parabéns por ter conseguido codificar realmente ficou muito bom, somente um adendo/dica para você, quando for importar alguma imagem para seu código tente colocar "." antes do diretório da imagem, exemplo <img src="./images/illustration-hero.svg" alt="Musica">. para que volte um nível hierárquico e assim consiga acessar a sua img, caso ainda tenha duvida sobre acesse o link abaixo,

    https://developer.mozilla.org/pt-BR/docs/Learn/Getting_started_with_the_web/Dealing_with_files

    Feliz codificação 👏👏👏

    Marked as helpful
    0
  • Gabriel Felonta De Oliveira•300
    @felontaPosted over 2 years ago

    Eai @MiroBenicio tudo certo, primeiramente parabéns, verifiquei seu código e percebi que você esqueceu de upar no GitHub a pasta que possui as suas imagens, upe elas no GitHub e após seu site live carregar faça uma screenshot grátis para que o FrontEndMentor atualize, fora isso tu foi muito bem parabéns continue assim 🎉🎉🎉

    English: Hey @MiroBenicio, first congratulations, I checked your code and realized that you forgot to upload the folder that has your images on GitHub, upload them on GitHub and after your live site loads, make a free screenshot for FrontEndMentor to update, outside that you did very well congratulations keep it up.

    0