Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

First solution using Css3 grid | Responsive Design

Dami 35

@Damilare82

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey Guys, i must say i am very glad to be part of the community. i want to be a type of developer who uses css3 grid more than using flexbox and tend to make designs responsive that way..... and i have made lots of practice with it, i also want to be a type of developer that people can say wow he is so good with css Grid, although i know flex makes things easier but to me i believe Grid is more beautiful...

Any advice for me please?

Community feedback

@tl-lucasestevam

Posted

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

@Damilare82

Posted

@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,735

@FluffyKas

Posted

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

@Damilare82

Posted

@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,735

@FluffyKas

Posted

@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

@Damilare82

Posted

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

@PiyushJain01

Posted

This comment was deleted

0

@thesohailjafri

Posted

@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

@Damilare82

Posted

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

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord