Skip to content
OverviewSolutions
41
Comments
44
Saul
@xsaul

All comments

  • ReeAya•40
    @ReeAyaSubmitted about 2 years ago

    Hi. I'm a newbie and gave this NFT card a good try. I would love any feedback on areas to improve or better ways to build it. Thanks in advance!

    NFT Card using CSS

    1
    Saul•1,260
    @xsaulPosted about 2 years ago

    Hello, ReeAya nice job to be your first challenge! There are better ways to center the content instead of using position relative. I would recommend "margin: 0 auto" and you can modify the " 0" depending on which distance you wanna for the top and bottom.

    The card should be bigger so you should check out your height and width values.

    Also, you forgot to add a shadow to the card to make it look nicer.

    And if you removed the info from the footer would be better if you directly delete the footer tag.

    Check those details and your work will be much better!

    Marked as helpful
    0
  • Saul•1,260
    @xsaulPosted over 2 years ago

    Hola Xiomara hiciste un gran trabajo! Solo tiene un pequeño detalle tu diseño. En la versión de escritorio la imagen está en la parte superior del contenedor cuando debería estar a la izquierda como si fuera el diseño para moviles. Deberías checar ese detalle, tal vez pusiste mal un media query o algo similar.

    Pero a excepción de ese lo hiciste muy bien, felicidades!

    Marked as helpful
    0
  • Luiza Uszacki•250
    @LuizaUszackiSubmitted over 2 years ago

    I tried to make this project more accessible but I'm still a little confused with aria so... Please let me know if there is something that I did wrong or if there is something that I can improve.

    Order summary card

    1
    Saul•1,260
    @xsaulPosted over 2 years ago

    Oi Luiza seu trabalho ficou muito legal, parabéns! O aria label é usado pelo leitor de tela para ter mais acessibilidade para as pessoas com deficiência visual ou se o navegador tem problemas para carregar o DOM.

    Marked as helpful
    1
  • Praise•80
    @Omoh123Submitted over 2 years ago

    I would love some feedbacks on properties i did not make use of well. Thank you

    CSS FLEX

    1
    Saul•1,260
    @xsaulPosted over 2 years ago

    Hello, Praise I did a few changes to improve your project. To the image-text <div>, I changed the padding to 12px and the width to 40% like that the card will look wider.

    To the image, I changed the width and height to 100% so it can fit better in the container and look bigger.

    To the paragraph, I added a padding of 0 for top and bottom and 1rem for left and right like that the text will be centered.

    And don't forget that you have to use a specific font!

    Check out the values I told you and tell me what you think!

    0
  • Saul•1,260
    @xsaulPosted over 2 years ago

    Oi Maria seu projeto ficou muito bom, parabéns! Só tem um pequeno erro seu codigo.

    1.- Você não pode usar: link="#" em um <button> 2.- Para apontar para um endereço diferente no HTML você precisar usar: " href="" "

    Mas além disso seu trabalho ficou bom!

    0
  • Emilly Cavalcante•10
    @httpsemillySubmitted over 2 years ago

    Hello, everyone!

    I'm still at the beginning of my programming study journey and this is the first project I create. I had a lot of difficulties making it responsive, but I think I got it.

    Feel free to give me any feedback or comments. Thank you!

    Responsive QR code component

    2
    Saul•1,260
    @xsaulPosted over 2 years ago

    Hello Emilly, it is an amazing job! Just a comment: if in your <main> you use a height of 100vh you wouldn't need to add a media query. But is just a tiny detail. Congrats!

    0
  • Mariana•320
    @marianaceciSubmitted over 2 years ago

    Hi, everyone! I struggled a little to fit the screen=375px; I used media query, but maybe it would've been easier some other way... And I need to pratice more Bootstrap... I tried to use it, but gave up because I was taking too long... But looking at some solutions I finally understood how to use the position property :D

    Looking forward to your feedback! Thanks!! Ps.: english is not my first language, so I'm sorry for any mistakes here...

    Frontend-Mentor-NFT-preview-card-component

    1
    Saul•1,260
    @xsaulPosted over 2 years ago

    Oi Mariana seu desenho ficou muito bom, parabéns! Só tem um problema, vc deveria remover o "overflow: hidden" do body porque em telas de tablets e telefones o usuário não poderá fazer scroll e por causa disso não vai olhar todo o design.

    Marked as helpful
    1
  • Rodney Foster Jr•30
    @T000biasSubmitted over 2 years ago

    I am not sure that the spacing on my text is the same as in the JPG. How can I go about fixing this? Why is my "Challenge by" section so low from my project? How can I fix this?

    QR Code Component (CUBE CSS)

    2
    Saul•1,260
    @xsaulPosted over 2 years ago

    Hello Rodney! I've been checking out your code and there are a few things to improve.

    I added a width value to the card of 290px. Like that the card has less white space on the sides.

    Nor the title nor the paragraph need padding, so if you remove it can look more similar to the original design. Also for the paragraph, I changed the line-height value to: 1.3.

    Answering your question, to make the position higher of the text "Challenge by..." just add a margin-top with a negative value, I think -5rem looks good. But if you do that you would need to check it out in the media queries and be changing the value according to the screen size

    But in general, you did a nice job, congrats!

    Marked as helpful
    1
  • João Lucas•10
    @JoaoOVERSubmitted over 2 years ago

    Só iniciante no estudo de html e css, ser poderem me da alguma dica ou fala alguma coisa que eu fiz errado no código eu agradeço '-')

    Qr_Code utilizando Html e CSS

    1
    Saul•1,260
    @xsaulPosted over 2 years ago

    Oi João, seu desenho ficou perfeito! Só no margem, se são os mesmos valores não precisa escrever duas vezes, "150px auto" faria exatamente a mesma coisa. E falando do margem eu acho que com "50px auto" ficaria centrado na tela e seu site não teria a scroll bar. De novo parabens é um ótimo trabalho!

    Marked as helpful
    0
  • ntandomagana•90
    @ntandomaganaSubmitted over 2 years ago

    I haven't been practicing for almost over a year now bc of mental issues, but we are back. Visited this challenge I downloaded a while back and it was so hard having to remember a few things. I watched and followed a video. I feel like starting from scratch. Please be nice :)

    Intro Component with signup form

    1
    Saul•1,260
    @xsaulPosted over 2 years ago

    Hello ntandomagana! Your JS code isn't working because in your HTML you wrote "" I think you should remove the "./" because isn't uploaded in a different folder.

    Just a few things you can improve in your CSS:

    Remember always when you do a button add a cursor: pointer. And also, your entire right section can be wider and would look better.

    But in general, you did a pretty good job congrats!

    Marked as helpful
    0
  • Luis Malquiel Hernández Avendaño•40
    @MixhetlSubmitted over 2 years ago

    You are using the <figure> tag and the <article> tag incorrectly. Since its characteristics do not lend themselves to that project. Are not necessary.

    I think I could improve some classes so as not to duplicate my CSS

    Please friends, inspect my code and be harsh in terms of criticism, only then will I improve. Thanks so much.

    QR code component

    3
    Saul•1,260
    @xsaulPosted over 2 years ago

    Hola Luis, en general hiciste un gran trabajo! Chequé tu CSS y le hice unos cambios para hacerlo más parecido al diseño original. Puedes revisarlo y decirme tu opinión!

    Tu carta yo la veía un poco más larga entonces le reduje la altura y le aumenté el ancho. También le cambié el margen para que de esa manera tu sitio no tenga una barra para hacer scroll.

    .card{

    width: 325px;
height: 475px;
margin: 50px auto;

    }

    Con los cambios hechos a la carta la imagen se veía mucho más grande que el texto, entonces también le reduje el ancho.

    .img{

    width: 95%;

    }

    Usando el margen de esta manera ambos parrafos van a estar alineados. Usando "20px auto" centrarías el segundo parrafo.

    .title{

    margin: 20px;

    }

    Y hablando sobre tu duda. En este diseño cada elemento tiene diferentes propiedades entonces no hay manera de crear clases que se puedan reutilisar.

    Marked as helpful
    0
  • Saul•1,260
    @xsaulPosted over 2 years ago

    Hello Alexioos, you did a nice job! For your text, is really simple you just need to change the font-weight to 600.

    And about your shadow what you wrote is "box-shadow: 0px 30px 15px 30px hsl(215, 70%, 10%)," so you made a mistyping and is just change to ";" and like that your shadow will be displayed.

    Marked as helpful
    0