All solutions

This challenge was particularly difficult in getting familiar with BEM and some mental stumps that I found myself in. Through a variety of resources I listed on the project README and persistence, it eventually became clear and I think that the solution I came up with allowed me to continue to grow.

That said, I do have some questions:

1. For those familiar with BEM, how do the class names look to you? What about the HTML structure itself? Intuitive? Anything you'd change?
2. I applied the max widths to the card based on manual testing of where I thought the dimensions would best maintain the look and feel of the design. Do you agree with my choices? Any feedback here?
3. I did some specific manipulations to the image, particularly at larger screen sizes; setting height to be 100% and using object-fit: cover. Would you have done this as well? Any alternatives I can consider?
4. How about the color effect on the image? I think that's the easiest way I could've done it, though I'm curious to learn more.

These are all the ones I am aware of now, but as usual I'm open to any feedback to be able to improve my solution and grow as a dev. Thanks again!

Very fun challenge!

What I found the most difficult with this project was starting to familiarize myself with BEM and how it works. I came up with a diagram and had a very helpful discussion with @gracesnow, as well as learning from a ByteGrad video about the subject. This and more helpful resources are present in the submission README.

I'm confident about my entire code, I feel that it's been as simple as I could make it while still being responsible and following best practices. As always, however, there is stuff I may be missing and/or be incorrect about, so I look forward to hearing those!

Happy to learn more from yet another fun challenge! Thanks to everyone in the community for creating the platform & engaging ways to continue to learn :)

What I found difficult

1. I'd skipped some of the roadmap projects due to excitement and wanting to get to "bigger" things faster, and was reminded why that is not a good idea! When I came back to this project, the amount of learning was still there, but in a reasonable leap rather than too much too fast. Patience is important too!
2. Learning about CSS Grid was interesting, and the equal column sizing and grid-template-areas were new concepts to wrap my head around that took a while for me to get, but happy I did it
3. Initially, I thought getting the sign up button to have the horizontal padding to match available width without stretching it would be difficult, but then I arrived at making it's parent a flex container to get there on time

Areas of code I'm unsure of Nothing specific, open to any feedback! I'm already getting more and more convinced behind getting used to BEM, but I think that for this challenges' complexity how I structured HTML and CSS is okay?

Best practices questions

1. Could I have used any semantic elements over div for .description, .sign-up and .why-us? I thought about it but I wasn't sure, and I followed Kevin's advice of "for semantic elements, as you're learning more about them, if you're not sure it's better not to put them than to put the wrong one". I'd love to learn from a more experienced dev what they would've went with here.
2. Using the accessibility panel in the web console for Firefox, I see some warnings for contrast in text colors/etc. I followed the Figma spec as close as possible, but I'm unsure if this is somewhere I went wrong or a place where the spec could be more accessible. I would be happy to help in any case to arrive at better accessibility, whether the room for improvement is just on my solution or on the challenge as well.

Thanks again, and look forward to chatting in the comments and in future solutions!

This was a fun project to participate in! Conquering Responsive Layouts course, as well as past experience from the QR project, made it easier for me, which I'm interpreting as a good sign :)

Open to any feedback possible, and whether I implemented the wrapping behavior correctly.

This was a fun challenge to start out with! I've included more info in the repo's README, but here's a summary of the questions I'd have.

• I wasn't comfortable with having the "title" of the card use an h* tag and changing it's size. I'm starting to think that it could be more semantic to indicate it's a title, and that this would be ok?
• Are the placement techniques/thought process I describe in the repo ok? Was there another way I could've addressed the spacing/centering main content w/ footer problem?
• I followed the Figma spec to have the card and font sizes be accurate, but some of the spacing within the card I wasn't able to get exact. Rather than tinker with them manually to try to get them to match the design pixel-for-pixel, I decided it'd be better to let the browser pick an appropriate padding based on the font size and element type. Would you agree with this approach? Should I have done it differently?

Thanks for your time and feedback!