First solution using Css3 grid | Responsive Design

Community feedback

• 

  Lucas Estevam•210

  @tl-lucasestevamPosted over 3 years ago

  In fact, between the two there is no better or worse, I personally think as follows:

  The grid does much better to make the layout organize the divs, sections, containers, etc. To organize the content of an element, using the flexbox is better.

  Here is a better explanation: https://blog.logrocket.com/flexbox-vs-css-grid/

  Anything in the development world whether it's a programming language, or even in this case a CSS property is just a tool. There are never betters or worsens, there are betters and worsens for every day-to-day situation.

  Now about your code, as Fluffy already said your pics then breaking it, I took a look and figured out why your images src looks like this: src="/icon-music.svg" you submit do dot before the slash so it should look like this src="./icon-music.svg"

  Another important thing to say is that you divide your projects by folders, the best-known pattern is with the styles (your CSS), js (your Javascript), and images folders. As it is a quick project and you are still starting the styles and js folders are unnecessary but the images folder is a good option to better organize your project.

  That way the src of your images would be: ./images/icon-music.svg

  Your HTML structure looks good to me, your CSS is correct, great job!

  And finally, congratulations for completing this project and joining the frontend mentor community, welcome! Any questions just comment here.

  Marked as helpful

  3

  ---

  

  Dami•35

  @Damilare82Posted over 3 years ago

  @tl-lucasestevam Thank you so much for your words of encouragement, it means a lot to me. I would try and fix the images and also keep all assets in a folder. Thank you once again !

  0
• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 3 years ago

  Hey,

  Your image sources are broken, I'd start by fixing them. Then there are several typos that should be corrected. Then, since you prefer using grid, you could center your card with display: grid, place-items: center. And finally, and that's my personal opinion, flex and grid should both be learned and mastered, each have their own use cases. ^^ With time, you'll develop a sense when to use flex and when to use grid, but overall, neither should be treated as superior :) I hope this helps.

  5

  ---

  

  Dami•35

  @Damilare82Posted over 3 years ago

  @FluffyKas Hi fluffy Kas, thank you so much for your comments, I'm so glad I joined this community, just to be sure please pardon my questions

  1. What does display grid, place-items center do?

  Secondly I have the plan to restart my learning process after the have a little understanding of html/css and javascript, thank you once again, I so muchappreciate

  1

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 3 years ago

  @Damilare82 place-items is a shorthand for align-items and justify-content properties. Combined with grid, it's a quick way to center items both horizontally and vertically.

  Just keep on doing what you're doing, even if you're not entirely correct all the time, that's how you'll learn. :) Congrats on your first upload again, and good luck ^^

  0
• 

  Dami•35

  @Damilare82Posted over 3 years ago

  I have tried to fix img src 😊 I didn't know about this before cause its my first time hosting and I also clicked on generate new report, hope the update one comes live soon. Thanks for your feedback!

  1
• 

  Piyush jain•220

  @PiyushJain01Posted over 3 years ago

  This comment was deleted over 3 years ago

  0

  ---

  

  Sohail Jafri•350

  @thesohailjafriPosted over 3 years ago

  @piyushjain221 img src="./illustration-hero.svg"

  as it is a relative path(./) that will change when you upload the folder for hosting

  1

  

  Dami•35

  @Damilare82Posted over 3 years ago

  @thesohailjafri thanks for your comments I'll do that right away

  1