@namanajmera
Latest solutions
Latest comments
- @BKFOE
Hi! Good work on your solution. A few things that can support it to match the design.
- Setting the min-h-screen. This sets an element's height to 100% of the viewport height, ensuring that your element takes up at least the full height of the screen.
- The md breakpoint is used, but sm would be more appropriate for handling smaller screens more effectively.
- The image has a w-full, but the parent div also has a w-full, which causes your image to only take up the remaining available space rather than a fixed or proportional width.
- Object cover to position your image so it takes up the container and object left positions the image left of the container and centers the object on mobile screens.
- Design for accessibility and use alt texts.
- @melanielogan74What are you most proud of, and what would you do differently next time?
I felt more comfortable with this challenge using flexbox. Flexbox has been something that has been difficult for me to work with. I also found working with the hover to be easy. The highlight behind the topic title took some time, but I got it.
What challenges did you encounter, and how did you overcome them?I'm still not getting the hang of margins. Every time I think I know how they will work, my content does not display as expected. What helps is for me to play around with them using percentages and static values.
What specific areas of your project would you like help with?Thank you for previewing my attempt at this challenge. I welcome your feedback.
I had problems trying to center the container on the page. I tried including align-items in .card to center the container horizontally and vertically, but it only centered the text and not the container. Not sure how to fix this so I used the margins with percentages.
Also, had trouble increasing the height of the card. If I increase the height, all of the child items in the container shift down and leave a space at the top.
Lastly, if there is any feedback that could help me with isolating/sizing the card image so that it stays in place and does not shift when I'm working with the headings and paragraph.
@BKFOEHi there!
Overall I think the Semantic HTML Usage, Alt attributes, clear class names, and the well-organized structure of your code are positives.
Some improvements I would suggest would be the alt attribute for the "hero-image" (alt="Yellow graphic background") could better describe the purpose of the image. For example, if it’s decorative, it could be left empty (alt="") or describe its role in relation to the article. Additionally, add ARIA roles or labels where necessary, e.g., for the avatar section to clarify its purpose to screen readers.
Another thing to keep in mind is consistent heading levels. Using <h3> for the topic and <h2> for the article title is good, but consider whether the hierarchy of headings accurately reflects the content.
Consider Wrapping the Avatar Section using a <figure> and <figcaption> for the avatar image and name to improve semantics.
This is a solid foundation, with minor improvements, the code will be even better in terms of accessibility, readability, and maintainability. Great effort! Keep refining your code as you work on more projects to build on this strong start.
Marked as helpful - @Cheosphere@BKFOE
Love your design precision. You have been a great contributor to my style as I often look at your code to compare my sizing. Keep doing what you're doing. Thanks!
