All solutions

Page Speed Insights is giving me a terrible evaluation with "!" for performance and accessibility. It says something about the issue being related to images. I think it's due to the tiles that are fetched to create the map. If anyone knows a solution to this problem, kindly help out. Your feedback, suggestions, tips and help will be highly appreciated.

I was not able to position the wavy illustration. I tried to set it as a background image but the element where I set it already had an image. For now, I've submitted the project without it but I hope to add it soon.

If you have any suggestions or helpful tips about it, then kindly share. Otherwise intend to finish it on my own anyway.

Also, if you have any other suggestions, tips, comments, mistakes that you found, then please comment to let me know.

My design differs from the design file because I didn't have the figma file and as a result I didn't know the exact dimensions of elements. I believe I can recreate it perfectly if I just get the design file.

I had some trouble with the four client icons because the ones that were given in the assets were larger than the ones shown in the designs. I think we could get around it if we used aspect ratio properties but I just used their default sizes and that's why the fourth one wraps onto the next line on small devices. I would appreciate it if someone could tell me how I can size those icons as given in the designs.

I'm having trouble deploying my project to GitHub pages. My project shows up just fine on Netlify but on my GitHub pages site for this project, a blank page is shown to me with this error logged into the console: Loading module from “https://wdwaleed.github.io/Advice-Generator-App-Frontend-Mentor/src/main.jsx” was blocked because of a disallowed MIME type (“text/jsx”)

I had alot of trouble in the following two things and although I managed to get by in the end by using some "hacks", I have to admit, I'm not proud of how I got by nor do I like how the results. I couldn't achieve what I wanted to and I would appreciate help.

The things I struggled with are the following:

1. Transitioning the background to a linear-gradient

I specified a color for a button's normal background and linear-gradient for the hover state. But I could not get it to transition to the hover state. I wanted it to be smooth but it didn't work. Then I found out that linear-gradients work on image related properties a background-color will not transition to background-image. I still haven't found the correct way to transition to the hover state linear-gradient although I came up with a "hack" for the time being.

2. Custom markers for list items

I got the result I was looking for by adding the tick svg using the ::before pseudo-element on the list item but I think this is not the correct and efficient way to do this because we've got the ::marker pseudo-element for this job. Can someone please tell me how I can achieve the same result by using the ::marker element?

I would like to know about some CSS quirks.

I found out about a quirk of CSS. I don't know what it's called exactly but basically if 2 divs are inline-blocks, declared to take 50% of the width they will NOT stay side-by-side unless the start tag of the second div is right after the end tag of the first div. This way there will be no whitespace between the two divs and 50% + 50% = 100%. This won't happen normally. Therefore I call it the "Whitespace Quirk".

I would like to know any quirks that you guys might know of so that I can deal with them beforehand.