
Jean Ruiz
@jeancarlosruizAll comments
- @huascarguillermo@jeancarlosruiz
Great job! 😊
- @MichalKarczewicz@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 - @renikoulen@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
- @Julia-Fidison@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 - @koreynichols@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 - @GeorgeCaldarescu@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.
-
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
- @Hutchii299@jeancarlosruiz
Great job on this challenge! Keep going!
- @oshudev@jeancarlosruiz
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@jeancarlosruiz
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@jeancarlosruiz
Buen trabajo!
- @CrypticMango@jeancarlosruiz
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!!!
- @Vanestefani@jeancarlosruiz
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 - @annekarolinefc@jeancarlosruiz
Great job!
- @amanda-a-reis@jeancarlosruiz
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 - @mayspiek@jeancarlosruiz
Great job completing your first challenge! Welcome to the community.
- @clelzey@jeancarlosruiz
Good job completing your first challenge, please take a look at your accessibility issues besides that, everything is okay.. keep going!
Marked as helpful