Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
10
John Idenyi
@JohnIdenyi

All comments

  • Omar Wassim•10
    @ProbablyOmar
    Submitted about 3 years ago

    1st Attempt QR Code Component

    1
    John Idenyi•250
    @JohnIdenyi
    Posted about 3 years ago

    Hi you did pretty good for first challenge.

    • You used inline and internal CSS to style your webpage. It is okay to use internal css for a single page but is not advisable you use it for a website with multiple pages. You shouldn't use inline CSS in styling your document. The recommended way which is the best practice is to use external stylesheets.

    • Your texts don't have space around them making them touch the container. Add a padding property to the div wrapping the texts.

    • You have some accessibility issues. You don't have an h1 element in your document. Change the first paragraph to an h1 element. Every page must have an h1 element because screen readers make use of it to identify the main content to visually-impaired persons. It also helps in better optimization by search engines.

    • You should use semantic HTML elements like <main> or <section> to wrap contents in your document. So instead of this <div class="center"> you should do this <main class="center"></main>.

    I hope this was helpful!

    Marked as helpful
  • TmT•40
    @TimPava
    Submitted about 3 years ago

    Frontend Mentor | QR Code component | by TmT

    1
    John Idenyi•250
    @JohnIdenyi
    Posted about 3 years ago

    Nice work! Though you have some accessibility issues.

    • You don't have an h1 element in your document. Change the h2 to an h1 element. Every page must have an h1 element because screen readers make use of it to identify the main content to visually-impaired persons. It also helps in better optimization by search engines.

    • Your html root element is meant to have a lang attribute set to a value, for example lang="en" indicates the page is in english.

    I hope this was helpful.

    Marked as helpful
  • Adam Wozniak•230
    @adamwozhere
    Submitted about 3 years ago

    QR code component - CUBE CSS, custom properties

    #cube-css
    1
    John Idenyi•250
    @JohnIdenyi
    Posted about 3 years ago

    Hi, you did good for this challenge. You don't have an h1 element in your document that is why there is accessibility issue. Change the h2 to an h1 element. Every page must have an h1 element because screen readers make use of it to identify the main content to visually-impaired persons. It also helps in better optimization by search engines.

    Marked as helpful
  • Pawel•120
    @RosinskiPawel
    Submitted about 3 years ago

    the 3rd challenge and I see I know more and more...

    1
    John Idenyi•250
    @JohnIdenyi
    Posted about 3 years ago

    Nice work Pawel! But you have some accessibility issues.

    • <p class="creation">Creation of <x>Jules Wyvern</x></p> "x" is not an html element so it shouldn't be used rather use <span> which is meant for inline elements.
    • Secondly, you should use semantic HTML elements like <main> or <section> to wrap contents in your document. So instead of this <div class="background"> you should do this <section class="background"></section>.

    • Thirdly, your webpage is not responsive on mobile device. Try using a media query to create styles that apply to mobile devices. You should try reducing the width of the container and the background class.

    I hope this was helpful.

    Marked as helpful
  • Tomi Joshua•80
    @notorioustomijo
    Submitted over 3 years ago

    QR Card Component using HTML and CSS Flexbox

    1
    John Idenyi•250
    @JohnIdenyi
    Posted over 3 years ago

    Hey, great design! I think the only thing to point out is it is not responsive. Add a media query so it can scale properly on a mobile view

    Marked as helpful
  • Phacharapol Phukana•10
    @Phacharapol18
    Submitted over 3 years ago

    HTML, CSS

    1
    John Idenyi•250
    @JohnIdenyi
    Posted over 3 years ago

    Hi, you did pretty well for first challenge. I would suggest using flexbox to center everything on the page and also try reducing the width of the the .background-middle class.

  • Luca Toni•80
    @shavedhead
    Submitted over 3 years ago

    Profile Card Component

    2
    John Idenyi•250
    @JohnIdenyi
    Posted over 3 years ago

    Dope work!

  • GrischK•140
    @GrischK
    Submitted over 3 years ago

    QR code component

    1
    John Idenyi•250
    @JohnIdenyi
    Posted over 3 years ago

    Hey, You did pretty good. Create a margin between your paragraphs and image to avoid clustering. I think you did well man.

  • Gabriel Menezes•10
    @Corviel
    Submitted over 3 years ago

    Solution to QR Code card made with HTML and CSS

    2
    John Idenyi•250
    @JohnIdenyi
    Posted over 3 years ago

    Hi, nice work. I would suggest increasing the width of the .qrandtext class element to 25% or more and also set a media query and increase the width to 85% for the same class so it can scale well on mobile devices.

    Marked as helpful
  • Iva•120
    @Ivuska
    Submitted over 3 years ago

    Mobile first solution using flexbox for QR component

    3
    John Idenyi•250
    @JohnIdenyi
    Posted over 3 years ago

    Nice work!

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

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