Social links profile with basic css and html

Community feedback

• 

  P

  Mohammad Waris Fayiz•470

  @fayiz770Posted 6 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  Your project is well-organized and demonstrates a good understanding of HTML and CSS fundamentals. Here are some feedback points and suggestions for improvement:

  HTML

  Semantic Structure:

  The HTML structure is clear, but consider using semantic tags like <main>, <header>, <footer>, etc., to improve readability and accessibility.

  Accessibility

  Adding alt attributes to images is crucial for accessibility. For example: <img src="img/avatar-jessica.jpeg" alt="Profile picture of Jessica Randall" />.

  Button Links

  If the buttons are meant to link to external profiles, using <a> tags styled as buttons would be more semantically appropriate.

  CSS

  General Styling

  The overall styling is good, but there are some areas for improvement to enhance responsiveness and consistency.

  Container Alignment

  Use Flexbox to center the .all container within the body. This will help with alignment and responsiveness.

  Font Import

  The font-family should be applied to the body tag to ensure consistency across all elements.

  Responsive Design

  Ensure that the container scales well on different screen sizes. Use percentages and flexible units (like em or rem) instead of fixed pixel values where possible.

  Improved CSS

  Here's an improved version of your CSS with these suggestions applied first of all, I want you to try yourself to do this stuff, but if you are stuck come to my solution OK?

  
  /* General Styling */
  body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: hsl(0, 0%, 12%);
    font-family: 'Inter', sans-serif;
  }
  
  /* Main Container */
  .all {
    background-color: grey;
    padding: 20px 20px 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 320px;
    margin: 0 20px; /* Responsive padding for small screens */
  }
  
  /* Image Styling */
  img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 16px; /* Consistent spacing */
  }
  
  /* Text Styling */
  .nom {
    color: hsl(0, 0%, 100%);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
  }
  
  .location {
    color: hsl(75, 94%, 57%);
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 16px; /* Consistent spacing */
  }
  
  .job {
    font-size: 14px;
    color: hsl(0, 0%, 100%);
    margin-bottom: 24px; /* Consistent spacing */
  }
  
  /* Button Styling */
  .btn {
    background-color: hsl(0, 0%, 20%);
    color: hsl(0, 0%, 100%);
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    max-width: 250px;
    height: 40px;
    border: none;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 8px;
    cursor: pointer; /* Pointer cursor for better UX */
  }
  
  .btn:hover {
    background-color: hsl(75, 94%, 57%); /* Add hover effect for better UX */
    color: hsl(0, 0%, 20%);
  }
  
  /* Responsive Design */
  @media (max-width: 375px) {
    .nom {
      font-size: 18px;
    }
    .location {
      font-size: 10px;
    }
    .job {
      font-size: 12px;
    }
    .btn {
      font-size: 12px;
      height: 36px;
    }
  }
  
  

  Key Changes and Improvements

  Flexbox for Centering

  The body now uses Flexbox to center the .all container. Container Width:

  The container's width is set to a maximum of 320px, making it more responsive.

  Consistent Spacing

  Improved margin and padding for consistent spacing between elements.

  Button Styling

  Added cursor: pointer to buttons for better UX and a hover effect to enhance interactivity.

  Font Sizes

  Adjusted font sizes for better readability and responsiveness.

  Media Queries

  Included media queries to adjust font sizes and button sizes on smaller screens.

  Final Thoughts

  Your project is well on its way to being a polished and responsive component. Implementing these suggestions will enhance the usability and accessibility of your design. Keep up the great work!

  If you find this helpful, please mark this helpful Thanks

  Marked as helpful

  1
• 

  ginhxh•70

  @ginhxhPosted 6 months ago

  thanks a lot this really help me .

  0