All solutions

Hey everyone. I've been stuck on this challenge for almost two days now.

I decided to just post how far I've gone and ask for help. Here are my main challenges or things I struggled with:

1. There was a lot of positioning necessary to get the mobile pattern background, the woman and the box in place. I use ::after and ::before in several places and I think I understand it. It was a lot easier to design for desktop first. Making it responsive on mobile gave me the major headache.

2. I'm not sure why, but for a linear gradient background, it didn't fit the entire width of the screen until i made the height a 100vh. Is that a normal phenomenon with linear gradient backgrounds?

3. I would love feedback on what I could have done to make this code more efficient. Also, kindly refer me to any links, books, videos that helped you understand positioning. Thanks

Hi everyone!

This was another great challenge. Here are my major takeaways:

1. How does one determine when and where to use <a></a> or <button></button> I think I am convinced now that links should be used when clicking on them simply navigates the user to a different section either on the same page or elsewhere. A button should be used instead, when clicking on it will trigger an action that can change the functionality of the frontend or backend of the website, such as when a new account is to be created. I also think that the other situations in which a button should be used are: in a form where the type attribute can determine the default event of the form, or if clicking on the button has no functionality except when triggered by Javascript. My convictions are based on these articles I read:

https://css-tricks.com/a-complete-guide-to-links-and-buttons/

https://uxmovement.com/buttons/when-to-use-a-button-or-link/

1. Debugging is a superpower. I couldn't agree more. I coded this site for desktop first and then added media queries for smaller screens. I realized after tackling the responsiveness that the cards stacked up on each other on desktop screens. That was weird, cause bear in mind, i had successfully coded the desktop screen to stay side by side. Guess what I found? I eventually realized that I had written a media query to target devices with a max-width of 7680px instead of 768px. Hilarious now 🤣🤣🤣🤣🤣🤣🤣🤣🤣. It wasn't when I was in the process of debugging.

2. I also tried to make better use of pseudo-classes and elements.

3. What do you think of my animations and the hover effect? Did I do well?

Feedback is very much appreciated.

As always, keep coding! Happy coding!

#Hi, everyone.

This is my first solution after almost a year of submitting a solution on frontendmentor.io

The challenge was pretty easy to do. Here are the main issues I faced:

1. How do I change the image based on the screen width? My research showed that there were several options. I eventually settled on hiding the mobile one on desktop screen size and hiding the desktop one on mobile screen sizes. Is there a better way to achieve that? Kindly let me know. I saw an option of using srcset though, but I'll explore that in subsequent challenges.

2. The images each had kind of like an overlay on them. How could I get the same effect in CSS? I researched and finally found the mix-blend-mode property. Setting a value of multiply did the trick. I'm still currently reading about the mix-blend-mode property on mdn in order to understand it better.

3. Lastly, i thought the site looked too plain. I thus used just a few animate classes from animate.css ☺️☺️☺️☺️☺️

What are your thoughts? Feedback is highly appreciated. In the words of the frontenders on here, keep coding! Happy coding!