All solutions

What are you most proud of, and what would you do differently next time?

Hi everyone! Overall happy with how this came out. I used the PerfectPixel extension for the first time and although it was a little bit of a learning curve, I am happy with the result. The area I'm not very happy with is that I used defined values for the width and height which I usually try to avoid, if anyone has any recommendations on how to avoid that with a card this size that would be greatly appreciated.

What challenges did you encounter, and how did you overcome them?

Overall I didn't have any issues with this challenge, the only area that took some reworking was fixing the width, height, and padding for the mobile version vs the desktop version.

What specific areas of your project would you like help with?

If anyone has any recommendations for any of my CSS I would love to hear it! I've been focusing mostly on React recently so my CSS is a little out of practice.

What are you most proud of, and what would you do differently next time?

I completed this challenge as apart of the introductory learning path and had a lot of fun with it. I feel very confident in the accuracy of the sizing, and responsiveness of both the font-sizes and the width of the card itself.

What challenges did you encounter, and how did you overcome them?

I had no challenges with this, the area I spent the most time on was making sure the padding and margins lined up with the design.

What specific areas of your project would you like help with?

I would be interested to hear everyone's ideas on how I went about the usage of CSS variables and my padding, margin, and gaps. Specifically how I went about spacing the body section of the card, although the layout doesn't change I used grid to be able to control the gap in between all of the elements to prevent myself from having to type margin-top: 0.75rem every time and as an alternate to using the :not(:last-child) selector. Not sure if this is a great practice or not. Thanks everyone!

What are you most proud of, and what would you do differently next time?

I am most proud of forcing myself to use SCSS more and getting more comfortable with the current webpack/SCSS file structure and work flow that I'm using. I am more easily able to debug any issues that arise with my webpack setup and feel like I have more flexibility in how I set up my projects. I went with a mobile first design which made this project much easier since I only had to worry about the one media query and didn't have to change any of my grid settings to make it responsive for mobile.

What challenges did you encounter, and how did you overcome them?

I initially started this project many months ago so when I came back to finish it I had to review my previous code and ended up changing quite a bit of things that I didn't deem necessary anymore. I struggled largely with getting the image and the body text to be symmetrical but was happy with how it turned out in the end.

What specific areas of your project would you like help with?

I would like for everyone to check my responsiveness as much as possible. I still feel like a lot of my code is very redundant, over-complicated, and a bit inefficient. If anyone sees more efficient ways for me to tackle some of the layout I would absolutely love to hear it.

Hey everyone!

Really enjoyed this project and very much appreciated the JSON data for practice. This was my first time deploying a project on here using webpack, if there is any advice for my file structure that would be greatly appreciated!

Areas of note:

• I took on the challenge of dynamically updating the category icon, title, and score using the provided JSON data and even decided to take it a step further and have the overall score be a dynamic average based on the numbers provided in the JSON data That way I am able to just update the JSON data and have the individual scores update as well as the overall score.
• I struggled a little bit getting the mobile view categories to be aligned exactly how I wanted, any advice would be greatly appreciated there as to how to align those better.
• Overall the project was easier than I initially anticipated and I was happy with my end result and how responsive it is.

If there is any feedback about the semantics of my HTML, CSS or JS that would be greatly appreciated, I'm actively trying to not repeat myself in my code so if there is also any advice about ways to reuse certain elements that would be very helpful.

Thanks everyone!

Hi everyone!

Had a lot of fun with this challenge and certainly learned a lot. My solution certainly isn't pixel perfect and I made a few small changes myself. For example, I added a feature that makes the input box glow green when you have a valid email inputted. On the mobile success page, I have my icon and text aligned flex-start even though it appears the challenge has it more centered. I liked the look of it aligned to the top more and didn't feel the center alignment worked as well for me.

Any and all feedback and advice is very much appreciated! If there is anything in my code that could be cleaner or anything that could be simplified that would be fantastic.

Thanks everyone!

Hi everyone!

This is my first submission here on Frontend Mentor, I wanted to start very basic for my first challenge, excited to work through the rest of the challenges! Any and all feedback is appreciated especially in the specific areas:

1. Making sure the overall code is well organized and well structured
2. I feel like the logic of some of my CSS could be simplified, any advice there is helpful

Thanks is advance!