Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
26
Comments
17
Jean Ruiz
@jeancarlosruiz

All comments

  • Huascar Guillermo Ulerio Carrasco•20
    @huascarguillermo
    Submitted almost 2 years ago

    Advice Generator With React

    #accessibility#lighthouse#react#vite#fetch
    1
    Jean Ruiz•570
    @jeancarlosruiz
    Posted almost 2 years ago

    Great job! 😊

  • Michał Karczewicz•70
    @MichalKarczewicz
    Submitted over 2 years ago

    Product preview card component

    2
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 2 years ago

    Hello Michal :D

    Congratulation on finishing this challenge, here are my suggestions detailed below:

    -HTML:

    -- <picture>: Using a picture tag you avoid using background-image setting width and height, inside of the picture tag set a main img and a source tag setting when the image will change with media query. Example with a mobile first workflow: Documentation, Video.

    <picture>
    <source media="(max-width: 810px)" srcset="img-mobile-location.jpg">
    <img src="img-desktop-location.jpg" alt="img-desktop"/>
    </picture>
    

    -- <h2> or <span>:

    • You can use an h2 or a span rather than h3 in <h3>Perfume</h3> because in order to use an h3 it needs to come after an h2 and so on. In my opinion the best solution for this is using a span. documentation

    -- SVG:

    • Since this SVG does not contain any visible text that describes the graphic, we need to add the alternative text (invisible) by:
    • Inside the <svg>, add: <title>A short title of the SVG</title>
    • Add the appropriate ID’s to the <title>: <title id="uniqueTitleID">The title of the SVG</title>
    • On the <svg> tag, add: aria-labelledby="uniqueTitleID documentation

    -CSS:

    -- rem:

    • For font-size is a must for accessibility, because px in some browsers doesn't resize when the browser settings are changed. documentation
    • Website to converte px to rem easly: PX to REM

    Best Regards, Jean Ruiz

    Marked as helpful
  • Reni•40
    @renikoulen
    Submitted over 2 years ago

    HTML, CSS

    1
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 2 years ago

    Hi Reni :)

    Congratulation on finishing this challenge, it was a great solution so far just a feedback about using rem instead of px for the best accessibility client experience.

    Best regards, Jean Ruiz

  • Julia Fidison MAHANDRISOA•90
    @Julia-Fidison
    Submitted over 3 years ago

    qr-code-component-main-first-solution-using-HTML-and-CSS

    1
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 3 years ago

    Great Job completing this challenge Julia!

    In my opinion with a <main> tag and a couple of <div> would be enough.

    <header> and <article> tag are not necessary in this type of challenge. Also use a <footer> tag in your attribution section to avoid accessibility issues.

    Beside that! Great job and keep going!

    Marked as helpful
  • Korey Nichols•30
    @koreynichols
    Submitted over 3 years ago

    QR component

    2
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 3 years ago

    Great job!

    Just a couple of feedback:

    • Use a main tag to avoid accessibility issues.
    • Use a footer tag in the attribution section to avoid accessibility issues.
    • CSS: is better practice and set values with rem and em instead of px. Here’s a video where you can learn why https://youtu.be/N5wpD9Ov_To and a link where you can learn about rem and em https://developer.mozilla.org/en-US/docs/Web/CSS/font-size.

    Happy coding! 😄

    Marked as helpful
  • George_alex•140
    @GeorgeCaldarescu
    Submitted over 3 years ago

    Order Summary solution

    3
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 3 years ago

    Hey, great job completing this challenge.

    Here are some improvements you can apply in your next challenge or modify this one:

    **HTML

    • Inside of your main you can use a div with a class container, then use another div that will contain the img instead of the header, in this challenge is not necessary.
    <div class="card"> <div class="top-img"> <img src="images/illustration-hero.svg" alt=""> </div> </div>
    • Always use a <footer> tag in your attribution to avoid accessibility issues.

    • Add a type= button to your button also :), this could help with a clear definition of what the button will do.

    Besides that everything is okay and is completely responsive on my phone. Happy coding, keep going!!

    Jean Ruiz

    Marked as helpful
  • JStone1•20
    @JStone1
    Submitted over 3 years ago

    QR Code Component Challenge - HTML, CSS

    1
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 3 years ago

    Great job! keep going

    Marked as helpful
  • Rhys Hutchinson•160
    @Hutchii299
    Submitted over 3 years ago

    3-Col Card Component using javascript MVC pattern and grid auto-fit

    1
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 3 years ago

    Great job on this challenge! Keep going!

  • Oshu•760
    @oshudev
    Submitted over 3 years ago

    3 Column Preview Card

    1
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 3 years ago

    Hey, great job completing this challenge.

    Here are some improvements you can apply in your next challenge or modify this one:

    • Always use a <footer> tag in your attribution outside the <main> tag.

    Besides that everything is okay and is completely responsive on my phone. Happy coding, keep going!!

    Jean Ruiz

    Marked as helpful
  • Coffeemechanics•100
    @Coffeemechanics
    Submitted over 3 years ago

    Responsive design using basic CSS.

    1
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 3 years ago

    Hey, great job completing this challenge.

    Here are some improvements you can apply in your next challenge or modify this one:

    • Always use a <main> tag in your HTML to avoid accessibility issues.
    • Move the attributions style from the HTML file to the CSS file.
    • Always use a <footer> tag in your attribution to avoid accessibility issues.

    Besides that everything is okay and is completely responsive on my phone. Happy coding, keep going!!

    Jean Ruiz

    Marked as helpful
  • HernandoSilvaLeal•20
    @HernandoSilvaLeal
    Submitted over 3 years ago

    Proyecto 1 - Frontend Mentor, Codigo QR

    2
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 3 years ago

    Buen trabajo!

  • Lisa Allen•570
    @CrypticMango
    Submitted over 3 years ago

    QR Code Component

    2
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 3 years ago

    I see a great job in this challenge @CrypticMango,

    2 little things you can modify in this challenge is

    1: Remove the style tag from your .html file and move it into the .css 2: Add a footer tag in the attribution class to fix the accessibility issues

    Happy coding!!!

  • Vanessa Estefania Corredor Andrade•80
    @Vanestefani
    Submitted over 3 years ago

    3-column-preview-card-component-main

    #accessibility
    3
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 3 years ago

    Hola Vanessa,

    Muy buen trabajo!

    Solo agregando un Text-transform: uppercase a tus titulos y un poco de margen-top a los botones desde los parrafos es suficiente.

    (Te escribi en español asumiendo la informacion de tu perfil. Mis disculpas)

    Marked as helpful
  • Anne Karoline Fortunato do Carmo•30
    @annekarolinefc
    Submitted over 3 years ago

    Card using HTML and CSS

    1
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 3 years ago

    Great job!

  • Amanda Reis•70
    @amanda-a-reis
    Submitted over 3 years ago

    QR Code using Flexbox

    1
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 3 years ago

    Great job completing your first challenge.

    A main, footer, H1 for the title, and p tags should be fine for the accessibility issues.

    Marked as helpful
  • Mayara S Carvalho•50
    @mayspiek
    Submitted over 3 years ago

    QR Code Component

    4
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 3 years ago

    Great job completing your first challenge! Welcome to the community.

  • Asteria•10
    @clelzey
    Submitted over 3 years ago

    Simple use of Flexbox for positioning and CSS for styling.

    1
    Jean Ruiz•570
    @jeancarlosruiz
    Posted over 3 years ago

    Good job completing your first challenge, please take a look at your accessibility issues besides that, everything is okay.. keep going!

    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

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