What are you most proud of, and what would you do differently next time?
Happy to complete the last intro design!
What challenges did you encounter, and how did you overcome them?
Originally I applied padding to my article which caused padding around the image for the mobile view, which didn't fit the design. I quickly adjusted this by adding space to the individual sections themselves.
What specific areas of your project would you like help with?
I just want to make sure I used the correct semantic html.
What are you most proud of, and what would you do differently next time?
I am most proud of the improvements I made to accessibility with HTML and my increased proficiency in using CSS Grid.
What challenges did you encounter, and how did you overcome them?
I had an issue with spacings that weren't whole numbers when using rem units and scaling them properly. I overcame this by using CSS variables and em units to help scale with the changing font size on smaller screens.
What specific areas of your project would you like help with?
I would like further help and pointers with accessibility. Additionally, if there are any tips to improve spacing or best practices I didn't use, I'd appreciate any feedback.
What are you most proud of, and what would you do differently next time?
I used a calc function to dynamically update my font-size between the minimum of 14px for mobile view and 16px for the desktop view. This will be extremely helpful for the future, and I'll be able to reuse this. See readme for further details on this.
I used utility classes for font size and color variables. I think this lets me keep everything in one central place and if I need to make changes, I can just alter the values and it will update across my sites, and I don't have to go hunting individual values down.
It's a little thing, but I also put a transition on the hover state for the desktop card. I think it adds some professionalism, and doesn't jar the user with a hard snappy transition.
What challenges did you encounter, and how did you overcome them?
Figuring out the calc equation was definitely the most difficult, along with getting the right sizing for the mobile view. I started mobile first with this project. The figma design is at 375px width, which there are smaller mobile sizes out there, so adjusting this without media queries was challenging, but I feel I accomplished it. I always try to let css do the brunt of the work for me.
What specific areas of your project would you like help with?
Any areas where you think improvement can be made, please let me know.
What are you most proud of, and what would you do differently next time?
I am proud of the responsiveness, but I would like to take a mobile first approach next project.
What challenges did you encounter, and how did you overcome them?
I had an issue with footer sizing and the qr "card" at the smallest mobile device screen sizes. I overcame them with media queries and size adjustments (font and element).
What specific areas of your project would you like help with?
