Article Preview Component | HTML5, CSS3, JavaScript & Flexbox
Design comparison
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
- @vanzasetiaPosted over 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-labelattribute. - 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 helpful1@davidochoadevPosted over 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! šš»āāļø
0@vanzasetiaPosted over 1 year ago@davidochoadev
You are welcome! It looks like you have implemented my suggestions.
0 - No "avatar" word: Alternative text should not contain any words that are related to "image". The semantic meaning of the
Please log in to post a comment
Log in with GitHub
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