What could be refactored in my CSS to make it simpler? I tried combining as much code as I could and ultimately found that I was overwriting myself as I was doing it which results in me splitting EVERYTHING into classes so I could better track where I was getting stuck. My primary cards have a total of three classes on just the top level card and that seems excessive.
On desktop, what could I do to improve the handling of the grid layout? It feels very clunky to me. I'm not sure if that's just my lack of understanding the concepts of Grid or if I'm overthinking it. Realistically I would have liked this to reduce from desktop to mobile and back again with a little less reliance on media queries, but as I worked through this I genuinely could not figure out a way to make that possible. It feels like grid is intended to be very precise whereas flex allows you to utilize percentages and math to scale responsively.
Is there a more efficient, less complicated approach to this? Is mixing Grid and Flex okay as long as it achieves the solution or should I have stuck to one or the other and worked my way through it? This project was frustrating and I'm not sure if I just made it more complicated than it had to be and that's why I struggled with it so much.
Ensuring that my HTML is clean and I kept the CSS simple. I tried hard not to "over code" this time.
Ensuring correct HTML tags were used and if there's a suggestion on how to handle my issue with the header graphic better.
Ensuring that I used correct semantic HTML, especially with regards to accessibility since that was a huge problem on my last project.
Ensuring that I got the accessibility portion correct this time, as I did not do that on the first project. I think the code is sound though.
Well, first time using grid, not that hard if you read documentation
What challenges did you encounter, and how did you overcome them?I think I did huge layout, its bigger than solution
What specific areas of your project would you like help with?Flexboxes
Good job! Your layout reduces from desktop to mobile really well! My layout also ended up being a little bigger than the design, which is probably just a matter of adjusting the font sizes.
Using translate to position the left and right cards was brilliant! I wish I had thought of that, it would have saved me quite a bit of time. Well done!
Good job, love the simplicity of your solution! It does look like you're missing the :focus state on mobile though
Please help me with the way my page browsing, there is a problem with the display i can't figure it out... when i inspect the solution there won't be any problems
On the <body> tag in your media query, I would remove the height: 100vh; or change it to min-height: 100vh as it's causing your content to be larger than the browser window, forcing me to scroll out to see the entire layout.
Good job! The vertical spacing is a little off on the name, location, and description lines, but otherwise, you got it really close to the design prompt! :)
If you want the styling of the box shadow to match more closely to the design, change the "5px" in the code to "10px 12px 0px var(--Black)". That third value creates the blur radius.
