Html and CSS

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello belkeda, Your solution looks nice. I have some suggestions , To tackle the accessibility issues :

  Document should have one main landmark. Wrap the body content in< main>tag read more about main landmark.

  -You need to add an interactive element around the image.

  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images alt="clock" , alt="ethereum" .

  -The eye image doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt.

  • Don't overuse the <span>( also on the inappropriate place), and use other semantic tags like <figure> <figcaption> for the avatar part.

  • You should have used <h1> instead of <h3>Equilibrium #3429</h3>

  • You shouldn't use <hr> ( no need for a seperator ) you can use border-top property for the avatar.

  • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design.

  • Never Style on ID'S. Try to put classes directly on anything you want to style. you can use flexbox in the body to center the component on the page . body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; } I would to recommend to check @vanzasetia solution and read the read me file as he explained a lot. I' m sure it helps.

  I really hope this feedback helps , happy coding

  Marked as helpful

  2

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @PhoenixDev22 I notice that you're trying to make a link. You should use [Square Bracket](the URL goes here) instead of (Text)[URL].

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  @vanzasetia That’s right. Thanks a lot

  1

  

  ibelkedar•40

  @ibelkedarPosted almost 3 years ago

  @PhoenixDev22 I would to thank you for your answer, it was really helpful, I've learned a lot from it. That will help me to learn and do more in the future.

  1
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @ibelkedar ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it.

  Here are some of the tips I like to provide.

  • Image overlay position isn't in the correct one.
  • I suggest you to try transition on hoverable elements like image, heading and creator name.
  • Please try BEM for naming element classes. It will help you a lot on bigger projects.
  • Font sizes and spacings aren't the same with design. As a front-end developer, it's important to meet pixel-perfect requirements.

  https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  Marked as helpful

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @tymren608 In my opinion, pixel-perfect is not a must though. You can read this article about "Chasing the Pixel-Perfect Dream".

  0
• 

  Oskar•330

  @slothmast3rPosted almost 3 years ago

  You've made whole DOM element with opacity: 0.5. You should have made only background with opacity

  0