Skip to content
OverviewSolutions
9
Comments
28

Saran

@Saran-73India .TN.460 points

I found that learning web development is fun and interesting and I am having a great time learning, I want to become a competent Front-end developer and frontendmentor is a great platform I am trying to make use of this platform as much as possible to improve my skills.

I’m currently learning...

JavaScript, React.

Latest solutions

View more solutions

Latest comments

  • Saran•460
    @Saran-73Posted about 3 years ago

    Hi 👋 congratulations.

    • To resolve those accessibility issues enclose your code with <main> tag.
    • Use <h1> tag once .
    • Provide alt attribute to the image tag.
    • It may help to avoid setting margin for the body instead give it 0.
    • Give the hero img the min and Max width values in % or pixels to make it responsive eg max-width:350px would work.
    • Keep practicing focus on Css it will be quite tricky but stay with it you will get better.

    Best of luck👍

    0
  • Saran•460
    @Saran-73Posted over 3 years ago

    Hi 👋 you did great job trying to find your way through this challenge, congratulations.

    • enclose your container in <main> tag ,use alt="" in your <img> tag to resolve accessibility issues.

    • To create that hover effect create a div with same image size using (:before) pseudo element give it backround color then centre the icon inside then make it position absolute to place it above the img and reduse the opacity and z- index property and while hovering change the opacity .Use( cursor:pointer; )property in css for the img div.

    • To understand about not affecting the opacity of the icon while reducing the background opacity ,take a look at the video by (coder coder) in youtube title "how to make background image transparent in Css" will help.

    • If u still have trouble mean feel free to take a look at my project

    • You can center the content horizontally and vertically by using min-width:100vh for the body and then usedisplay:grid; justify-items:center; align-items:center; in the body.

    Best of luck hope this helps.

    Marked as helpful
    1
  • Aayush karki•10
    @Aayushmann-makerSubmitted over 3 years ago

    NFT Card

    #jss#react#react-router#sass/scss#node
    2
    Saran•460
    @Saran-73Posted over 3 years ago

    Hi Use<main> tag for your container to resolve accessibility issues.

    0
  • Saran•460
    @Saran-73Posted over 3 years ago

    Use<main> tag for your container to resolve accessibility issues.you have <div> outside <main>

    0
  • Saran•460
    @Saran-73Posted over 3 years ago

    Hi 👋 congratulations on finishing this challenge

    • Use<main> tag for your container to resolve accessibility issues.

    • change your h2 to <h1> don't use h tags to get desired size u can change it in css bcoz h tags should always be in order.

    • Try to avoid Id selector you should know when to use Id ,class and when not to so learn about selector specificity this is important.

    Best of luck keep learning.

    Marked as helpful
    0
  • Saran•460
    @Saran-73Posted over 3 years ago

    Hi 👋 congratulations on finding your way to finish this project.

    • use<main>tag for u r container to resolve the accessibility issues.

    Best of luck for your future works.

    0
View more comments