Social links profile

Community feedback

• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 6 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  Your solution looks great!

  📌 It's recommended to use semantic HTML elements like <ul> and <li> for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.

  Here's and example on how you can refactor your code:

  After Refactoring

  <ul class="list-container">
      <li><a href="#">Github</a></li>
      <li><a href="#">Frontend Mentor</a></li>
      <li><a href="#">LinkedIn</a></li>
      ...
  </ul>
  

  By using <ul> and <li>, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.

  I hope you find this helpful!

  Keep up the excellent work!

  1

  ---

  

  Maxim Oleynik•40

  @MaxOleynikPosted 6 months ago

  @danielmrz-dev thank you for feedback, i think this helpful for me

  0
• 

  Alex•3,130

  @Alex-Archer-IPosted 6 months ago

  Hi! Cool stuff with the flex and negative margins. And I said it not cos I do it the same way =)

  Can I ask you a question - why did you use pointer-evens: none inside a media query? I just never saw this practice earlier =)

  0

  ---

  

  Maxim Oleynik•40

  @MaxOleynikPosted 6 months ago

  @Alex-Archer-I Hi, I used negative margins because I couldn't achieve pixelperfect, but apparently this is unattainable) pointer-evens: none was used to disable the hover effect in the mobile version, since this effect can cause some problems.

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 6 months ago

  @MaxOleynik Huh, I wondered if pixel perfect is still a thing in the age of responsive design and dozens devises of every shape and size. And I think that the answer is - it depends of the project specific and the mood of the designer =)

  Never thought about hover problems on mobile screens. I'll try to read about it, thanks =)

  1

  

  Maxim Oleynik•40

  @MaxOleynikPosted 6 months ago

  @Alex-Archer-I You're right about pixel perfect, it depends on the customer's requirements. The design may not be suitable for pixel perfect. There are also differences in the work of the graphic editor, for example, figma and the browser. In my work, I only tried to position the elements relatively correctly, but it didn't work out very well either, the design preview and my work didn't match everywhere))

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 6 months ago

  @MaxOleynik Oh, yeah, I've encountered with a figma-browser issues for a couple of times. And than you find out about a retina displays... phew... And all your pixel perfect dreams just shattered =)

  I consider the projects on this site a eye-measurment training. And your work is quite accurate, by the way. It's like 99.5% accurate. Could be 99.9% if the text was a bit bolder =)

  1

  

  Maxim Oleynik•40

  @MaxOleynikPosted 6 months ago

  @Alex-Archer-I The solution turned out to be insufficiently accurate, since I used the figma plugin, which translates a screenshot of the layout into a fully functional layout, but apparently artificial intelligence is not sufficiently developed to create everything exactly, I noticed this only on the next task. Now I use only the image and the pixel perfect plugin in chrome, I hope it won't be too different)

  Thanks for the positive feedback, it's nice))

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 5 months ago

  @MaxOleynik I guess you mean that one project with a recipe page. Yeah, it have a lot of tiny details which may be confusing for AI.

  I see there are a lot of measurement plugins in chrome. Maybe I should try one to check my eye's accuracy =)

  By the way I just learned on practice that pointer-events: none blocks java-script "click" events. That kinda make it less helpfull for hover prevention as hover effects often applied to clickable elements.

  0

  

  Maxim Oleynik•40

  @MaxOleynikPosted 5 months ago

  @Alex-Archer-I yes, you're right, my solution is not the most optimal, but it's probably the simplest, I used a different approach to disabling hover on mobile devices in another project, but I haven't practiced for a long time and forgot how to implement it)

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 5 months ago

  Max, I see. Well, thank you, that was a useful and nice convo =)

  1