Skip to content
OverviewSolutions
26
Comments
17
P

Jean Ruiz

@jeancarlosruizDominican Republic570 points

contactme@jeancarlosruiz.com

I’m currently learning...

A LOT EVERY DAY 🔥🖥️

Latest solutions

View more solutions

Latest comments

  • P
    Jean Ruiz•570
    @jeancarlosruiz

    Great job! 😊

  • P
    Jean Ruiz•570
    @jeancarlosruiz

    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
  • P
    Jean Ruiz•570
    @jeancarlosruiz

    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

  • P
    Jean Ruiz•570
    @jeancarlosruiz

    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
  • P
    Jean Ruiz•570
    @jeancarlosruiz

    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
  • P
    Jean Ruiz•570
    @jeancarlosruiz

    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
View more comments