List marker adjustments, the transition property, and media query,
Understanding "align-items" and "justify-items." What are they used for? I've noticed they don't always work on elements.
I would like to know how to do this project using CSS grid instead of Flexbox.
I had a problem with :marker. Classic margin and bottom wasn't functionaly.
What specific areas of your project would you like help with?I think the code is long, considering how simple the page is.
This is great, I like the color scheme you chose for this as well. I'd suggest putting some more space in between the image and the heading 1.
I am proud of how I tried different color palettes from coolors for the component and choose the one that blended well with the components in the component using CSS variables for easier testing of different palettes.
What challenges did you encounter, and how did you overcome them?I had a pretty hard time picking a neutral color palette from the wide set of options by coolors and I had to pick a few of them and try them out in a Figma mockup to see the one blending with how I want the component to look and that is how I came up with the palette I used.
What specific areas of your project would you like help with?I had an issue with knowing the standard dimension of elements to use in my component making me to end up with the component behaving well on desktops but being extra small in mobile layouts.
I love the color scheme you chose for this. It has a scholarly aesthetic to it. I noticed in the code, the "font-family" for "Inter" was used multiple times on different selectors. For mine, I put the ".card" into a "main" element as the child of the body. Then applied the "font-family" to the "main" element. This way I could keep the "footer" within the "body" element and not change the font of the "footer". Previously I had the "font-family" under the "*" however that also changed the "footer"s font, and figured it'd be better to be more specific for the hypothetical "future changes."
I’m most proud of how clean and organized my code turned out, especially with the use of CSS variables and Flexbox for layout. It feels great knowing the design is not only responsive but also accessible, with ARIA labels and focus-visible styles for better keyboard navigation. Adding the skip link was a small but meaningful touch that enhances usability.
I’m also really happy with the modern, polished look of the card component. The hover effects and the box-shadow give it a nice, interactive feel without being overwhelming.
I’d explore adding subtle animations or transitions to make interactions even smoother.
Additionally, I’d like to test the project more thoroughly with screen readers and accessibility tools to ensure it works seamlessly for all users.
What challenges did you encounter, and how did you overcome them? Challenges I EncounteredOne of the main challenges I faced was ensuring the card layout stayed responsive and visually appealing across different screen sizes. Balancing the use of min-width and max-width properties while ensuring proper padding and spacing required some trial and error.
Another challenge was improving accessibility. Adding ARIA attributes, focus styles, and a skip link involved a lot of research to ensure everything worked correctly for keyboard users and screen readers.
To address the responsiveness issue, I used Flexbox for layout and defined clear min-width and max-width values for the container and card. This allowed the design to adapt while maintaining its structure.
For accessibility, I referred to resources like MDN Web Docs and accessibility guidelines to understand best practices. Testing the solution with keyboard navigation helped identify areas for improvement, such as adding more prominent focus-visible styles and refining ARIA labels for better context.
What specific areas of your project would you like help with? What Specific Areas of My Project Would I Like Help With?I would love to get suggestions on:
1️⃣ CSS Grid or CSS Libraries
2️⃣ Animations to Enhance Visual Appeal
Thank you in advance for your insights! 😊
This is amazing. There is some code that I don't understand yet (due to my own inexperience, not due to any errors). I don't know what the [:root] property and its attributes do on style.css. I also don't know what the value for [font-size: var (#)] in media.css does. I like how you split it into two different style sheets and how organized it is.
This is very well done. I like how you used flex columns to keep the elements of the card aligned. Another thing I like is that the card stays the same size when the screen size is adjusted, but still fits nicely within the viewport. I was struggling with this and used Media Query to get the card to size correctly for different viewports. How did you do this?
