Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
4

Eduardo Godoi da Silveira

@GodoiTheCreatorRS, Brazil90 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Mobile-first workflow QR code component


    Eduardo Godoi da Silveira•90
    Submitted over 2 years ago

    1 comment
  • Responsive Product Preview Card WebPage


    Eduardo Godoi da Silveira•90
    Submitted over 2 years ago

    1 comment
  • Responsive Component Results Summary Page using CSS and HTML


    Eduardo Godoi da Silveira•90
    Submitted over 2 years ago

    0 comments

Latest comments

  • 07ritwik•10
    @07ritwik
    Submitted over 2 years ago

    Using simple HTML and CSS to build QR page

    4
    Eduardo Godoi da Silveira•90
    @GodoiTheCreator
    Posted over 2 years ago
    • Hi!! Great code, Congratulations!

    I'll try to give you some tips, as a begginer too!

    • FrontEnd Mentor tries to correct your semantics, so instead of the main content be inside of a "container" div, use <main> tag as the main content tag, also try this to the attribution div too, as default, FrontEnd Mentor gives you the attribution div, but instead of this name, try using <footer> tag

    • Your code is almost perfect, just put the attribution div outside the main content, because it's supossed to be on the bottom of your website. And the background color is supossed to be a ligth blue, you can see all the colors used using the style-guide.md file that is in the project's folder, also, it's contain the text font used in the original project.

    • Take a look to flexbox display, this display will help you a lot on centralizing elements, control the size of the elements and the gap between them, it's perfect and very easy to learn.

    Hope you enjoy your journey, as I said, I'm a begginer too, so don't take this tips as a critiscim

    Marked as helpful
  • eve•270
    @Eve-Wangari
    Submitted over 2 years ago

    media queries and html

    1
    Eduardo Godoi da Silveira•90
    @GodoiTheCreator
    Posted over 2 years ago
    • Hi! Great code, congratulations!

    I'll give you some tips, as a begginer too

    • To move something to the middle of the div, you need to add the align-items: center or justify-content: center, so your items will be centralized on the div. But, if you want to limit the space that they will fill, you still need to use the margin or padding properties.

    • To centralize the div in the entire body, you can say that the body is using display: flex and use the properties that I said earlier. To centralize something horizontally, use height: 100vh, this will allow your display flex to centralize horizontally.

    • Also, in the next challenge, try to import the text font, you'll see what font they are using in the style-guide.md file, click in the font name and you'll be redirected to Google Fonts, where you can import to your css.

    • FrontEnd Mentor give you hints of how to "correct" the semantics of your code, in this case, it's interesting to use a div called main and put all the elements inside that div, because it's the main content of your website. And change the default attribution name to footer, this turns your code way prettier and accessible.

    I'm just trying to help the community, none of these tips are a criticism

  • GlitzDev•50
    @GlitzDev
    Submitted over 2 years ago

    Qr code Solution

    3
    Eduardo Godoi da Silveira•90
    @GodoiTheCreator
    Posted over 2 years ago
    • Código muito bom, amigo, parabéns!

    • Só cuida para sempre ter uma tag <title> nos seus websites.

    • E um detalhezinho que seria a cor estar diferente da do modelo da solução, mas isso não quer dizer que está ruim!

    Marked as helpful
  • Marcello•40
    @sea-cell0
    Submitted over 2 years ago

    HTML e CSS puro, uso de flexbox

    3
    Eduardo Godoi da Silveira•90
    @GodoiTheCreator
    Posted over 2 years ago
    • @sea-cell0 Parabéns pelo código, ficou muito bom!

    • Sou iniciante aqui no site, mas queria passar umas dicas que me passaram aqui e que vi em projetos de outros usuários também.

    • É interessante usar as tags "corretas", que seriam <head> para cabeçalhos, <main> para o conteúdo principal, <footer> para rodapé, etc, assim o código e o site se tornam mais acessíveis, e o FrontEnd Mentor não acusa erros nesse mini relatório deles. Também utilizar o atributo "alt" nas imagens para descrever uma imagem, assim, quando o site não carregar corretamente, por x motivo, o usuário poderá ver do que se tratava a imagem, também auxilia os usuários com deficiência visual.

    • Sobre o código em si, um detalhe importante é o uso do :hover no CSS, você acabou utilizando o :active o que faz com o que o botão apenas mude de cor quando pressionado e não quando colocamos o cursor por cima.

    • Novamente, parabéns pelo código! Vai ver que os outros desafios se tornam mais fáceis com a prática, esse primeiro foi complicadinho pra mim. Tenta escrever em inglês também se tiver alguma dúvida grande pois grande parte do site é gringo então é mais fácil de te responderem rápido.

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub