Respponsive Article preview component using html css and js

Community feedback

• 

  M. Abubakr•250

  @m-abubakr1

  Posted 5 months ago

  Here’s some feedback and guidance to help improve your code clearly and straightforwardly:

  1. Layout and Centering Using CSS Grid

  Current Approach: You’re using Flexbox for centering and stacking your elements, which works well. However, CSS Grid can give you even more control over the layout. For example, you can center the entire card on the page with minimal code:

  body {
    display: grid;
    place-items: center; /* Centers content both horizontally and vertically */
    min-height: 100vh;
    background: #ecf2f8;
    font-family: "Manrope", sans-serif;
  }
  

  This method is very concise and powerful for centering content.

  2. Handling Responsiveness with Clear Breakpoints

  Tip: Instead of duplicating large blocks of styles for different screen sizes, try to group common rules and then override only what’s necessary within media queries. For example:

  .container {
    max-width: 327px;
    width: 100%;
    /* Common styles here */
  }
  
  @media (min-width: 769px) {
    .container {
      max-width: 730px;
      flex-direction: row;
    }
  }
  

  This makes your CSS easier to maintain and reduces repetition.

  3. Improving the JavaScript Toggle Function

  Current Approach: Your current JavaScript uses inline style changes to toggle the visibility of the social media icons. This works, but you can improve the separation of concerns by toggling a CSS class instead. This keeps your style logic in CSS and your behavior in JS.

  New Approach:

  Define a CSS class for the visible state:

  .hidden {
    display: none;
  }
  

  You might already have a default hidden state for the social icons:

  .social__media-icons {
    display: none;
  }
  .social__media-icons.active {
    display: flex;
  }
  

  Toggle the class in JavaScript:

  const shareElements = document.querySelectorAll(".shared");
  const socialIcons = document.getElementById("social__media-icons");
  
  shareElements.forEach(el => {
    el.addEventListener("click", function () {
      // Simply toggle the "active" class
      socialIcons.classList.toggle("active");
    });
  });
  

  This approach simplifies your code and makes it easier to adjust the visual presentation just by modifying your CSS.

  4. Accessibility and Semantic Improvements

  Interactive Elements: For elements that act as buttons (like your share icon), use a <button> element instead of an image. This automatically makes them keyboard-accessible. For example:

  <button class="share-button" aria-label="Share Article">
    <img src="images/icon-share.svg" alt="Share Icon" />
  </button>
  

  Heading Hierarchy: You are using a single headline (<h1>) which is good for the main title. Just ensure that if you add more headings later, they follow a logical order (e.g., <h2>, <h3>, etc.) to help screen readers and SEO.

  Alt Text Descriptions: Your alt texts are descriptive, which is excellent. Always make sure the alt text provides meaningful context.

  5. General Code Organization

  DRY (Don’t Repeat Yourself): Avoid duplicating CSS rules. Consolidate similar styles so that you have one source of truth for common elements. For example, if multiple containers share the same maximum width or padding, define a common class or variable.

  Consistent Naming: Your naming conventions (like hero__img, profile__container) are clear and consistent. Keep this up—it makes the code much easier to read and maintain.

  In Summary

  • Use CSS Grid for centering and overall layout to simplify your centering logic.
  • Group common styles and override with media queries for cleaner responsiveness.
  • Toggle classes in JavaScript to manage visibility, keeping behavior and styling separate.
  • Ensure accessibility by using semantic elements (like <button>) for interactive features and maintaining a logical heading structure.
  • Keep your code DRY and well-organized to ease future maintenance.

  00