Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Media Queries, Aria Labeling, Tabindexing

P

@coding-vasu

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I worked on detailing, including:

  • List marker styling
  • ARIA labeling
  • Tab indexing

I encountered a development blocker related to responsiveness. Next time, I will isolate the problem and resolve it. I believe this approach will help me focus better and find a solution more efficiently.

What challenges did you encounter, and how did you overcome them?

Responsiveness: The image was getting inside the wrapper when its width was higher than the mobile screen.

List: Creating a gap between the marker and the text. I went through some blogs and resolved it.

What specific areas of your project would you like help with?

Achieve Responsiveness: Using clamp().

This way, I can avoid writing media queries. I have gone through a few blogs; however, I couldn’t find a definitive guide. Please let me know if you could help me out.

Community feedback

P
Steven Stroud 4,100

@Stroudy

Posted

Hello, Great job with this challenge I can see you put a lot of effort in and trying to go beyond the scope of the challenge, couple of things I noticed,

  • You should avoid using px as it is an absolute unit and not a responsive unit like rem or em, this is a great site, px to rem converter and you should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels.
  • I ran Google Dev tools, Lighthouse, score was 91 out of 100 for SEO, you can make this 100 by putting a <meta> description tag in the head.
  • By default <h1> tags have a font-weight: bold if you change it to font-weight: normal it will match the brief. (I know this because I had the same issue)
  • Using max-width: 100% or min-width: 100% is way more responsive then just width:100%, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail.

I look forward to seeing more from you, good luck and I hope some of this information help 🎉

1

P

@coding-vasu

Posted

@Stroudy Thanks for your valuable feedback.

I have updated my code

  1. converted px -> rem
  2. Updated the code as per lighthouse suggestion
  3. h1..h6 (font weight: bold -> normal
  4. I am thinking of clamp to make me page responsive need to learn more
1
P
Steven Stroud 4,100

@Stroudy

Posted

@coding-vasu, Your more than welcome 😁

0
P

@coding-vasu

Posted

@Stroudy , One last thing. I have gone through your few of your preview sites, I see that you are able to use GitHub pages for multiple repositories. Could you please let me know how did you achieved it.

Thank you!

0
P

@coding-vasu

Posted

@Stroudy , One last thing. I have gone through your few of your preview sites, I see that you are able to use GitHub pages for multiple repositories. Could you please let me know how did you achieved it.

Thank you!

0
P
Steven Stroud 4,100

@Stroudy

Posted

@coding-vasu No problem, open up github.com, find the repository you want click on it, Then click on settings at the top, On the left click on pages, Then under branch, hit the drop down hit main then next to it select /root. Wait 5 mins and a link will appear with your website just above it when you refresh super easy.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord