Submitted about 1 year ago

Article Preview Component | HTML5, CSS3, JavaScript & Flexbox

David Ochoa• 290

@davidochoadev

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi, everyone! 👋

I'm David and this is my solution for this challenge.

✏️ Created with:

HTML5 🌐
CSS3 🎨
JavaScript 🚀
Flexbox 🧩
Media Queries 🖥
Mobile-First Workflow 📱

📝 What have i tried to implement in this project?

Commented and explained code
Well-Structured HTML5 markup, following best practices for accessibility.
Utilized CSS3 for visually appealing styles
Structured CSS into separate files for better organization and maintainability
Implemented JavaScript to create share content pop-up
Incorporated flexbox layout to create a flexible and responsive design, accommodating different screen sizes.
Utilized media queries to adapt the design to various devices, ensuring a seamless experience.
Followed a mobile-first workflow, prioritizing the development of a responsive design for mobile devices.

Any suggestions and help on how I can improve and reduce unnecessary code are welcome!

Best regards,

David Ochoa. 😼

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted about 1 year ago

Hi, David Ochoa! 👋

Nice badges on your README! 👍

Here are some suggestions for improvements:

No "avatar" word: Alternative text should not contain any words that are related to "image". The semantic meaning of the <img> element is already telling assistive technologies that it is an image.
Always add focusable="false" to all <svg> elements: focusable="false" is used to ensure old browsers will not allow the Tab key to navigate into the SVG. Source: Contextually Marking up accessible images and SVGs
Semantic HTML: Use a <button> element to create the share button. Wrap each social media icon with an anchor tag.
Accessible name: Make sure the share button and the social media links have a label. You can use the aria-label attribute.
Hide decorative SVGs from assistive technologies: Decorative images that are using inline SVG should have aria-hidden="true" to prevent them from getting pronounced by screen readers.

I hope this helps. Happy coding! 🙂

Marked as helpful

David Ochoa• 290

@davidochoadev

Posted about 1 year ago

@vanzasetia, as always the best, thank you so much for these wonderful suggestions. I will immediately implement the changes you have suggested! 🙇🏻‍♂️

Vanza Setia• 27,795

@vanzasetia

Posted about 1 year ago

@davidochoadev

You are welcome! It looks like you have implemented my suggestions.

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