Skip to content
OverviewSolutions
3
Comments
4
Eduardo Godoi da Silveira
@GodoiTheCreator

All comments

  • Eduardo Godoi da Silveira•90
    @GodoiTheCreatorPosted over 1 year 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
    0
  • eve•230
    @Eve-WangariSubmitted over 1 year ago

    I tried using display flex instead of the margins, but I could not move the container vertically.

    media queries and html

    1
    Eduardo Godoi da Silveira•90
    @GodoiTheCreatorPosted over 1 year 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

    0
  • GlitzDev•50
    @GlitzDevSubmitted over 1 year ago

    Essa foi meu primeiro desafio concluído! Seu feedback será bem vindo ! <3

    Qr code Solution

    3
    Eduardo Godoi da Silveira•90
    @GodoiTheCreatorPosted over 1 year 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
    1
  • Marcello•40
    @sea-cell0Submitted over 1 year ago

    Esse foi o meu primeiro projeto após uma pausa considerável no meu estudo de programação. No geral, acho que me saí muito bem e pude revisar vários conceitos; evidentemente, há várias partes do código que deixam a desejar como:

    • uma melhor identação para meios de leitura
    • organização dos seletores do css

    Entretanto, estou satisfeito com meu trabalho.

    HTML e CSS puro, uso de flexbox

    3
    Eduardo Godoi da Silveira•90
    @GodoiTheCreatorPosted over 1 year 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
    0