3-Colum-Preview-Layout : PURE HTML | CSS | WITH A PINCH OF ANIMATIONS

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/

2. 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.

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

4. 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!