Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
5

JosephGabriel

@Joseph1032100 points

Junior Frontend Web Developer Always learning

I’m currently learning...

How to be a better web developer

Latest solutions

  • Sunnyside Landing Page

    #sass/scss

    JosephGabriel•100
    Submitted over 3 years ago

    0 comments
  • Huddle Landing Page

    #sass/scss

    JosephGabriel•100
    Submitted over 3 years ago

    0 comments
  • Article Component JS

    #less

    JosephGabriel•100
    Submitted over 3 years ago

    1 comment
  • 3-column-preview-card-component-main using LESS

    #less

    JosephGabriel•100
    Submitted over 3 years ago

    1 comment
  • NFT card challenge

    #bem#less

    JosephGabriel•100
    Submitted over 3 years ago

    0 comments

Latest comments

  • Nicaisse•340
    @abanicaisse
    Submitted over 3 years ago

    Time Tracking Dashboard With JS & Updates data with JSON

    #fetch
    1
    JosephGabriel•100
    @Joseph1032
    Posted over 3 years ago

    This looks great! Don't forget to add alternative text to your <img> elements to avoid the accessibility issues :) <img src="" alt="alternative text">

  • Camilo Gaviño•30
    @CamiloGav
    Submitted over 3 years ago

    HTML + CSS

    2
    JosephGabriel•100
    @Joseph1032
    Posted over 3 years ago

    I would just add more space between the paragraph text and the button so it looks more like the design example. Other than that, it looks good!

  • Nidhi Kumari•30
    @Nidhikumari-4
    Submitted over 3 years ago

    NFT preview card component

    1
    JosephGabriel•100
    @Joseph1032
    Posted over 3 years ago

    Don't forget to add alt text to your images to prevent getting those HTML issues :)

    <img src="" alt="">
    
  • Camilo Gaviño•30
    @CamiloGav
    Submitted over 3 years ago

    HTML + CSS

    #accessibility
    3
    JosephGabriel•100
    @Joseph1032
    Posted over 3 years ago

    Hi, Camilo. For the blue background, I would suggest taking a second look at the pseudo element ::before. Try using the background property instead of content for calling the eye image. It would look something like this:

    content: " ";
    position: absolute;
    background: url(./images/icon-view.svg) cadetblue;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    opacity: 0;
    

    You might need to re-work your HTML to get everything right, but it's a start :)

    Marked as helpful
  • Destiny•20
    @Destiny-16
    Submitted over 3 years ago

    NFT Preview using HTML, CSS, and Flexbox

    1
    JosephGabriel•100
    @Joseph1032
    Posted over 3 years ago

    To avoid this type of error from the Accessibility Issues: Heading levels should only increase by one

    Ensure that you're not skipping heading levels. In your HTML, you have an <h2> on line 33 and then an <h4> on line 40, skipping <h3>. You can fix this simply by replacing <h4> with <h3> and your <h5> with <h4>.

    Also, wrap your markup in <main></main> inside the <body> to avoid the landmark error from the Accessibility Issues as well.

    Nice work :)

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub