All solutions

This was a fun project🤓. But it took some time to set the background-image properly across diffrent screen sizes. Learnt a few new things. Used min() and max() CSS functions on all width values to set the width dynamically without having to write too many media queries.

Any feedback is welcome🙏. Happy coding🧑‍💻.

This was a fun challenge🤓. Used CSS grid for layout system. Any feedback is welcome🙏. Happy Coding🧑‍💻.

This was a great project to practice CSS grid layout system. Normally, i use grid-template-rows / grid-template-columns to define my rows and columns.

In this project i played with grid-template-areas, and i noticed it is much easier to make complex layouts (this challenge doesn't have complex layout 🤓) using grid-template-areas rather than traditional ways.

It was a very fun project. Any feedback is welcome 🙏. Happy coding.

Completed the website in just 90mins, but i faced a problem. Whenever i tried to increase the font-size of my paragraph, the design of the anchor tags(which i am using for the learn more button) breaked down. A mysterious whitespace is created under the button.

These are some solutions that i already tried ,but didn't work for me.

1. changing the anchor tags to button tags
2. making anchor tags inline-block

I thought, because the number of words(even their length) in each paragraph are different, the amount of space they are taking is different. That's what must be causing this issue. But i am not sure.

If anyone has a solution/suggestion for the problem, i will be very grateful 🙏. Thank you and happy coding.

This is my first website which is built with mobile-first bulding approach. I must have made some mistakes 😕.

1. What are some mistakes that i made and how to fix them?
2. How to go about mobile-first building approach? All suggestions are welcome.

As we can see that there are subtle borders ouside the preview card. How do we achieve that other than using box-shadows(which i used) css properties ?

In a column layout it is very easy to manage the size of an image while making a responsive design. We can give a specific width to the container (which contains the image) and make the image's width 100% of the container width and use properties like 'object-fit' , 'object-position' , 'background-size' , etc to make the image responsive.

But, what happens when we are dealing with height of an image in a row-based layout (i.e. in mobile layout) ?

1. Either in flexbox, when flex-direction is set to column.
2. Or in GRID based layout.

How do we now make an image responsive now ? It would very helpful if someone could give a very simple explaination. If the explaination seems to be long , you can also point me to a article on the internet.

Which is the preferred way to overlay an image with colored background? Give the answer in the context of current challenge. I have thought of some ways. Please correct me if i am wrong.

1. Using ::before or ::after psuedoelement selector on image or image container.
2. Using linear-gradient if we are displaying the image with the help of CSS and not HTML.

To center the direct child element of a body element both horizontally and vertically, which is more preferred way out of using flexbox on body element or using absolute positioning on the child element itself ?