Profile Card Component

Community feedback

• 

  Said Alejandro Rosas Vera•145

  @said-alrovePosted over 3 years ago

  Hi TechnoSolution! ✌

  Well done with this challenge, just some advice:

  ✅ You can add the circles in the background by using the background property, nevermind if there's more than 1 image, you can control them easily, check this article for more information.

  ✅ Since you put 20% as width, there'll be problems with the mobile view, I recommend you to add a clamp() to the width, that way you can control thee values, a minimum (375px maybe), a default (here you can put 20%), and a maximum value (let's say 500px), check this article for more information. In like manner you can also add a min-width and a max-width to control just to values, you're free to choose either!.

  ✅ Add padding to the main container, that way on mobile view there won't be problems with the phone's borders.

  ✅ Same as up, you have to leave the alt attributes empty when there's not something important that the screen reader should read.

  Have a nice day :D!.

  0

  ---

  

  TechnoSolution•125

  @MuhammadLaeeqPosted over 3 years ago

  @said-alrove thanks for your suggestion

  0
• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  Hello, TechnoSolution! 👋

  Good job on this challenge! What I can suggest to change is:

  • Change the alt attributes for the .card image and .Profile-img as they don't add any extra context for screen reader users. Since your images are decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies.
  • Read about semantic. Semantic elements lead to more consistent code, they are easier to read and improve accessibility.
  • Since you're set width: 20% on .container your container looks bad on mobile resolution. Set it to width: 100% and add max-width: 400px to see difference. Add padding: 12px to body so it doesn't stick to borders on mobile. Read about media-queries to make responsive design so it looks and works properly on a range of different devices. Now your solution only look good on 375px and desktop, nothing between.
  • Use Responsive Design Mode to see how your website behaves on different devices. To toggle it press CTRL+SHIFT+M on Firefox, and CTRL+SHIFT+C on Chrome.

  Good luck with that, have fun coding! 💪

  1

  ---

  

  TechnoSolution•125

  @MuhammadLaeeqPosted over 3 years ago

  @tediko thanks for your feedback

  0