HTML5, CSS3, Flexbox, VScode, Git and Github

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @charbavito, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

  Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

  1.You can use <main> to replace the <div> containing the whole content, <div> is a block element without meaning and <main> is a tag the shows which is the most important block of content in this page.

  2.Fix the component responsiveness, its not working yet and this is due the fixed width you've applied to the container. The difference between width and max-width is that the first(width) is fixed and the second(max-width) is flexible and make the element shrink when the screen starts to scale down. So if you want a responsive block element, never use width choose or min-width or max-width.

  3.For future projects, think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.

  4.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, and making the images easier to work, see the article below where you can copy and paste this CSS code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Charles Barros•70

  @charbavitoPosted about 2 years ago

  @correlucas Hello man!

  Thanks a lot for the tips, I'll tweak the ASAP code and make these corrections. I confess that I noticed these responsiveness issues, but I decided to go ahead with the project because I still haven't learned these responsiveness issues well and I didn't want to stay stuck this project any longer.

  But I loved your tips and they will certainly help me in future projects. Thanks a million.

  Cheers!

  0
• 

  P

  Abdelrhman Ahmed•170

  @MrBlackvantaPosted about 2 years ago

  Hey @charbavito congratulation on solving your first challenge you did a great job, I loved you're code very much.

  A couple of hints tho to really complete this challenge:-

  • Change the font-weight of the heading to 700
  • Add a box-shadow to the card.

  You're more than welcome to contact me if you ever get stuck in you're upcoming challenges at [email protected]

  Marked as helpful

  1

  ---

  

  Charles Barros•70

  @charbavitoPosted about 2 years ago

  @MrBlackvanta Hello bro!

  Thanks a lot for the recognition man, I tried to write the best way possible, within my beginner's reality. Thank you very much for your observation about my code. I must be heading in the right direction then...

  I'll work on the code ASAP and take into account your suggestions for improvements man, I really appreciate it.

  Cheers!

  0