What are you most proud of, and what would you do differently next time?
I feel like I'm getting more used to the workflow and being able to get through the steps more quickly. I still feel a bit lost when working with media queries, since I can get the results I want, but I'm never sure if I'm following best practices because I don't have a good framework for that yet.
What challenges did you encounter, and how did you overcome them?
Noticed that bold text looked way too bold in Safari compared to other browsers / how it's supposed to look. Apparently it's an issue with variable fonts, and Safari forcing fonts to be bold if they don't have a specific bold variant specified. Adding font-synthesis: none; to my reset seems to have worked.
What specific areas of your project would you like help with?
Like I mentioned earlier, probably about best practices with media queries?
What are you most proud of, and what would you do differently next time?
It was my first time doing a challenge that didn't come with the Figma file, so I had to use my eyes and guesstimate things. I think I got pretty close, but it would be nice in the future to maybe set things up where I can compare the provided image and my page more easily than just alternating between two windows.
What challenges did you encounter, and how did you overcome them?
At one point it seemed my media queries weren't working properly; then I realized it worked when I put them at the end of the file. I didn't realize that media queries didn't increase specificity, so I'll have to keep that in mind in the future when overriding propertie with them.
What specific areas of your project would you like help with?
I can't think of specific questions with this particular challenge, but I appreciate any feedback.
What are you most proud of, and what would you do differently next time?
The challenge said to make the text responsive without using media queries. It wasn't hard to find guides online on how to do that with clamp(), though figuring out the vw width value that seemed to work best was a bit trial and error. I'm glad the card width being responsive also worked without media queries.
What challenges did you encounter, and how did you overcome them?
There were some inconsistencies in the Figma file. The "Design System" page claims spacing-200 is 16px, but the variable in Figma itself is actually set to 24px. It took me a while to realize why the padding on my version looked smaller than the one on Figma and on the preview file. In the end I decided to set it to 24px to follow how it looked rather than what it said.
I also noticed that in the mobile version, the author's name is the only piece of text that doesn't get smaller. It felt weird to set a different font-size just for the author name that wasn't the responsive custom property with clamp(). So instead, I let the author name be resized as well, and just set the author image size in em instead of rem so that it would be sized down along with the text and not look weird.
What specific areas of your project would you like help with?
On Safari, the SVG image has this weird bug (?). The "{" shapes on the bottom right corner are supposed to be half-black and half-white – when I open the page in Safari, they look all white. Weirdly enough, if I click and drag the image, it switches to showing half/half properly, but if I refresh the page it's all white again. I was afraid my CSS was affecting the image's styles somehow, but after checking, I saw all the SVG's colors are hard coded in hex code inline, so I don't think that's possible? I saw it seemed to be working fine on Firefox, so I chalked it up to Safari and gave up on trying to fix it, but it would be nice to know what's going on...
What are you most proud of, and what would you do differently next time?
The biggest challenge was getting more used to using git. I was happy to find out how easy it is to create a new Github repo from a local one using the gh repo create command from the Github CLI. But, I was also testing out the GitButler git client/GUI and it was a bit confusing, I'm not sure I'll use it next time.
What challenges did you encounter, and how did you overcome them?
There were some decisions about how to write the CSS that were difficult to make with the challenge being just one component in isolation without the rest of a website around it as context. I tried to imagine there was a whole website that I wasn't seeing, but I'm not sure I succeeded at that.
What specific areas of your project would you like help with?
Is it semantic to use a element for the card, or would it be better off as a generic?
