@huascarguillermoSubmitted about 1 year ago
Hey folks! 😄
This is my first solution in FrontEnd Mentor, any feedback is more than welcome,
Best Regards,
Huascar Guillermo,
Jean Ruiz
@jeancarlosruizAll comments
- @MichalKarczewiczSubmitted over 1 year ago
I just finished my second challenge. I want your suggestions what can be improved and in general what you like or you don't like. Thank you in advance for feedback :)
@jeancarlosruizPosted over 1 year agoHello 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="uniqueTitleIDdocumentation
-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 helpful1 - @renikoulenSubmitted over 1 year ago
Since the Newbie level is perfect for me, this was a great project for practicing my skills. What I found most difficult while building the project was more of a memory challenge than a challenge in coding. I enjoyed bringing what I learned to this challenge and seeing it work out.
@jeancarlosruizPosted over 1 year agoHi 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
0 - @Julia-FidisonSubmitted over 2 years ago
Hello, Could you tell me if the html semantics are corrects?
@jeancarlosruizPosted over 2 years agoGreat 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 helpful0 - @koreynicholsSubmitted over 2 years ago@jeancarlosruizPosted over 2 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 helpful0 - @GeorgeCaldarescuSubmitted over 2 years ago
Let me know what I can change and improve.
Sometimes I'm still struggle a bit with the responsive desing
@jeancarlosruizPosted over 2 years agoHey, 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 helpful0 - @JStone1Submitted over 2 years ago
Hello all,
This is my first proper submission so hopefully everything is in order. If there is anything in the code that you would suggest doing differently then it would be great to hear your feedback as I would love to improve.
Thank you for your time, John :)
- @Hutchii299Submitted over 2 years ago
- @oshudevSubmitted over 2 years ago
Hi! Eurus here.
Additional feedback or criticism will be appreciated. Thanks! 😁!
@jeancarlosruizPosted over 2 years agoHey, 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 helpful0 - @CoffeemechanicsSubmitted over 2 years ago
Let me know If I did anything wrong, or if there is anything I can improve.
@jeancarlosruizPosted over 2 years agoHey, 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 helpful1 - @HernandoSilvaLealSubmitted over 2 years ago
Hola amigos, espero seguir avanzando con toda, tuve inconvenientes para poder elegir la tipografia exacta, ya que no tuve el mockup de figma, sin embargo intente que quedase lo mas similar posible, muchas gracias por este espacio y ánimo a todos!
- @CrypticMangoSubmitted over 2 years ago
Do you see something that I can improve upon? Don't be afraid to let me know as I am trying to improve as much as possible. Thanks!
@jeancarlosruizPosted over 2 years agoI 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!!!
1
