Frontend Mentor | Frontend Mentor | Product preview card component coding challenge solution

Solution retrospective

What are you most proud of, and what would you do differently next time?

Each line of code getting me closer to my dream

I loved how to practice on my own without following tutorials and loved how I searched for help when I couldn't do something and even learned and understood better.

I'll do a better README file

What challenges did you encounter, and how did you overcome them?

I needed a width & height for the parent so I could center the div inside it

so I made a bigger container for the whole page and I gave it the width and height needed.

I thought that I could give the body itself a height but I wasn't sure if this was right.

What specific areas of your project would you like help with?

Is it right to give the body a height? or should I use containers?

Community feedback

Rahul Kumar• 570

@rahulkumar215

Posted 7 months ago

Hello Ali Mostafa👋

Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

h1, h2, h3, h4, h5, h6, p { padding: 0px; margin: 0px; }

Here you are setting the margin and padding to 0 on all heading and paragraph, this can be done in with best practice like this

*{ margin:0; padding:0, box-sizing: border-box;}

or more advanced

*, *::before, *::after{ margin:0; padding:0, box-sizing: border-box;}

It is perfectly fine to set the height of the body The best way to do it is like this

body{ min-height: 100vh }

this tells the browser to set the minimum height of the body to 100 view port height and If the height it bigger than 100vh then it will simply take 100% of the total height.

same here

.design { height: 700px;}`

change it to

.design { min-height: 100vh;}`

Here

.img-cont { width: 50%;}

You are using width: 50% to set the width of the image container, However if you are using flexbox on parent container then you can simply set the width of the child container like this

.img-cont { flex: 0 0 50%;}

and set the text container to

.text-cont { flex: 1;}

this will tell the text container to grow as much as it can, and it will simply take the remaining space left in the flex container ( remaining 50%).

Things I would recommend to learn

Flexbox tutorial

Basic concepts of flexbox

A Complete Guide to Flexbox

I hope you find this helpful 😄 Above all, the solution you submitted is great !

If you need any feedback or suggestions, I am happy to help

Have Fun Coding!

Marked as helpful