All solutions

I know that I could have done better and there are likely some subtle differences between my version and the solution version, but it is fully functional and deployed as of this moment. Overall, it was a pretty good challenge. I did not work on it every single day due to a combination of procrastination, laziness, and getting wrapped up in having to do other things. I'm always open to feedback. Thanks for taking a look :)!

Hey Everyone,

This one was pretty straightforward; of course, I'm sure there's always something that could be improved on. Thanks for looking!

Hey Everyone,

I found getting the image on the top of the card precise to be the most difficult part of this challenge. Also, on the mobile view, I didn't quite get the spacing right below the "Cancel Order" URL. I mostly enjoyed this challenge, as I really like building things out from Figma files. I gave BEM naming conventions a shot, although I think I'm not 100% correct. If there's anything I could have improved on, definitely let me know as I'm always open to any kind of feedback I can get.

Thanks!

I found this challenge to be particularly tedious, however, I did my very best to get as close to the design as I possibly could. Unfortunately, it's not 100% picture-perfect. In addition, there were MANY lines of CSS written, which I'm sure is not ideal. Initially, I had the design looking almost perfect in the mobile and tablet versions. Sadly, my layout ended up breaking, so I decided to save a backup copy of my previous CSS file and start from scratch. This time around, I utilized a combination of CSS Grid, Flexbox, and absolute positioning. What I found to be the most difficult part of all of this is following the design guide in Figma to get the design as close as possible. Landing pages can be difficult at times, but overall, I did enjoy the complexity of this project. I started off by doing a generic CSS reset, followed by setting universal styles at the top of the document. From there, I targeted CSS classes within media queries to make sure that the layout wouldn't break. I noticed that I forgot to do a few little things within the project, so I'll update those changes later. As always, I'm super open to just about any form of advice or feedback, whether it be positive or not so great. Take a look, let me know what you think (and maybe what I could do differently next time). Thanks for checking this out!

Good Evening Everyone,

I recently submitted my solution to this challenge; the most difficult task was getting the image overlay hover effect to work. Now that I've set this up (thanks to a W3Schools example), I have an idea on how it's done and can use it in the future! Also, I have a feeling that I could be slightly off on the mobile design, but it's hard to say. I'm always open to feedback (good or bad), thanks for viewing!

Good Evening Everyone,

This is my solution for the QR Code Component. I've invested several hours into learning web and application development over the past year or so, so I've decided to complete all FEM challenges possible ranging from easiest to most difficult. This project was pretty simple overall; I was able to achieve this look with minimal classes. I set a root font size on the body of 16px and converted all units to REMs. If you have any tips or suggestions, please let me know. I love to learn and am always open to any form of feedback.

Hello everyone, and thank you for taking the time to visit my solution to the challenge. Although my solution was not entirely exact, I felt that this was a pretty comprehensive and rewarding challenge to take on. What I found most challenging was selecting a compound selector (which returns a NodeList), and adding and removing classes from the NodeList value. This is relatively straightforward when making changes on a single selector, however, I learned that in this type of scenario, the proper way is to loop through the NodeList and pass a value to extract the class to perform the change operation on. Also, since I decided to use flexbox on the card layouts, I could not get the margin exact on the completed card without breaking the layout; I decided to leave it as-is. This was a good learning experience to build and complete a project. Please let me know if there is anything I could have done differently or more efficiently; I'm always open to opportunities for improvement.