Skip to content
Submitted about 2 years ago

Article Preview Component | HTML5, CSS3, JavaScript & Flexbox

David Ochoa•270
@davidochoadev
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

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. 😼

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    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

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