Submitted 2 months ago

Article preview component solution - HTML, SCSS, vanilla JS, RWD

webdevbynight•410

@webdevbynight

Preview site View code

This is a solution for...Article preview component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I used the scripting media query to serve CSS declarations applying only when JavaScript is enabled.

What challenges did you encounter, and how did you overcome them?

No specific challenges.

What specific areas of your project would you like help with?

No particular help requested.

Community feedback

leeport511•70
@leeport511Posted about 1 month ago
Semantic HTML Good use of <article>, <section>, <h5>, and <p>. Consider using <figure> for the image and <address> for the journalist's name to improve semantics. Accessibility Improve alt text (e.g., "A beautifully crafted set of wooden drawers"). Add aria-label to the share button (e.g., aria-label="Share this article"). Ensure good color contrast and check for keyboard navigation on all elements. Responsive Design Ensure the layout adapts well on all screen sizes. Test the visibility of share buttons for both mobile and desktop. Check for text and button resizing on small and large screens. Code Structure The structure is clear, but class names could be more concise and reusable. Ensure JavaScript focuses on manipulating classes instead of inline styles for separation of concerns. Design Consistency Make sure spacing, typography, and layout are consistent across devices. Overall, your solution is strong! Focus on improving accessibility and refining responsiveness.
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord